HTML动态高亮无标准答案，需依场景选择：用须显式设样式和圆角；正则替换仅适用于纯文本；含HTML时必遍历文本节点；Prism.js专用于代码语法高亮；高亮本质是状态同步，需防嵌套与搜索失效。
HTML 动态高亮没有“标准答案”，只有适配场景的合理选择。直接用 <mark></mark> 标签、正则替换字符串、操作文本节点、引入第三方库（如 Prism.js）、或用 CSS 类 + JS 控制——每种都对应明确的边界和代价。
用 <mark></mark> 标签但必须加显式样式
很多人以为写个 <mark>xxx</mark> 就完事，结果在 Outlook 邮件里看不见、深色模式下文字消失、高对比度系统里变黑底黑字。根本原因是浏览器 UA 样式被重置或忽略。
- 必须同时声明
background-color和color，例如：mark { background-color: #fff9c4; color: #1f2937; } - 加
padding和border-radius是刚需，原生<mark></mark>紧贴文字，边缘生硬易误读 - 不能直接对含 HTML 标签的字符串调用
replace()，否则会撕开<span></span>或<code>导致 DOM 解析失败
正则替换字符串 → 仅适用于纯文本或已剥离标签的内容
这是最轻量、无依赖的方案，适合搜索结果页、日志片段等结构简单、无嵌套 HTML 的场景。但一旦原文含 <div class="item">hello</div>，用 innerHTML.replace() 就会把 class="item" 里的 item 也高亮，破坏结构。
- 关键词必须双重转义：先 HTML 转义（防 XSS），再正则转义（防
.*?报错） - 匹配要加
\b单词边界，否则"test"会误匹配"testing" - 多关键词时按长度降序排序，避免
"a"先于"abc"匹配导致嵌套<mark>a<mark>bc</mark></mark>
遍历文本节点（nodeType === 3）是安全底线
只要原始内容含任意 HTML（比如富文本编辑器输出、用户评论带链接），就必须走这条路径。它绕过所有标签，只处理纯文本内容，杜绝 DOM 撕裂和 XSS 风险。
立即学习“前端免费学习笔记（深入）”；
- 用
document.createTreeWalker(element, NodeFilter.SHOW_TEXT)获取全部文本节点 - 对每个节点的
textContent做正则匹配，匹配成功后创建mark元素，用replaceChild()替换原节点 - 不修改
innerHTML，不碰任何子元素，天然兼容<pre class="brush:php;toolbar:false;"><code></code>、<code><blockquote></blockquote></code> 等敏感容器</pre>
用 Prism.js / Highlight.js 处理代码块高亮
专用于 <pre class="brush:php;toolbar:false;"><code></code> 内容，不是通用文本高亮方案。它做的是语法解析，不是关键词匹配——能区分 HTML 标签名、属性、字符串值、注释，并分别着色。</pre>
- 引入
prism-core.min.js+ 对应语言插件（如prism-markup.min.js）即可自动生效 - 必须给
<code>加class="html"，否则不会触发解析 - 不适用于普通段落中的关键词，比如想高亮“React”“Vue”这些词，它完全不管
真正容易被忽略的点是：高亮不是视觉装饰，而是状态同步。比如搜索页高亮关键词后，用户按 Ctrl+F 查找，浏览器原生搜索框不会识别 <mark></mark> 内容；又比如服务端渲染后前端 JS 二次执行，可能把已高亮的文本再包一层 <mark></mark>，造成嵌套失效。这些边界问题，比“怎么写正则”更决定上线后的稳定性。
