mark是唯一语义正确、可访问且被读屏器识别的高亮方式，不可用span+class替代；必须通过TreeWalker遍历文本节点、双重转义关键词、动态创建mark元素并显式声明样式，避免innerHTML.replace()引发XSS、DOM破坏及解析中断。
mark 是唯一语义正确、可访问且被读屏器识别的高亮方式，不能用 span + class 替代——它不是视觉装饰，而是告诉浏览器“这段文本与当前搜索强相关”。直接写 <mark>关键词</mark> 能渲染出高亮效果，但真实项目中必须处理安全、样式和 DOM 结构三类问题。
为什么不能用 innerHTML.replace() 做搜索高亮
这是最常见也最危险的写法：用字符串替换整个容器的 innerHTML。它同时打开三扇门——XSS、DOM 结构破坏、HTML 解析中断。
- 用户搜
[a-z]，正则没转义 →new RegExp(keyword)报错，脚本中断 - 用户搜
<script>alert(1)</script>，拼进字符串后可能执行脚本 - 原文是
<code>console.log()，替换后变成<code>console.<mark>log</mark>()，<mark></mark>被撕开，DOM 解析失败 - 图片
<img src="logo.png" alt="HTML中如何用标记元素高亮显示文本" >中搜logo→ 变成<img src="<mark>logo</mark>.png" alt="HTML中如何用标记元素高亮显示文本" >，图片挂掉
安全高亮必须只操作文本节点
核心是绕过字符串拼接，只在纯文本内容上做切分与替换。关键路径是：TreeWalker 遍历 → 匹配 textContent → 创建 mark 元素 → 插入 DOM。
- 用
document.createTreeWalker(element, NodeFilter.SHOW_TEXT)获取所有文本节点 - 跳过空文本或仅含空白符的节点（
node.textContent.trim() === ''） - 对每个节点内容调用
replace()，但匹配前必须双重转义：
— HTML 转义：keyword.replace(/[&"'`=/]/g, c => `${c.charCodeAt(0)};`)
— 正则转义：keyword.replace(/[.*+?^${}()|[]]/g, '\$&') - 匹配后不要返回字符串，而是创建元素：
const mark = document.createElement('mark');→mark.textContent = match;→ 用node.parentNode.replaceChild(mark, node)
mark 的样式为什么必须手写
浏览器默认黄色背景在绝大多数生产环境里都不可靠——它不是 CSS 继承链的一部分，极易被覆盖或忽略。
立即学习“前端免费学习笔记（深入）”；
- Safari 阅读模式下直接剥离 UA 样式，
mark变成无背景纯文本 - Windows 高对比度模式强制重置未声明的
background-color，可能变透明或黑底白字 - 深色主题下默认
#ff0和深灰背景对比度低于 WCAG AA（要求 ≥4.5:1） - 邮件客户端（如 Outlook）根本不认 UA 默认值
- 至少声明这三项：
background-color、color、padding；border-radius是加分项 - 深色模式必须手动适配：
@media (prefers-color-scheme: dark) { mark { background-color: #ffca28; color: #121212; } }
真正容易被忽略的点是：你写的 mark 样式可能在 Safari 12 及更早版本里完全不生效（background-color 被无视），而用户拖选文本再高亮时，若没用 Range API 而是走字符串替换，哪怕加了转义，也会在嵌套标签（比如 <strong><mark>xxx</mark></strong>）里把结构撑开或截断。这些都不是边缘 case，是上线后立刻会暴露的问题。
