必须只操作文本节点（Node.TEXT_NODE），用 document.createTreeWalker() 遍历并转义正则元字符，创建 mark 元素替换匹配文本，再 normalize 合并节点，确保安全、语义正确且兼容无障碍。
直接用 innerHTML.replace() 处理搜索高亮，90% 的项目会在上线后出问题——不是 XSS 漏洞，就是 DOM 错乱、中文断词错误或读屏器完全不识别。
为什么 innerHTML.replace() 一用就崩
它把整个 HTML 字符串当纯文本扫，根本不管里面是标签还是文本。搜 img，可能把 
img 也包进 ；搜 . 或 [，正则直接抛错；更糟的是，用户输 <script>alert(1)</script>，字符串拼接后直接执行脚本。
- DOM 结构被破坏：原
abc
abc
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 会引入标签污染。安全和语义，从来不是可选项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
