直接 innerHTML.replace() 会炸掉页面，因其同时触发 XSS、DOM 结构破坏和正则语法错误三重风险；安全做法必须仅遍历文本节点，双重转义关键词，动态创建 mark 元素插入，并显式声明样式适配深色模式与中文词边界。
为什么直接 innerHTML.replace() 会炸掉页面
这是最常踩的坑：用 element.innerHTML = text.replace(/keyword/g, '<mark>$&</mark>') 一跑就出问题。不是语法错，而是三重风险同时触发：
- 用户搜
[a-z]，正则没转义元字符 →new RegExp(keyword)直接抛SyntaxError - 关键词含
<script>或&→ 拼进字符串后执行 XSS 或破坏 DOM 结构（比如把<img src="x">切成无效标签） - 匹配跨 HTML 标签：原文是
<strong>React</strong>，搜act可能变成<strong>R<mark>eact</mark></strong>，<mark>被撕开，解析失败
必须只操作 Text 节点，别碰 innerHTML
安全高亮的本质是绕过字符串拼接，只在纯文本内容上做切分与替换。核心路径是遍历 + 创建 + 替换：
- 用
document.createTreeWalker(element, NodeFilter.SHOW_TEXT)获取所有文本节点 - 对每个节点的
textContent做匹配，跳过空或纯空白节点（node.textContent.trim() === ''） - 关键词先双重转义：
escapeHtml(keyword)（防 XSS），再keyword.replace(/[.*+?^${}()|[]]/g, '\$&')（防正则崩） - 匹配后不返回字符串，而是：
const mark = document.createElement('mark'); mark.textContent = matchedText;，再用node.parentNode.replaceChild(mark, node)
样式必须显式声明，别信浏览器默认值
浏览器给 <mark> 设的默认背景色（如 #ff0）在真实环境中基本不可靠：
- 暗色模式下 Chrome/Firefox 可能变透明或灰黄；Safari 阅读模式直接忽略 UA 样式
- Windows 高对比度模式强制重置为黑底白字，黄底消失
- 邮件客户端（Outlook）禁用 UA 样式，
<mark>渲染为纯黑底白字甚至不可见
生产环境至少写死这三项：background-color、color、padding。推荐组合：mark { background-color: #ffeb3b; color: #212121; padding: 0.1em 0.25em; }，深色模式加 @media (prefers-color-scheme: dark) { mark { background-color: #ffca28; color: #121212; } }。
中文搜索要防“字词边界误匹配”
搜“服务”，页面出现“服务器”“微服务”，/服务/gi 会把它们全切开高亮，语义错乱。这不是 <mark> 的问题，是正则没设边界：
- 英文可用
服务，但中文无空格，失效 - 稳妥做法是用
/(? —— 排除前后紧邻汉字的情况 - 更健壮方案是接入分词库（如 jieba.js），但多数搜索场景只需加前后字符判断即可
真正难的是平衡：既要语义准确（<mark> 不可替代），又要 DOM 安全（不能拼字符串），还得适配各种系统级渲染策略——漏掉任意一环，高亮就只是视觉幻觉。
