不能直接用 innerHTML.replace() 处理关键词，因正则构造会报错、HTML实体破坏结构、导致嵌套mark语义断裂；须遍历文本节点、关键词按长度降序排序、正则转义、DOM方法创建mark并替换。
为什么不能直接用 innerHTML.replace() 处理关键词
这是最常见也最容易翻车的做法。用户输入 cat[0] 或 <script></script> 时，new RegExp(keyword) 会直接抛错；若关键词含 &、"，拼进 HTML 字符串后可能破坏 DOM 结构，比如把 console.log()console.log()，再套一层就变成嵌套，语义断裂、样式错位。
必须只操作文本节点，且按长度降序匹配关键词
正确路径是跳过所有 HTML 标签，只遍历纯文本节点（nodeType === 3），再对每个节点的 textContent 做安全替换。关键词列表必须先按长度降序排序——否则同时高亮 #tag 和 #tagAgain 时，短词先被替换，导致 #tag 在 #tagAgain 内部被重复包裹，最终生成非法嵌套或语义丢失。
- 用
document.createTreeWalker(element, NodeFilter.SHOW_TEXT)获取全部文本节点 - 过滤掉空节点和仅含空白符的节点：
if (!node.textContent.trim()) continue - 关键词正则转义：
keyword.replace(/[.*+?^${}()|[]\]/g, '\$&') - 构造全局不区分大小写的正则：
new RegExp(`(${escaped})`, 'gi')
创建 mark 元素必须用 DOM 方法，不能拼字符串
匹配到内容后，不能用 replace() 返回带标签的字符串再赋给 innerHTML，而要创建真实 DOM 节点并原位替换。否则 XSS、DOM 撕裂、编码错乱全都会发生。
- 调用
document.createElement('mark') - 设
mark.textContent = matchedText（不是 innerHTML） - 用
node.parentNode.replaceChild(mark, node)替换原始文本节点 - 若需保留原始大小写（如用户搜
react，但页面中是React），用捕获组提取原始匹配值
mark 样式必须显式声明，且考虑深色模式与可访问性
浏览器默认黄色背景在生产环境里基本不可用：Windows 高对比度模式下会被重置为黑底、Outlook 邮件客户端完全忽略、Safari 阅读模式剥离 UA 样式、深色主题下默认色对比度不足 WCAG AA 标准。不写 CSS 就上线，等于放弃可访问性。
- 至少声明
background-color和color，避免文字消失 - 加
padding和border-radius提升可读性，原生mark紧贴文字边缘生硬 - 暗色模式适配必须手动写：
@media (prefers-color-scheme: dark) { mark { background-color: #4a5568; color: white; } } - 类名推荐带前缀（如
mark.highlight-tag），避免第三方库全局mark样式冲突
真实项目中最容易被忽略的是：**关键词转义必须双重处理——既要正则转义，也要 HTML 实体转义（尤其当内容来自用户输入并需插入 DOM 时）；以及标记过程必须隔离文本节点，哪怕只是简单地高亮几个词，一旦混入富文本，innerHTML 就是定时炸弹。**
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
