拼写检查器开发：如何为textarea错误单词添加红色下划线？

核心问题在于<textarea>是纯文本输入控件，无法内嵌HTML元素来单独为部分文本设置样式，所以我们需要替换成可编辑的<div>元素（设置contenteditable="true"），这样就能通过包裹<span>标签给错误单词添加样式。以下是具体实现步骤：

1. 替换输入容器 #

把原来的<textarea>换成可编辑div，同时保留类似textarea的视觉样式：

<!-- 替换textarea的可编辑div -->
<div id="editor" contenteditable="true" class="text-editor"></div>

<!-- 对应的CSS -->
<style>
.text-editor {
  width: 100%;
  min-height: 150px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
  font-size: 16px;
  white-space: pre-wrap; /* 保留换行和空格 */
}
.spell-error {
  text-decoration: underline wavy red; /* 波浪形红色下划线，比直线更醒目 */
  text-decoration-skip-ink: none; /* 确保下划线不会被字母截断 */
}
</style>

2. 监听输入事件并处理拼写检查 #

监听空格、回车（以及其他可能的单词分隔键，比如逗号、句号），触发拼写检查逻辑：

const editor = document.getElementById('editor');
// 假设已经通过API获取了Trie结构的单词表，或者在前端初始化了Trie实例
const trie = window.wordTrie; // 你的Trie实例

// 定义单词分隔符
const wordSeparators = [' ', '\n', ',', '.', '!', '?', ';', ':'];

editor.addEventListener('keydown', async (e) => {
  // 按下空格或回车时触发检查
  if (e.key === ' ' || e.key === 'Enter') {
    setTimeout(async () => {
      await checkAndMarkSpelling();
    }, 0); // 延迟执行，确保输入的字符已经渲染到编辑器中
  }
});

async function checkAndMarkSpelling() {
  // 保存当前光标位置，避免渲染后光标跳到开头
  const selection = window.getSelection();
  const cursorOffset = getCursorOffset(editor, selection);
  
  // 获取编辑器内的文本内容
  const text = editor.textContent;
  // 分割文本为单词和分隔符的数组（保留分隔符，保证格式不变）
  const tokens = splitTextIntoTokens(text);
  
  // 构建带标记的HTML内容
  let htmlContent = '';
  for (const token of tokens) {
    if (wordSeparators.includes(token)) {
      // 分隔符直接添加
      htmlContent += token;
    } else {
      // 检查单词是否在Trie中
      const isCorrect = trie.search(token.toLowerCase());
      if (!isCorrect) {
        // 错误单词用span包裹
        htmlContent += `<span class="spell-error">${escapeHtml(token)}</span>`;
      } else {
        htmlContent += escapeHtml(token);
      }
    }
  }
  
  // 更新编辑器内容
  editor.innerHTML = htmlContent;
  
  // 恢复光标位置
  restoreCursorPosition(editor, cursorOffset);
}

// 辅助函数：分割文本为单词和分隔符
function splitTextIntoTokens(text) {
  const regex = new RegExp(`([${wordSeparators.map(c => `\\${c}`).join('')}])`, 'g');
  return text.split(regex).filter(token => token);
}

// 辅助函数：转义HTML特殊字符，避免XSS
function escapeHtml(text) {
  return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
             .replace(/"/g, '&quot;').replace(/'/g, '&#039;');
}

// 辅助函数：获取光标相对于编辑器内容的偏移量
function getCursorOffset(element, selection) {
  if (selection.rangeCount === 0) return 0;
  const range = selection.getRangeAt(0);
  const preRange = document.createRange();
  preRange.selectNodeContents(element);
  preRange.setEnd(range.endContainer, range.endOffset);
  return preRange.toString().length;
}

// 辅助函数：恢复光标位置
function restoreCursorPosition(element, offset) {
  const selection = window.getSelection();
  const range = document.createRange();
  range.setStart(element, 0);
  range.collapse(true);
  const textNode = element.firstChild;
  if (textNode) {
    range.setStart(textNode, Math.min(offset, textNode.length));
  }
  selection.removeAllRanges();
  selection.addRange(range);
}

3. 后端Trie的调用（可选） #

如果你的Trie结构在Node.js后端，需要通过API提供单词检查接口，比如：

// Node.js 后端示例（Express）
app.post('/check-spelling', (req, res) => {
  const { word } = req.body;
  const isCorrect = trie.search(word.toLowerCase());
  res.json({ isCorrect });
});

// 前端修改checkAndMarkSpelling中的检查逻辑：
async function checkAndMarkSpelling() {
  // ... 其他代码不变
  for (const token of tokens) {
    if (wordSeparators.includes(token)) {
      htmlContent += token;
    } else {
      const response = await fetch('/check-spelling', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ word: token.toLowerCase() })
      });
      const { isCorrect } = await response.json();
      if (!isCorrect) {
        htmlContent += `<span class="spell-error">${escapeHtml(token)}</span>`;
      } else {
        htmlContent += escapeHtml(token);
      }
    }
  }
  // ... 其他代码不变
}

关键注意事项 #

• 光标位置恢复：每次更新编辑器HTML后，必须手动恢复光标位置，否则用户体验会很差。
• HTML转义：一定要转义用户输入的文本，避免XSS攻击。
• 单词分割逻辑：可以根据需求调整分隔符，比如添加连字符、下划线等，确保能正确识别单词边界。
• 性能优化：如果文本内容很长，不要每次都全量检查，可以只检查最后输入的单词，减少计算开销。

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