标签仅是语义化容器，不自带搜索逻辑；实现搜索高亮需 JavaScript 动态查找关键词并包裹 ，且须处理正则转义、样式兼容、深色模式及语义完整性。

mark 标签本身不带搜索逻辑，只是语义化容器；要实现“搜索高亮”，必须用 JavaScript 找到关键词、再包裹 mark —— 直接写死 <mark>关键词</mark> 没法响应用户输入。

为什么直接写 mark 不等于搜索高亮

浏览器对 mark 的处理纯属样式渲染，它不会自动匹配、定位或替换文本。所谓“搜索高亮”，本质是三步：获取搜索词 → 在目标文本中查找 → 把匹配部分替换成 <mark class="search">xxx</mark>。

• 常见错误现象：<p>搜索结果包含<mark>react</mark></p> 写死后永远只高亮 “react”，用户搜 “vue” 就没反应
• 真实使用场景：搜索框输入变化时，需实时遍历 DOM 文本节点，避免把 HTML 标签内容（如 <div class="react-header">）也误匹配 <li>正则注意点：要加 <code>g 和 i 标志（全局+忽略大小写），但得先对搜索词做 RegExp.escape 或手动转义特殊字符（如 $、.），否则报错 Invalid regular expression

mark 自定义背景色必须显式设 background-color 和 color

不同浏览器给 mark 的默认背景色不一致：Chrome 是 #ff0，Firefox 是黄绿色，Safari 接近浅米白。只写 color: red 不会改变背景，文字反而可能糊在默认黄色上。


Wechat Article Html
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
下载

立即学习“前端免费学习笔记（深入）”；

• 必须同时声明：mark.search { background-color: #4285f4; color: #fff; }，不能只改其中一个
• 别用 background 简写，它可能意外带上浏览器默认的 padding 或 line-height，导致行距错乱
• 如果项目用了 normalize.css 或 reset.css，检查是否重置了 mark 的 padding —— 有些重置会清掉内边距，让高亮贴着文字太紧

用类名区分语义，别全局重写 mark

全站统一写 mark { background-color: #ff9e44; } 看似省事，但一旦需要多种高亮（比如搜索结果用蓝色、警告信息用红色、成功提示用绿色），就只能靠 !important 或内联 style 补救，维护成本飙升。

• 推荐做法：给不同用途加 class，例如 <mark class="search"></mark>、<mark class="warning"></mark>、<mark class="success"></mark>
• CSS 对应写：mark.search { background-color: #4285f4; }、mark.warning { background-color: #e74c3c; }
• 禁止嵌套：<mark class="search">前端<mark class="warning">危险</mark></mark> 是非法 HTML，浏览器会自动拆成两个独立 mark，语义断裂，无障碍阅读器也会读错

深色模式下 mark 背景色可能不可读

很多设计稿只在浅色模式下调色，上线后用户开深色模式，mark.search 的浅蓝背景（#4285f4）配上深色网页文字，对比度直接跌破 WCAG AA 标准。

• 必须加媒体查询：@media (prefers-color-scheme: dark) { mark.search { background-color: #2a598a; color: #fff; } }
• 别依赖系统自动适配 —— mark 没有原生深色模式感知能力
• 移动端尤其要注意：iOS Safari 的深色模式触发更激进，某些低对比色块在 iPhone 上几乎看不见

最易被忽略的是语义完整性：用 mark 前先问一句——这段高亮是不是真的和当前上下文相关？比如搜索页标出用户查的词，或文档里强调某个术语定义。把它当 span 使，纯粹为了视觉效果，就丢掉了 HTML5 给它的本意。