网页如何实现局部高亮文本？Mark标签快速标记重点内容

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《网页如何实现局部高亮文本？Mark标签快速标记重点内容》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

标签是HTML5新增的语义化标签，专用于标记与当前上下文相关的内容（如搜索关键词、引用重点、法律条款），需配合CSS定制样式以保障可访问性，不可用于纯装饰性高亮。

标签是语义化标记高亮内容最直接的方式，但它不是“万能高亮按钮”——用错位置、忽略样式或混用场景，反而会让高亮失效或破坏可访问性。

什么时候该用 而不是 CSS class？

它专为“文档中需要突出显示的、与当前上下文相关的内容”设计，比如搜索结果中的关键词、引用中的重点句、或用户当前关注的段落。不是所有“看起来要黄底”的地方都适合用 。

• ✅ 推荐：用户搜索后匹配出的关键词（React 生态常用工具）
• ✅ 推荐：法律条文中被援引的关键条款（第37条 规定……）
• ❌ 避免：纯装饰性高亮（如标题副标、广告标语），应改用 class="highlight" + CSS 控制
• ❌ 避免：动态 JS 插入大量 后又频繁移除，会触发 DOM 重排，卡顿明显

的默认样式和必须覆盖的 CSS 属性

浏览器对 有默认背景色（通常是黄色），但这个颜色在暗色主题、高对比度模式或印刷场景下可能完全不可读。

• 必须设置 background-color，不能依赖默认值
• 必须配对设置 color，否则深色背景上文字发灰看不清
• 建议加 padding: 2px 4px，避免文字紧贴边缘
• 可选 border-radius: 3px，但别超过 4px，否则在小字号下圆角会吞掉文字
• 不要设 font-weight 或 font-size，它只是强调，不是结构层级变更

正则替换时容易踩的坑：转义 + 全局匹配 + 大小写

用 JS 动态插入 时，如果直接拼接用户输入的关键词，keyword.replace(/abc/g, '...') 会崩在 +、.、( 这类正则元字符上。

• 必须先转义：用 keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
• 必须加 gi 标志：new RegExp(pattern, 'gi')，否则大小写不敏感就失效
• 避免跨文本节点匹配：一个

  里含 ，正则可能切开标签，导致 HTML 损坏

• 更稳妥的做法是用 TreeWalker 遍历纯文本节点，再对每个节点做 nodeValue 替换

比 更现代的选择：CSS Custom Highlight API