HTML搜索高亮不自动识别关键词，需业务层预处理searchVal：统一大小写、加词边界、转义正则字符，并安全操作DOM节点以避免XSS和结构污染。
直接说结论：HTML搜索高亮本身不“兼容关键词”，它只是把用户输入的字符串原样匹配并包裹；所谓“关键词”是业务层概念，需要你手动做大小写处理、词边界控制、多词逻辑等——否则搜 "ui" 会命中 "building" 里的子串，搜 "Node" 会漏掉 "node.js"。
searchVal 是字符串，不是关键词
浏览器没有“关键词”类型，String.prototype.includes() 或 new RegExp(searchVal, "ig") 都只认字符序列。你传什么它就搜什么，不会自动识别单词边界或语义。
- 用户输
"a"，innerHTML.replace(/a/gi, "...")会破坏所有含a的标签，比如把<span></span>变成<spn></spn> - 用户输
"<script>alert(1)</script>"，直接插进innerHTML就执行 XSS - 用户输
"JS"，默认正则会匹配到"javascript"中的"JS"，但不会匹配"js"（除非加i标志）
要模拟关键词行为，必须预处理 searchVal
真正起作用的是你对输入做的清洗和包装，不是高亮函数本身。
- 统一转小写比较：
text.toLowerCase().includes(searchVal.toLowerCase()) - 加词边界（避免子串匹配）：
new RegExp(`\b${escapeRegExp(searchVal)}\b`, "gi")，注意\b对中文无效，中文需用(? + <code>(?=\s|$)模拟 - 多个词同时命中（AND 逻辑）：
input.split(/s+/).filter(Boolean).every(word => text.includes(word)) - 转义正则特殊字符：
function escapeRegExp(s) { return s.replace(/[.*+?^${}()|[]\]/g, "\$&"); }
高亮必须避开 HTML 结构污染
用 innerHTML 替换整个页面内容是最省事也最危险的做法。真实项目里几乎不能这么干。
立即学习“前端免费学习笔记（深入）”；
- 只操作目标容器：
document.querySelector(".searchable-content")，别碰body或html - 优先走 DOM 节点遍历 +
textContent提取，再用document.createElement("mark")插入，不拼 HTML 字符串 - 如果必须处理 HTML 字符串（比如后端返回富文本），先用
DOMParser解析，再递归遍历文本节点，跳过元素节点 - 永远不要让
searchVal直接进innerHTML，哪怕你用了escapeHtml()，也要防住onerror="..."这类属性注入
最容易被忽略的一点：高亮不是一次性的视觉装饰。当用户修改搜索词、切换分页、或动态加载新内容时，旧的 <mark> 标签如果没被清除干净，就会和新高亮叠加错乱。清空逻辑比高亮逻辑更难写对——尤其是跨框架（React/Vue）或富文本编辑器（如 Quill、WangEditor）场景下，它们会主动 strip class 和 style。
