动态高亮须避开innerHTML.replace()，应遍历纯文本节点（nodeType===3），对keyword双重转义（HTML实体+正则元字符），用createElement('mark')安全替换；多词需按长度降序处理；长文本需分片+requestIdleCallback延迟渲染。

动态高亮必须避开 innerHTML.replace()

直接对 innerHTML 做正则替换是高频翻车点，三类问题几乎必现：keyword 含 .?[ 等正则元字符 → 报错中断；含 <script></script> → XSS；原文有 console.log() → 标签被撕开、DOM 解析失败。正确路径是只操作纯文本节点：node.nodeType === 3，跳过所有元素节点。用 document.createTreeWalker(element, NodeFilter.SHOW_TEXT) 获取全部文本节点，再对每个 node.textContent 执行安全替换。

关键词需双重转义：HTML + 正则

用户输入的 keyword 必须先做 HTML 实体转义（防 XSS 和解析断裂），再做正则元字符转义（防匹配崩溃）：

• HTML 转义：对 &"'`=/ 替换为 xx; 形式
• 正则转义：对 [.*+?^${}()|[]] 每个字符前加 ，例如 keyword.replace(/[.*+?^${}()|[]]/g, '\$&')
• 匹配后不要拼字符串，用 document.createElement('mark') + textContent 组装新节点，再调用 node.parentNode.replaceChild(mark, node)

多关键词高亮要按长度降序处理

否则语义断裂。比如同时高亮 "JavaScript" 和 "Script"，若先匹配短词，会生成非法嵌套：JavaScript。浏览器虽会自动展平为两个独立 ，但读屏器播报混乱、CSS 样式错位、后续清除逻辑失效。正确做法是：Object.keys(tagColors).sort((a, b) => b.length - a.length)，确保长标签优先匹配。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

长文本首次渲染卡顿？延迟高亮 + 分片处理

对含数千字节的

一次性遍历所有文本节点，会阻塞主线程。可行解法是分片 + requestIdleCallback：

• 用 createTreeWalker 提前拿到所有目标文本节点数组，不立即处理
• 每帧最多处理 5 个节点，用 requestIdleCallback 在空闲时段执行，避免掉帧
• 首屏只高亮可视区域内的节点（结合 getBoundingClientRect() 判断）
• 滚动时监听 scroll，对新进入视口的节点补高亮

真正难的不是“怎么标黄”，而是“怎么在不打断用户阅读的前提下标黄”——DOM 遍历不可跳过，但时机和粒度必须可控。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！