表单输入框中高亮文本的样式应用异常问题

问题根源 #

1. textarea的局限性：textarea是纯文本输入控件，只能显示普通文本，无法渲染HTML样式，任何HTML标签都会被当作字符串直接显示。
2. 转义字符错误：代码里用了<和>这种HTML实体，导致<strong>被转成<strong>，完全变成普通字符。
3. DOM元素拼接错误：把创建的span元素直接拼进textarea的value里，会得到[object HTMLSpanElement]这种无效字符串，达不到预期效果。

解决方案：改用contenteditable元素替代textarea #

textarea没法渲染HTML，换成contenteditable="true"的div就能直接显示粗体、斜体等样式。下面是修改后的完整代码：

修改后的HTML代码

<div class="modalDiv mb-3">
  <h5>Alert Details</h5>
  <div>
    <div class="formatting-buttons">
      <button class="btn btn-default" onclick="formatText('bold')">B<i class="fa fa-bold"></i></button>
      <button class="btn btn-default" onclick="formatText('italic')">I<i class="fa fa-italic"></i></button>
      <button class="btn btn-default" onclick="formatText('underline')">U<i class="fa fa-underline"></i></button>
    </div>
    <!-- 替换textarea为contenteditable的div，保留原样式 -->
    <div class="form-control" id="alertBody" 
         style="resize: vertical; min-height: 80px; border: 1px solid #ced4da; padding: .375rem .75rem;" 
         contenteditable="true"></div>
  </div>
</div>

修改后的JS代码

function formatText(command) {
  var editableDiv = document.getElementById('alertBody');
  var selection = window.getSelection();
  if (!selection.rangeCount) return;

  var range = selection.getRangeAt(0);
  var selectedText = range.toString();
  if (!selectedText) return;

  // 创建对应格式的HTML元素
  var formatElement;
  switch(command) {
    case 'bold':
      formatElement = document.createElement('strong');
      break;
    case 'italic':
      formatElement = document.createElement('i');
      break;
    case 'underline':
      formatElement = document.createElement('u');
      break;
    default:
      return;
  }

  // 把选中的文本放入格式元素，替换原选区内容
  formatElement.textContent = selectedText;
  range.deleteContents();
  range.insertNode(formatElement);

  // 重新选中格式化后的文本，保持编辑焦点
  var newRange = document.createRange();
  newRange.selectNodeContents(formatElement);
  selection.removeAllRanges();
  selection.addRange(newRange);
  editableDiv.focus();
}

生效原因 #

• contenteditable="true"的div支持渲染HTML，<strong>等标签会直接显示为对应的粗体样式，不会变成纯文本。
• 直接操作DOM选区插入格式化元素，避免了文本拼接带来的转义和类型错误。
• 保留了原textarea的样式，视觉上和之前的输入框一致。

内容的提问来源于stack exchange，提问作者Lofton Gentry