无法直接为 中的个别单词设置不同样式；需改用 contenteditable 的 模拟可编辑区域，并通过动态插入带内联样式的 HTML 片段（如 ）实现拼写错误词的高亮标记。

无法直接为 `` 中的个别单词设置不同样式；需改用 `contenteditable` 的 `<div>` 模拟可编辑区域，并通过动态插入带内联样式的 html 片段（如 `<span style="color:red;text-decoration:underline">`）实现拼写错误词的高亮标记。<p>在构建前端拼写检查器时，一个常见误区是试图直接操作 <textarea> 的内部文本样式——但需明确：<textarea> 是纯文本控件，<strong>不支持 HTML 内容或富文本样式</strong>，其 value 属性仅接受字符串，CSS 如 text-decoration 或 color 仅作用于整个元素，无法按词粒度控制。

✅ 正确方案：使用 contenteditable="true" 的

替代 ，将其作为可编辑富文本容器。该元素允许你以 HTML 结构组织内容，从而为每个单词（甚至字符）独立应用样式。<h3>基础实现示例</h3><pre class="brush:php;toolbar:false;"><div id="editor" contenteditable="true" style="min-height: 120px; padding: 12px; border: 1px solid #ccc; font-family: system-ui, sans-serif;"> Type here... </div></pre><pre class="brush:php;toolbar:false;">// 简单拼写检查逻辑（示意） const dictionary = new Set(['hello', 'world', 'javascript', 'spell', 'checker']); const editor = document.getElementById('editor'); function highlightMisspelled(text) { return text.split(/\b/g).map(word => { // 仅处理纯字母单词，保留标点和空格原样 if (/^[a-zA-Z]+$/.test(word) && !dictionary.has(word.toLowerCase())) { return `<span style="color: #d32f2f; text-decoration: underline; text-decoration-color: #d32f2f;">${word}</span>`; } return word; }).join(''); } // 监听输入结束（如空格、回车、Tab） editor.addEventListener('keydown', (e) => { if (e.key === ' ' || e.key === 'Enter' || e.key === 'Tab') { e.preventDefault(); // 防止默认换行/空格插入（可选） const currentHTML = editor.innerHTML; const plainText = editor.innerText; // 获取纯文本用于分词 editor.innerHTML = highlightMisspelled(plainText); // ⚠️ 注意：innerHTML 替换后光标会丢失，需额外处理光标位置（见下方说明） } });</pre><h3>关键注意事项</h3> <ul> <li> <strong>光标与焦点管理</strong>：每次修改 innerHTML 会导致光标重置到起始位置。生产环境需结合 window.getSelection() 和 Range API 保存/恢复光标位置，或使用成熟的富文本库（如 <a href="https://www.php.cn/link/6556b0f81751f8bc47d5d559eb04a114" rel="nofollow" target="_blank">Slate.js</a>、<a href="https://www.php.cn/link/2bfe367f6f040df48462a1a9a684ea43" rel="nofollow" target="_blank">Tiptap</a>）。</li> <li> <strong>XSS 防护</strong>：若用户输入可能含 HTML 字符（如 ），需先进行转义（如用 textContent 提取纯文本），再生成安全的 <span> 标签，<strong>切勿直接 innerHTML += userInput</strong>。</span> </li> <li> <strong>性能优化</strong>：对长文本频繁重绘开销大，建议仅在用户显式触发（如按下空格后）才全量重渲染，或采用增量标记策略（如只检查最后单词）。</li> <li> <strong>语义与可访问性</strong>：为保障屏幕阅读器兼容性，可为错误词添加 aria-label="Misspelled: ${word}"，并确保颜色对比度符合 WCAG 2.1 AA 标准（红字建议搭配深灰背景或加粗增强可读性）。</li> </ul> <h3>总结</h3> <p>用 contenteditable </p> <div> 替代 <textarea> 是实现单词级样式控制的唯一可行路径。它赋予你完整的 DOM 操作能力，但也带来光标管理、安全性与可访问性等新挑战。对于轻量级拼写检查场景，上述方案简洁有效；若需复杂编辑功能（撤销、协作、嵌套格式），则应转向专业富文本框架。始终牢记：样式即结构，控制即 HTML —— 在可编辑容器中，每个单词都应是一个受控的 DOM 节点。