求教：Grammarly如何局部标记错误文本？实现输入框验证文本动态高亮

嘿，这两个问题都挺典型的，我来给你拆解清楚：

Grammarly核心是绕开了原生input/textarea的限制——因为原生表单元素根本不支持局部文本样式。它的实现逻辑是这样的：

• 替换输入容器：它会在原生输入框上方覆盖一个contenteditable="true"的富文本容器（通常是div），同时把原生输入框隐藏起来。
• 双向内容同步：用户在富文本容器里输入时，Grammarly会实时把内容同步到原生输入框，保证表单提交时数据是完整的；反过来，原生输入框的内容变化也会同步到富文本层。
• 错误标记与样式：当它检测到文本错误（语法、拼写等），会把错误片段用<span>标签包裹，给这个span加上自定义样式（比如红色波浪下划线、背景高亮），实现局部样式化。
• 光标与交互维护：为了不影响用户输入体验，它会用Selection API精准维护光标位置，避免修改DOM后光标乱跑。

你说的没错，原生input/textarea确实只能整体设置样式，没法单独高亮某段文本。这里有两种成熟的解决方案，你可以根据需求选：

方案一：用contenteditable富文本容器替代原生输入框 #

直接把输入区域换成可编辑的富文本div，这样就能自由给文本片段加样式了，步骤如下：

• 创建一个contenteditable="true"的div，模拟输入框的视觉样式（边框、 padding、字体等）。
• 触发验证时（比如用户输入、失去焦点），解析文本内容，把不符合验证条件的片段用带样式的<span>包裹。
• 关键要处理光标位置，避免修改DOM后光标错位，用Selection API保存和恢复光标。

示例代码：

<div id="editableInput" contenteditable="true" style="border: 1px solid #ccc; padding: 8px; min-height: 40px; font-size: 16px;"></div>
<script>
  const editable = document.getElementById('editableInput');
  
  // 模拟验证规则：禁止输入数字，高亮所有数字
  function validateAndHighlight() {
    const text = editable.textContent;
    // 保存当前光标位置
    const selection = window.getSelection();
    let cursorOffset = 0;
    if (selection.rangeCount > 0) {
      const range = selection.getRangeAt(0);
      cursorOffset = range.startOffset;
    }
    
    // 替换数字为高亮span
    const highlightedText = text.replace(/(\d+)/g, '<span style="background-color: #ffdddd; text-decoration: underline red;">$1</span>');
    editable.innerHTML = highlightedText;
    
    // 恢复光标位置
    if (cursorOffset > 0) {
      const newRange = document.createRange();
      const textNode = editable.firstChild || editable;
      newRange.setStart(textNode, cursorOffset);
      newRange.setEnd(textNode, cursorOffset);
      selection.removeAllRanges();
      selection.addRange(newRange);
    }
  }
  
  // 输入时实时验证高亮
  editable.addEventListener('input', validateAndHighlight);
  // 初始化触发一次
  validateAndHighlight();
</script>

方案二：双容器叠加方案（保留原生输入框） #

如果不想放弃原生input/textarea的表单特性，可以用“底层输入+上层高亮”的叠加方案：

• 底层放原生输入框，负责接收用户输入和表单提交。
• 上层放一个和输入框样式完全一致的div，设置pointer-events: none;（让它不拦截输入事件），然后把输入文本渲染到这个div里，对错误片段加样式。
• 实时同步底层输入框的内容到上层高亮div，保证视觉一致。

示例代码：

<div style="position: relative; width: 300px;">
  <input type="text" id="realInput" style="width: 100%; padding: 8px; font-size: 16px; border: 1px solid #ccc; box-sizing: border-box;" />
  <div id="highlightLayer" style="position: absolute; top: 0; left: 0; width: 100%; padding: 8px; font-size: 16px; border: 1px solid transparent; box-sizing: border-box; pointer-events: none; white-space: pre-wrap;"></div>
</div>
<script>
  const realInput = document.getElementById('realInput');
  const highlightLayer = document.getElementById('highlightLayer');
  
  // 同步内容并高亮错误
  function updateHighlight() {
    const text = realInput.value;
    // 同样以高亮数字为例
    const highlightedContent = text.replace(/(\d+)/g, '<span style="background: #ffdddd; text-decoration: underline red;">$1</span>');
    highlightLayer.innerHTML = highlightedContent;
  }
  
  realInput.addEventListener('input', updateHighlight);
  // 初始化
  updateHighlight();
</script>

额外注意事项 #

• 双容器方案一定要保证上层div和底层输入框的样式完全匹配（字体、字号、padding、行高等），否则会出现文本错位。
• contenteditable方案需要处理一些边缘情况，比如粘贴文本时的格式清理、回车键的换行处理。
• 如果是多行输入，记得给容器设置white-space: pre-wrap;保证换行符正常显示。

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