必须只操作文本节点（Node.TEXT_NODE），用 document.createTreeWalker() 遍历并转义正则元字符，创建 mark 元素替换匹配文本，再 normalize 合并节点，确保安全、语义正确且兼容无障碍。
直接用 innerHTML.replace() 处理搜索高亮，90% 的项目会在上线后出问题——不是 XSS 漏洞，就是 DOM 错乱、中文断词错误或读屏器完全不识别。
为什么 innerHTML.replace() 一用就崩
它把整个 HTML 字符串当纯文本扫，根本不管里面是标签还是文本。搜 img，可能把 <img src="logo.png" alt="HTML页面怎么动态高亮显示搜索结果" > 里的 img 也包进 <mark></mark>；搜 . 或 [，正则直接抛错；更糟的是，用户输 <script>alert(1)</script>，字符串拼接后直接执行脚本。
- DOM 结构被破坏：原
<p>abc</p>可能变成<p><mark>abc</mark></p> <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><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a> <p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p> </div> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>看似正常，但搜p就会产出非法 HTML，页面白屏 - 事件监听器丢失：用
innerHTML = ...覆盖内容，所有已绑定的 click、input 等监听器全清空 - 中文无空格分隔，
gi全局匹配极易跨词切开，比如搜猫把“波斯猫粮”切成“波斯猫粮”，语义断裂
必须只操作文本节点（Node.TEXT_NODE）
这是唯一能避开标签干扰、保留 DOM 结构和事件绑定的安全路径。核心是用 document.createTreeWalker() 遍历，跳过所有非文本节点。
- 先过滤空节点：
if (!node.textContent.trim()) continue - 关键词必须转义正则元字符：
keyword.replace(/[.*+?^${}()|[]]/g, '\$&')（注意中括号要转义） - 构造正则时加
gi标志：new RegExp(`(${escaped})`, 'gi') - 匹配后不用字符串替换，而是创建新节点：
const mark = document.createElement('mark');→mark.textContent = matchedText;→node.replaceWith(mark); - 每次替换后调用
node.parentNode.normalize()，合并相邻文本节点，防止下次高亮重复嵌套
AJAX 动态结果里高亮时机很关键
常见错误是定义了 highlight_word() 函数，但在 success 回调里忘了调用，或者传入的是未清洗的原始 HTML 字符串。
- ✅ 推荐做法：在 AJAX 成功回调中，先对
data字符串做高亮处理，再用$('#hasil').html(highlighted)插入——避免 DOM 重绘干扰，也绕过已渲染元素的事件清理风险 - ❌ 错误做法：先
.html(data)，再对$('#hasil').html()返回的字符串二次高亮——这时拿到的是带标签的 HTML，又回到innerHTML.replace()的死路 - 关键词若来自 URL 参数（如
?q=React），务必先做 HTML 实体转义：keyword.replace(/[&"'`=/]/g, c => `${c.charCodeAt(0)};`) - 多关键词场景下，按长度从长到短排序后再逐个处理，防止短词提前截断长词（如先处理
JavaScript，再处理Script）
mark 样式不能靠浏览器默认值交付
默认黄色背景在 Safari 阅读模式、Windows 高对比度、深色主题、Outlook 邮件客户端里基本不可见，甚至变透明或黑底白字。
- 必须显式声明至少三项：
background-color、color、padding（防文字贴边） - WCAG AA 对比度要求 ≥4.5:1，深色主题下别用
#ffeb3b，改用#fff9c4+#1a237e这类组合 - 移动端需加
user-select: none，否则安卓长按触发文字选择框，iOS Safari 可能忽略点击 - 禁用
span+ class 替代mark：读屏器不会播报，搜索引擎无法结构化提取，语义层彻底丢失
最易被忽略的点是：高亮逻辑必须和内容清洗耦合。哪怕后端返回了转义过的字段，前端仍要用 textContent 提取纯文本再匹配——因为 innerText 会吞掉 display: none 内容，而 innerHTML 会引入标签污染。安全和语义，从来不是可选项。
