HTML 原生 不支持内联样式，无法单独高亮或下划线其中部分文字；正确方案是改用 contenteditable="true" 的 ，结合 DOM 操作动态包裹错误单词并应用 CSS 样式。

html 原生 `` 不支持内联样式，无法单独高亮或下划线其中部分文字；正确方案是改用 `contenteditable="true"` 的 `<div>`，结合 dom 操作动态包裹错误单词并应用 css 样式。<p>在构建交互式拼写检查器时，一个常见误区是试图直接在 <textarea> 中对个别单词添加颜色、下划线或背景色——这是不可能的，因为 <textarea> 仅接受纯文本（text/plain），其内容无法被结构化或样式化。

✅ 正确解法：使用语义等价但更灵活的替代元素——

。它既保留了用户自由输入、光标定位、快捷键（如 Ctrl+Z）等原生编辑体验，又允许你通过标准 DOM 操作精确控制任意子节点的样式。

实现步骤概览

1. 替换 HTML 结构：用
   替代 ；
2. 监听输入事件：推荐使用 'input' 事件（兼容空格、回车、粘贴等）；
3. 分词与校验：按空白符分割文本，调用 Trie 或其他字典服务判断拼写；
4. 安全重建 HTML：将每个单词包裹为 ，根据校验结果添加类名或内联样式；
5. 保持光标位置（进阶）：若需避免光标跳转，需额外保存/恢复选区（本文暂略，见注意事项）。

基础示例代码

<div id="editor" contenteditable="true" style="border: 1px solid #ccc; padding: 12px; min-height: 120px; font-family: inherit;">
</div>

// 假设已初始化好 spellCheck(word) → Boolean
function highlightMisspelled(text) {
  return text.split(/(\s+)/).map(token => {
    // 保留空格、换行符等分隔符不处理
    if (/^\s+$/.test(token)) return token;
    // 对非空白 token 校验并包装
    const isCorrect = spellCheck(token);
    return isCorrect 
      ? token 
      : `<span style="color: red; text-decoration: underline wavy red;">${token}</span>`;
  }).join('');
}

document.getElementById('editor').addEventListener('input', function () {
  const rawText = this.textContent; // 获取纯文本内容（避免嵌套 span 干扰）
  this.innerHTML = highlightMisspelled(rawText); // 重置为带样式的 HTML
});

⚠️ 关键注意事项

• 不要直接操作 innerHTML 后再读取 textContent：这会导致格式丢失和光标重置。生产环境建议使用 Range + Selection API 精准更新，或采用 Slate.js、Tiptap 等富文本框架；
• XSS 防护：若单词来自用户输入且未清洗，应避免直接拼接 HTML。推荐使用 document.createElement('span') + textContent + style 属性赋值方式；
• 性能优化：对长文本频繁重绘开销大，可添加防抖（debounce）、仅校验新增行、或采用增量解析策略；
• 无障碍支持：为
  显式添加 role="textbox" 和 aria-label，确保屏幕阅读器正确识别。

  总结

  是纯文本容器，而拼写高亮本质是结构化富文本渲染任务。转向 contenteditable 不仅可行，更是现代 Web 编辑器（如 Notion、Obsidian Web）的基础范式。掌握其 DOM 控制逻辑，是你构建专业级文本处理工具的关键一步。