最简单语义正确的文本高亮方式是用原生 mark 标签，它默认黄色背景、无需CSS、屏幕阅读器友好；但需注意其行内特性、避免XSS风险、正则元字符转义、优先函数式replace、防抖处理滚动定位。
用 mark 标签最简单也最语义正确
直接用原生 mark 元素包裹匹配文本，浏览器默认黄色背景，无需 CSS 也能立刻生效，且对屏幕阅读器友好。但要注意它只是个行内标签，不能嵌套块级元素，也不该用于替代 span 做样式控制以外的用途。
常见错误是手动拼接 HTML 字符串时没做转义，导致 XSS 风险。比如用户搜 <script>alert(1)</script>，直接 innerHTML 插入就会执行脚本。
- 先用
textContent提取原始文本，再在纯字符串中做搜索和替换 - 替换时用
document.createElement('mark')创建节点，或用DOMPurify.sanitize()过滤（若必须用 innerHTML） - 避免对整个容器
innerHTML = ...赋值，会丢失事件监听器和表单状态
JavaScript 实现高亮函数要处理正则特殊字符
用户输入的搜索词可能含 .、*、? 等正则元字符，直接传给 new RegExp(searchText) 会报错或匹配异常。必须先转义。
典型场景：搜索 a.b?c，期望匹配字面量，而不是“a + 任意字符 + b + 0 或 1 个 c”。
立即学习“前端免费学习笔记（深入）”；
- 用这个小函数转义：
searchText.replace(/[.*+?^${}()|[]\]/g, '\$&') - 推荐用
flags: 'gi'（全局 + 不区分大小写），但注意中文一般不需要i标志 - 别用
String.prototype.replace()的字符串替换形式（如'$&'），容易被误解析；优先用函数回调：str.replace(regex, (match) => `<mark>${match}</mark>`)
高亮后滚动到第一个匹配位置很常用但容易卡顿
一次高亮可能产生几十个 mark 元素，如果对每个都调用 getBoundingClientRect() 再 scrollIntoView()，页面会明显卡顿，尤其在低配设备上。
更稳妥的做法是只定位第一个可见匹配项，且加防抖。
- 用
document.querySelectorAll('mark')拿到所有高亮节点，取[0] - 检查该节点是否在视口内：
rect.top >= 0 && rect.bottom - 不在就调用
element.scrollIntoView({ block: 'center', behavior: 'smooth' }) - 如果高亮是高频触发（如输入框实时搜索），记得节流
scrollIntoView调用
IE 和旧版 Safari 不支持 mark 样式继承问题
IE 完全不识别 mark，旧版 Safari（mark 的默认背景色渲染不一致，且子元素的 color 可能被父级 mark 覆盖——比如 mark > strong 文字变黑了，但你想保持粗体原色。
这不是 bug，是 CSS 层叠规则使然。解决方案不是放弃 mark，而是加一层防御性样式：
- 统一重置：
mark { background-color: #ff0; color: inherit; } - 确保关键子元素显式声明颜色：
mark strong { color: currentColor; } - IE 下可降级为
span class="highlight"，用 JS 判断!('mark' in document.createElement('div'))
真正麻烦的是富文本编辑器里高亮，光标定位、撤销栈、内容变更检测都会受影响——那已经不是加个 mark 能解决的事了。
