网页如何实现局部高亮文本？Mark标签快速标记重点内容
说到给网页文本加高亮，标签无疑是那个最直接的答案。但这里有个常见的误解：它可不是一个“万能高亮按钮”。如果用错了地方、忽略了样式，或者把它用在各种杂七杂八的场景里，不仅高亮效果会打折扣，甚至可能破坏页面的可访问性。
什么时候该用
这个标签的定位很明确，就是为“文档中需要突出显示的、与当前上下文相关的内容”而生。想想看，比如用户在站内搜索后，结果页里匹配出的关键词；或者一篇长文中，作者特意想强调的某个核心论点；再比如法律条文里被援引的那项关键条款。这些才是它的用武之地。反过来说，可不是所有“看起来需要个黄底”的地方都适合往里塞一个。
- ✅ 推荐场景：用户搜索后匹配出的关键词（例如：
React 生态常用工具）。 - ✅ 推荐场景：法律条文中被援引的关键条款（例如：
第37条 规定……）。 - ❌ 避免场景：纯装饰性高亮（比如标题的副标、广告标语），这类情况应该用
class="highlight"配合CSS来控制。 - ❌ 避免场景：用Ja vaScript动态插入大量
标签，然后又频繁移除，这会触发DOM重排，导致页面明显卡顿。
浏览器确实会给一个默认背景色（通常是亮黄色），但千万别指望这个默认样式能通吃所有情况。在深色主题、高对比度模式，甚至打印预览时，这个黄色很可能变得难以辨认，或者直接消失。
- 必须设置
background-color：永远不要依赖浏览器的默认值，主动定义背景色。 - 必须配对设置
color：只改背景不改文字颜色，在深色背景下文字可能发灰，根本看不清。 - 建议添加内边距：加上
padding: 2px 4px，让文字和背景边缘有点呼吸空间，视觉效果更舒适。 - 圆角要谨慎：可以加
border-radius: 3px，但别超过4px，否则在小字号下，圆角可能会“吃掉”文字的边缘。 - 别动字体属性：记住，它的作用是“强调”，而不是改变结构层级。所以不要设置
font-weight或font-size。
正则替换时容易踩的坑：转义 + 全局匹配 + 大小写
用Ja vaScript动态插入高亮时，很多开发者会想到正则替换。但直接拿用户输入的关键词去拼接正则表达式，比如keyword.replace(/abc/g, '...')，简直就是埋雷。一旦关键词里包含+、.、(这类正则元字符，代码立马就崩溃了。
- 转义是第一步：必须先用
keyword.replace(/[.*+?^${}()|[]\]/g, '\$&')这样的方式对关键词进行转义。 - 匹配要全面：构造正则时记得加上
gi标志，即new RegExp(pattern, 'gi')，确保大小写不敏感，否则高亮就会漏掉一半。 - 警惕DOM结构：如果一个
标签里还嵌套了等其他标签，全局正则可能会粗暴地切开这些标签，导致HTML结构损坏。 - 更稳妥的方案：使用
TreeWalkerAPI遍历所有的纯文本节点，然后针对每个节点的nodeValue进行替换，这样能最大程度保证DOM的完整性。
比 CSS Custom Highlight API
如果你需要高亮，但又极度不想污染DOM结构（比如在线编辑器里的多人协作标注、PDF渲染页内的搜索结果高亮），那么CSS Custom Highlight API是目前唯一的“无侵入”解决方案。当然，得先看看兼容性：
- 兼容性现状：Chrome和Edge 105+版本提供了完整支持；Firefox需要手动开启
layout.css.highlight-api.enabled标志；而Safari，截至2026年4月，仍然完全不支持。 - 工作原理：它不生成任何新的DOM元素，而是通过
Range对象创建高亮范围，用document.highlightRegistry.set()进行注册，再通过CSS的::highlight()伪元素来应用样式。 - 调试难点：由于不产生实际元素，你无法直接用Ja vaScript获取高亮区域的
offsetTop等布局信息，调试起来会稍微麻烦一些。
说到底，在网页上实现文本高亮，真正的难点从来不是“怎么加上那层黄底”，而是准确判断“这里该不该加”，以及“加上之后，是否所有用户都能顺畅无碍地阅读”。标签是一个语义化的锚点，它的价值在于标注意义，而不仅仅是一个视觉开关。用对了，事半功倍；用错了，反而添乱。
