双击高亮需阻止默认行为、手动构造Range并确保目标为纯文本节点；surroundContents()仅支持单Text节点内范围，跨节点时应克隆内容分段处理；优先用语义化mark标签而非span，注意XSS防护与兼容性。
window.getSelection() 返回的是当前选区，不是双击触发的独立事件；直接监听 dblclick 并调用 surroundContents() 会失败——因为双击时浏览器默认已触发一次原生选中，此时 getSelection().rangeCount 可能为 0（尤其在非文本节点上），或选区被重置。
必须先阻止默认行为、手动构造 Range，并确保目标是纯文本节点。
双击后高亮失败？检查是否在非文本节点上触发
常见错误现象：Range.surroundContents() 报错 “The range has partially selected a non-Text node” 或静默失败。
原因：用户双击的是 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>、<div> 等元素节点，而非其内部的 Text 节点。浏览器虽视觉上“选中了文字”，但底层 <code>getSelection() 可能返回空或跨节点范围。
立即学习“前端免费学习笔记（深入）”；
- 用
event.target.nodeType === Node.TEXT_NODE判断是否点在文本上；如果不是，需递归查找第一个子文本节点（如event.target.childNodes[0]） - 更稳妥的做法是用
document.createTreeWalker(event.target, NodeFilter.SHOW_TEXT)获取所有后代文本节点，再逐个检查range.intersectsNode(textNode) - 若双击位置无文本（比如空白
<div></div>），应跳过，不报错也不执行高亮
surroundContents() 报错 “The range contains multiple nodes” 怎么办
这是最常踩的坑：双击选中跨多个文本节点的内容（例如段落中有 <strong>加粗</strong>文字），getRangeAt(0) 返回的 Range 会横跨 Text 和 Element，无法直接包裹。
- 不要强行调用
surroundContents()—— 它只接受完全位于单个 Text 节点内的 Range - 正确做法是：先
range.cloneContents()提取纯文本，再遍历原始 Range 覆盖的所有文本节点，对每个节点内匹配的子串分别创建mark元素并替换 - 或退而求其次：只高亮首个完整可操作的文本片段，其余忽略（适合教学场景，避免逻辑爆炸）
- 简单兜底：捕获异常后 fallback 到
document.execCommand('hiliteColor', false, 'yellow')（仅 Chrome/Firefox 支持，已废弃但尚可用）
用 mark 替代 span 包裹更安全且语义正确
很多人用 document.createElement('span') 加 style="background: yellow"，但这绕过了语义、可访问性与默认样式继承逻辑。
-
mark是 HTML5 原生语义标签，屏幕阅读器会读作“高亮文本”，且默认有黄色背景、无需额外 CSS - 但注意：IE 完全不支持
mark样式；旧版 Safari 中mark > strong的文字颜色可能被覆盖——需加防御性 CSS：mark > * { color: inherit !important; } - 若需自定义颜色，优先写类名（如
class="highlight-keyword"），而不是内联style，避免污染和维护困难 - 插入前务必用
document.createTextNode(match)设置内容，而不是拼接字符串，防止 XSS（如用户双击了<script>alert(1)</script>）
双击高亮真正难的不是代码行数，而是边界判断：文本节点是否可写、Range 是否干净、mark 是否被父级样式压制、暗色模式下颜色是否还可见。这些细节不验证，上线后第一周就会收一堆“点了没反应”的反馈。
