无法直接对 中的个别单词设置样式；需改用 contenteditable="true" 的 模拟文本输入，并通过动态插入带内联样式的 HTML 片段（如 ）实现单词级高亮。

无法直接对 `` 中的个别单词设置样式；需改用 `contenteditable="true"` 的 `<div>` 模拟文本输入，并通过动态插入带内联样式的 html 片段（如 `<span style="text-decoration: underline; color: red">`）实现单词级高亮。<p>在构建拼写检查器等需要<strong>单词级样式控制</strong>的富文本交互场景时，原生 <textarea> 是一个根本性限制：它仅支持纯文本，不支持子元素或内联样式。因此，必须采用替代方案——使用具有 contenteditable="true" 属性的 <div>（或其他块级元素），使其行为类似可编辑区域，同时保留 HTML 结构的灵活性。<h3>✅ 推荐实现方式：contenteditable + 动态 HTML 渲染</h3> <p>核心思路是：监听用户输入（如空格、回车或失焦事件），将当前内容按词分割，结合拼写检查逻辑（例如您已实现的 Trie 校验），对错误单词包裹 <span> 并添加样式，再整体写入 innerHTML。</span></p> <p>以下是一个最小可行示例：</p> <pre class="brush:php;toolbar:false;"><div id="editor" contenteditable="true" style="border: 1px solid #ccc; padding: 12px; min-height: 120px; font-family: system-ui, sans-serif;"> </div></pre> <pre class="brush:php;toolbar:false;">const editor = document.getElementById('editor'); // 模拟 Trie 检查函数（实际应调用您的 Node.js 后端或前端 Trie 实例） function isWordValid(word) { const validWords = new Set(['hello', 'world', 'spell', 'checker', 'javascript']); return validWords.has(word.toLowerCase().replace(/[^\w]/g, '')); } function highlightMisspelled(text) { return text.split(/(\s+)/).map(token => { // 仅对非空白 token 进行校验和包装 if (token.trim() === '' || /\s+/.test(token)) return token; const cleanWord = token.replace(/[^\w']/g, ''); // 简单清洗标点（生产环境建议更健壮处理） if (!isWordValid(cleanWord)) { return `<span style="text-decoration: underline; text-decoration-color: #e53e3e; color: #c53030;">${token}</span>`; } return token; }).join(''); } // 监听输入完成事件（推荐使用 input + debounce，或监听 keydown for Space/Enter） editor.addEventListener('keydown', (e) => { if (e.key === ' ' || e.key === 'Enter') { setTimeout(() => { const plainText = editor.textContent; editor.innerHTML = highlightMisspelled(plainText); // ⚠️ 注意：innerHTML 会重置光标位置，见下方说明 }, 0); } });</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</a>、<a href="https://www.php.cn/link/2bfe367f6f040df48462a1a9a684ea43" rel="nofollow" target="_blank">Tiptap</a>）。</li> <li> <strong>XSS 防护</strong>：若拼写检查结果来自不可信来源（如用户提交的文本未清洗），直接拼接 innerHTML 存在风险。务必对 token 做 HTML 转义（如使用 textContent 创建临时元素提取纯文本），或使用 DOMPurify.sanitize()。</li> <li> <strong>换行与格式保留</strong>：<div contenteditable> 默认将换行渲染为 <div> 或 <br>。若需精确控制，建议统一用 <br> 表示换行，并在 highlightMisspelled 中特殊处理。<li> <strong>性能优化</strong>：对长文本频繁重绘开销大。建议添加防抖（debounce）、仅校验新增单词，或服务端分批校验。</li> <h3>✅ 总结</h3> <p><textarea> 不支持单词级样式 —— 这不是缺陷，而是设计使然。contenteditable 是标准、语义化且广泛兼容的替代路径。虽然它带来光标管理和 HTML 安全等额外复杂度，但为拼写检查、语法高亮、实时协作等场景提供了必要基础。结合您已有的 Trie 校验能力，只需将「校验 → 分词 → 包装 → 渲染」流程封装为可复用函数，即可构建专业级的客户端拼写反馈体验。