强调语义重要性用<strong>，仅需加粗外观用<b>；<mark>必须配CSS样式、操作文本节点、关键词按长度降序处理，否则破坏可访问性与DOM结构。
什么时候该用 <strong> 而不是 <b>
强调“重要性”就用 <strong>，比如错误提示、操作后果、法律条款；只想要加粗外观、无语义权重时才用 <b>。误用 <b> 会导致屏幕阅读器不加重读，盲人用户可能错过关键信息。
常见错误现象：<b>删除账号</b> 看起来醒目，但读屏器不会特殊处理；换成 <strong>删除账号将不可恢复</strong> 才真正传递风险等级。
- ✅ 正确：
<p>邮箱地址<strong>不可修改</strong></p>（强调后果） - ❌ 错误：
<p>欢迎使用<b>MyApp</b>!</p>（应改用 CSS 类或<span>） - ⚠️ 风险：
<strong>嵌套超过两层会让读屏器困惑，一般只包关键词，不包整段<p>
<mark> 高亮必须配 CSS 才能真生效
浏览器默认黄色背景在真实环境中大概率失效：Windows 高对比度模式下变纯黑、Outlook 邮件客户端忽略 UA 样式、CSS 重置规则（如 * { background: transparent }）会清空它。不写 CSS 就上线，等于放弃可访问性。
至少要声明三项样式：background-color、color、padding；border-radius 是刚需，原生 <mark> 紧贴文字边缘太生硬，易误读。
立即学习“前端免费学习笔记（深入）”；
- 深色模式必须显式适配：
@media (prefers-color-scheme: dark) { mark { background-color: #ffca28; color: #121212; } } - 别写
background: none——它不清除background-image，应写background-color: transparent - 禁止包裹块级元素：
<mark><p>xxx</p></mark>是非法嵌套，只允许包纯文本或行内元素（如<code>）
动态搜索高亮不能碰 innerHTML.replace()
用正则字符串替换 innerHTML 是高危操作：用户搜 [a-z] 会因未转义正则元字符而报错；搜 <script>alert(1)</script> 可能触发 XSS；原文含 <code>console.log()</code> 会被撕成 <code>console.<mark>log</mark>()</code>，DOM 解析失败。
正确做法是只操作文本节点：
- 用
document.createTreeWalker(element, NodeFilter.SHOW_TEXT)遍历所有文本节点 - 跳过空节点：
node.textContent.trim() === '' - 关键词必须双重转义：HTML 实体（
&、"等） + 正则元字符（.、[、$等） - 替换必须用函数回调：
str.replace(regex, (match) => { const mark = document.createElement('mark'); mark.textContent = match; return mark; })
中文多关键词高亮要按长度降序处理
同时匹配 “JavaScript” 和 “Script”，若先处理短词，会产生 <mark>Java<mark>Script</mark></mark> 这类非法嵌套。浏览器虽自动修正为两个独立 <mark>，但语义已断裂、CSS 样式错位、读屏器播报混乱。
解决方法很简单：把关键词数组按长度从长到短排序后再遍历匹配。
- 排序逻辑：
keywords.sort((a, b) => b.length - a.length) - 中文关键词记得加
u标志：new RegExp(pattern, 'giu') - 避免在服务端渲染后前端 JS 二次包裹，导致嵌套
<mark><mark>xxx</mark></mark>
实际项目里最容易被跳过的细节是：<mark> 的语义价值完全依赖于显式样式和文本节点操作逻辑——它不是“加个黄底”的快捷方式，而是需要你亲手把它嵌进无障碍链路和 DOM 更新流程里的一个环节。
