动态高亮须避开innerHTML.replace()，应遍历纯文本节点（nodeType===3），对keyword双重转义（HTML实体+正则元字符），用createElement('mark')安全替换；多词需按长度降序处理；长文本需分片+requestIdleCallback延迟渲染。
动态高亮必须避开 innerHTML.replace()
直接对 innerHTML 做正则替换是高频翻车点，三类问题几乎必现：keyword 含 .?[ 等正则元字符 → 报错中断；含 <script></script> → XSS；原文有 <code>console.log() → 标签被撕开、DOM 解析失败。正确路径是只操作纯文本节点：node.nodeType === 3，跳过所有元素节点。用 document.createTreeWalker(element, NodeFilter.SHOW_TEXT) 获取全部文本节点，再对每个 node.textContent 执行安全替换。
关键词需双重转义：HTML + 正则
用户输入的 keyword 必须先做 HTML 实体转义（防 XSS 和解析断裂），再做正则元字符转义（防匹配崩溃）：
- HTML 转义：对
&"'`<code>=/替换为xx;形式 - 正则转义：对
[.*+?^${}()|[]]每个字符前加，例如keyword.replace(/[.*+?^${}()|[]]/g, '\$&') - 匹配后不要拼字符串，用
document.createElement('mark')+textContent组装新节点，再调用node.parentNode.replaceChild(mark, node)
多关键词高亮要按长度降序处理
否则语义断裂。比如同时高亮 "JavaScript" 和 "Script"，若先匹配短词，会生成非法嵌套：<mark>Java<mark>Script</mark></mark>。浏览器虽会自动展平为两个独立 <mark></mark>，但读屏器播报混乱、CSS 样式错位、后续清除逻辑失效。正确做法是：Object.keys(tagColors).sort((a, b) => b.length - a.length)，确保长标签优先匹配。
长文本首次渲染卡顿？延迟高亮 + 分片处理
对含数千字节的 <div> 一次性遍历所有文本节点，会阻塞主线程。可行解法是分片 + requestIdleCallback：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>用 <code>createTreeWalker 提前拿到所有目标文本节点数组，不立即处理
requestIdleCallback 在空闲时段执行，避免掉帧getBoundingClientRect() 判断）scroll，对新进入视口的节点补高亮真正难的不是“怎么标黄”，而是“怎么在不打断用户阅读的前提下标黄”——DOM 遍历不可跳过，但时机和粒度必须可控。
