<mark>标签需手动包裹关键词才能高亮，不会自动识别搜索词；正则替换前须转义特殊字符；动态插入需防XSS风险；样式覆盖要注意选择器权重和浏览器兼容性。
mark 标签本身不自动高亮搜索词
<mark> 只是一个语义化容器，浏览器默认用黄色背景渲染，但不会主动识别或包裹搜索关键词。你得自己把匹配的文本替换成 <mark>关键词</mark>，否则它什么也不会高亮。
常见错误是直接写 <p>搜索结果：苹果</p>，然后指望加个 mark 样式就能让“苹果”变黄——不行，没被 <mark> 包裹的文本，样式再改也无效。
JavaScript 动态替换需转义正则特殊字符
用 String.prototype.replace() 或正则匹配时，如果搜索词含 .、*、?、( 等，不转义会触发意外匹配甚至报错 Invalid regular expression。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先对搜索词做正则转义：
searchTerm.replace(/[.*+?^${}()|[]\]/g, '\$&') - 使用
g和i标志实现全局、忽略大小写匹配 - 替换时用函数捕获原内容，避免破坏 HTML 结构（比如别在
<script>或属性值里误替换）
示例片段：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
const escaped = searchTerm.replace(/[.*+?^${}()|[]\]/g, '\$&');
const regex = new RegExp(`(${escaped})`, 'gi');
el.innerHTML = el.textContent.replace(regex, '<mark>$1</mark>');
直接 innerHTML 替换有 XSS 风险
上面示例用了 innerHTML，前提是 el.textContent 是可信来源。如果搜索词来自用户输入、URL 参数或后端未过滤字段，直接拼接 <mark> 标签可能引入 XSS —— 比如搜索 <img src=x onerror=alert(1)>，再套一层标签就执行了。
安全做法：
- 优先用
textContent提取纯文本，再用document.createTextNode()+document.createElement('mark')手动构建节点 - 或用 DOMPurify 等库净化后再插入
- 若确定上下文绝对安全（如仅限内部管理后台且输入已校验），可简化处理
样式覆盖要注意 mark 的默认 background-color 优先级
浏览器对 mark 的默认样式是 background-color: #ff0;，但如果你写了 mark { background: yellow; } 却没生效，大概率是 CSS 选择器权重不够，或被更具体的规则（比如 p mark、.result mark）覆盖了。
调试建议：
- 用浏览器开发者工具检查 computed styles，看
background-color是否被 override - 必要时加
!important快速验证（上线前应改用更高权重选择器） - 注意部分旧版 Safari 对
mark的padding渲染异常，可显式设mark { padding: 0 2px; }统一表现
真正麻烦的不是怎么加 <mark>，而是确保它只出现在该出现的地方、不带风险、不被样式吞掉——这些细节漏一个，高亮就不可靠。
