标签是html原生语义化高亮方案，默认黄色背景，适用于关键词或搜索结果突出；支持css覆盖样式，ie9+兼容；动态高亮需避免innerhtml滥用、正则特殊字符转义及嵌套问题；ios safari存在背景色失效问题，需强制声明background-color。
用 <mark></mark> 标签最直接实现文字高亮
HTML 原生就提供了语义化高亮方案：<mark></mark> 标签。它默认渲染为黄色背景（浏览器 UA 样式），适合标记文档中需要突出的关键词或搜索结果。
实际使用很简单：
<p>这是一段文字，其中<mark>关键词</mark>被高亮了。</p>
- 语义正确：比用
<span style="background: yellow"></span>更合适，利于可访问性和 SEO - 样式可覆盖：所有现代浏览器都支持，且能用 CSS 覆盖默认背景色，比如
mark { background: #ffeb3b; } - 注意兼容性：IE9+ 支持；若需支持 IE8 及更早版本，必须降级为
<span></span>+ class
用 span + CSS 实现自定义高亮样式
当需要统一控制高亮颜色、圆角、内边距，或复用样式时，<span class="highlight"></span> 是更灵活的选择。
示例 CSS：
.highlight {
background-color: #ff9800;
color: #fff;
padding: 2px 6px;
border-radius: 3px;
}
- 避免硬编码样式：不要在 HTML 里写
<span style="..."></span>，否则难以维护和批量修改 - 区分语义场景：如果是强调搜索匹配项，仍推荐优先用
<mark></mark>；如果是 UI 层面的装饰性高亮（如代码块中的变量名），用span更合适 - 注意行高影响：加
padding可能导致行间距异常，建议搭配vertical-align: middle;或使用line-height微调
JavaScript 动态高亮文本内容时的常见坑
用 JS 实现搜索关键词高亮（比如输入框实时匹配）时，容易出错的不是逻辑，而是 DOM 操作细节。
- 别直接操作
innerHTML：对含表单控件、事件监听器的区域做innerHTML = ...会清空状态和绑定，应使用textContent+ 创建新节点，或用Range+document.execCommand（已废弃）替代 - 正则要转义特殊字符：用户输入
.、*、(等会被当作正则元字符，需先用escapeRegExp()处理 - 避免重复嵌套：高亮已含
<mark></mark>的文本时，若没过滤，可能生成<mark><mark>xxx</mark></mark>，导致样式错乱
移动端 Safari 下 <mark></mark> 的背景色不生效？
这是真实存在的兼容问题：iOS 15.4 及更早版本 Safari 对 <mark></mark> 的默认背景色支持不稳定，有时显示为透明或浅灰。
- 临时修复方案：给
mark加一行强制声明background-color: #ff0;（或你指定的颜色） - 更稳妥做法：全局重置
mark { background-color: #ffeb3b !important; -webkit-background-clip: text; }（后者防止某些字体下背景溢出） - 测试要点：务必在真机上验证，模拟器有时无法复现该问题
innerHTML 替换，多花半分钟封装个安全的高亮函数，后面改需求时少一半 debug 时间。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
