HTML搜索高亮需避免innerHTML直接插入未转义关键词，否则引发结构错乱或XSS；应遍历文本节点、用splitText和createElement安全包裹匹配内容。
HTML 搜索高亮本身不会和关键词冲突，但如果你把关键词直接插入 HTML 标签里（比如 <span>、<em>），而没做转义或 DOM 插入控制，就会导致标签被解析、结构错乱甚至 XSS 风险。
为什么高亮后页面结构崩了？
常见现象是：高亮完文字突然多出空白、换行错位、按钮失效，或者控制台报 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node'。根本原因是——你用 innerHTML 把含 HTML 标签的字符串直接写进节点，而原始文本里可能已有 <、>、& 等字符，被浏览器当真实标签解析了。
- 比如搜索词是
"<script>alert(1)</script>"，不转义就直接高亮，等于执行脚本 - 再比如原文是
"5 < 10"，高亮后变成"5 <<span class="highlight"> 10</span>"，<被当成标签起始符，后续内容全被吞掉 - 用
textContent替代innerHTML写入时，又会丢失高亮样式（纯文本没法套<mark>）
安全高亮的正确姿势（原生 JS）
核心原则：先拆解文本节点，再对纯文本内容做匹配，最后用 document.createElement 插入包装元素，绕过字符串拼接风险。
- 用
NodeIterator或递归遍历目标区域内的所有文本节点（避开已有 HTML 标签） - 对每个文本节点的
nodeValue做关键词匹配（注意大小写、全字匹配等逻辑） - 匹配到后，用
splitText()切分文本节点，再用document.createElement('mark')包裹匹配段落 - 避免用
String.prototype.replace()+innerHTML，那是新手最常踩的坑
简例（仅示意关键步骤）：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
const highlight = (node, keyword) => {
if (node.nodeType === Node.TEXT_NODE) {
const text = node.nodeValue;
const idx = text.toLowerCase().indexOf(keyword.toLowerCase());
if (idx !== -1) {
const span = document.createElement('mark');
span.textContent = text.slice(idx, idx + keyword.length);
const before = node.splitText(idx);
before.splitText(keyword.length);
node.parentNode.insertBefore(span, before);
}
}
};
Vue/React 里怎么避免关键词和 v-html / dangerouslySetInnerHTML 冲突？
框架层其实更危险：你可能在模板里写 v-html="highlight(text, keyword)"，而 highlight 函数如果返回含未转义 HTML 的字符串，就等于主动打开 XSS 大门。
- Vue 中优先用
v-text+ 动态 class 控制样式，或用render函数生成VNode，完全避开字符串插值 - React 中不要用
dangerouslySetInnerHTML做高亮；改用children数组 +React.createElement拆分渲染 - 如果必须用字符串方案（比如 SSR 场景），关键词替换前务必对原始文本做
DOMPurify.sanitize()，且只允许mark、span等白名单标签 - 注意：正则全局匹配时，
/g标志漏掉会导致只高亮第一个，而/gi又可能误伤属性值里的关键词（如data-keyword="xxx"），所以得限定在文本节点内操作
真正难的不是写出高亮效果，而是确保它在任意输入、任意 HTML 上下文、任意框架生命周期里都不破坏结构、不引入漏洞。别让一个 < 符号，变成线上事故的起点。
