不能直接用 innerHTML.replace() 替换关键词，因其会破坏 HTML 结构或执行脚本；安全做法是仅在文本节点中高亮，推荐用 TreeWalker 遍历 TEXT_NODE 并包裹 mark 标签。
不能直接替代，关键词本身是高亮的触发依据，不是可被替换的“内容”；强行用 innerHTML.replace() 替换关键词，极易破坏 HTML 结构或执行脚本。
为什么 innerHTML.replace() 会出事
浏览器对 innerHTML 赋值时不做转义，直接解析字符串为 DOM。一旦关键词含 、<code>>、"、' 或 <script></script> 类片段，就会：
- 闭合原有标签，导致后续 HTML 错位（比如把
<img src="a.jpg" alt="HTML搜索高亮能替代关键词吗_关键词对HTML搜索高亮限制【解决方案】" >中的a高亮，变成<img src="<mark>a</mark>.jpg" alt="HTML搜索高亮能替代关键词吗_关键词对HTML搜索高亮限制【解决方案】" >，属性值被截断） - 注入可执行代码（用户搜
<script>alert(1)</script>，页面就弹窗） - 匹配到标签名或属性名（搜
div，把<div class="content"> 变成 <code>div class="content">，DOM 解析失败）真正安全的高亮必须跳过 HTML 标签
核心思路是：只在文本节点中搜索，不碰任何
<...></...>内容。可行路径有两条：- 用
document.createTreeWalker()遍历所有Node.TEXT_NODE，逐个处理其nodeValue，再用document.createElement('mark')包裹匹配段落 - 先用正则提取所有标签（
/]*>/g），暂存后替换成占位符（如[[TAG_0]]），再对纯文本部分做关键词替换，最后还原标签 - 注意：第二种方法依赖正则能否完整捕获嵌套/非法标签，
<img src="a<b.jpg" alt="HTML搜索高亮能替代关键词吗_关键词对HTML搜索高亮限制【解决方案】" >这类含的属性值会导致正则失效——所以生产环境更推荐第一种 DOM 遍历法
mark标签不是万能的，得看场景<mark></mark>语义上表示“相关高亮”，浏览器默认带黄色背景，但它不解决根本问题：
Wechat Article Html下载将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 如果原文本已含
<mark></mark>，且你又用字符串替换塞进新的<mark></mark>，就会嵌套错乱 - CSS 样式可能被父级
font-size、line-height或white-space干扰，导致高亮块错位或换行异常 - 移动端 Safari 对
<mark></mark>的默认样式支持较弱，建议显式加mark { background: #ff0; color: #000; } - 若需支持 IE，
<mark></mark>需要 polyfill 或降级为<span class="highlight"></span>
关键词本身要预处理
用户输入的关键词不是拿来就用的字符串，必须清洗：
- 用
RegExp.escape()（或手写函数）转义正则特殊字符，否则搜a.b会被当成 “a任意字符b” 匹配 - 用
textContent或innerText提取原始文本时，要注意空格、换行、全角/半角差异（比如用户搜 “测试”，但页面里是 “测 试”（中文空格）） - 大小写敏感与否，取决于
String.prototype.match()的i标志，但注意：DOM 文本节点里的大小写是原始的，别假设它和用户输入一致
最易被忽略的一点：高亮操作本身会改变 DOM 结构，后续如果再次对同一区域调用高亮函数，
<mark></mark>会被当作普通文本再次包裹——必须在执行前清除旧<mark></mark>，或记录已处理范围，避免重复渲染。 - 用
