<mark> 是唯一传达文本强相关语义的元素，安全高亮需用 TreeWalker 操作文本节点、双重转义关键词、显式声明样式并严格遵循语义边界，否则易引发 XSS 或可访问性失效。
mark 标签不是“加个黄底”的快捷方式，它是唯一能向浏览器、搜索引擎和读屏器传达“这段文本与当前上下文强相关”的语义化元素。直接写 <mark>关键词</mark> 能渲染出高亮效果，但真实项目中必须配合转义、样式声明和 DOM 操作规范，否则大概率失效或引发 XSS。
为什么直接 innerHTML.replace() 会炸掉页面
这是最常见也最危险的写法：用字符串替换整个容器的 innerHTML。它同时打开三扇门——XSS、DOM 结构破坏、HTML 解析中断。
- 用户搜
[a-z]，正则没转义 →new RegExp(keyword)报错，脚本中断 - 用户搜
<script>alert(1)</script>，拼进字符串后可能执行脚本 - 原文是
<code>console.log()</code>，替换后变成<code>console.<mark>log</mark>()</code>，<mark>被撕开，DOM 解析失败 - 图片
<img src="logo.png">中搜logo→ 变成<img src="<mark>logo</mark>.png">，图片挂掉
安全高亮必须只操作文本节点
核心是绕过字符串拼接，只在纯文本内容上做切分与替换。关键路径是：TreeWalker 遍历 → 匹配 textContent → 创建 mark 元素 → 插入 DOM。
- 用
document.createTreeWalker(element, NodeFilter.SHOW_TEXT)获取所有文本节点 - 跳过空文本或仅含空白符的节点（
node.textContent.trim() === ''） - 对每个节点内容调用
replace()，但匹配前必须双重转义：
— HTML 转义：keyword.replace(/[&"'`=/]/g, c => `${c.charCodeAt(0)};`)
— 正则转义：keyword.replace(/[.*+?^${}()|[]]/g, '\$&') - 匹配后不要返回字符串，而是创建元素：
const mark = document.createElement('mark'); mark.textContent = match;，再用node.parentNode.replaceChild(mark, node)
样式必须显式声明，别信浏览器默认值
浏览器默认黄色背景在暗色模式、高对比度设置、邮件客户端、阅读模式下基本不可见。不写 CSS 就上线，等于放弃可访问性。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 至少声明这三项：
background-color、color、padding；border-radius是加分项 - 深色模式必须手动适配：
@media (prefers-color-scheme: dark) { mark { background-color: #ffca28; color: #121212; } } - 避免写
background: none—— 它不会清空background-image，应写background-color: transparent或initial - 别只靠颜色区分：色觉障碍用户可能无法识别黄底，建议搭配轻微
box-shadow: inset 0 -2px 0 #007acc或加粗（但注意行高影响）
什么时候该用 mark，而不是 span + class
mark 的语义不可替代，但它有明确边界。误用不仅浪费语义，还会干扰读屏器播报逻辑。
- 必须用
mark的场景：
— 搜索结果页中动态包裹 URL 参数q=React匹配到的所有 “React”
— 教程文档中引用代码时标出修改部分：const value = <mark>42</mark>;
— 法律条款引用中临时突出与当前段落强相关的术语 - 不该用
mark的反例：
— 按钮文案写<mark>立即购买</mark>（该用strong）
— 整段警告文字套mark（该用section+aria-live）
— Banner 广告里标“限时优惠”（该用 CSS 类）
真正难的不是写对 <mark>，而是在动态插入时守住文本节点边界、双重转义不漏项、样式覆盖不依赖 UA、语义使用不越界——这四点漏掉任一，高亮就从辅助功能退化成视觉幻觉。
