基础高亮用标签即可，但安全准确需确保语义正确、样式显式定义、动态处理只操作文本节点并转义关键词、避开预格式化区域及注意中英文匹配差异。
直接用包裹关键词就能实现基础高亮，但真正在文章中安全、准确、可访问地强调特定词，关键不在标签本身，而在怎么把它放进正确的位置、配好必要的样式、避开常见陷阱。
基础写法：语义明确，结构干净
标签是纯语义行内元素，不自带布局行为，只负责表达“这段文字与当前上下文相关”。最简用法就是手动包裹：
- 静态内容直接写：
<p>本文介绍<mark>HTML5 mark标签</mark>的使用场景。</p> - 支持嵌套其他行内标签，比如：
<p>参考<mark><strong>第12条</strong>规定</mark>执行。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> - 不能替代
<strong></strong>或<em></em>——它不表示重要性或语气，而是上下文关联性（如搜索匹配、引用定位）。
动态高亮：只操作文本节点，不碰HTML结构
用户搜索或程序匹配关键词时，绝不能用innerHTML.replace()粗暴替换，否则会破坏标签、引入XSS、错乱DOM。必须只处理纯文本内容：
- 用
document.createTreeWalker(element, NodeFilter.SHOW_TEXT)遍历所有文本节点 - 对每个节点的
textContent做正则匹配，关键词需先转义：keyword.replace(/[.*+?^${}()|[]]/g, '\$&') - 匹配后创建
mark元素，用textContent赋值，再调用textNode.replaceWith(mark) - 避免重复标记：替换前检查父级是否已含
<mark></mark>，或统一清理旧标记再重标
样式必须显式定义，不可依赖浏览器默认
黄色背景在阅读模式、暗色主题、邮件客户端、打印等场景下常失效。至少声明三项：
-
background-color：例如#ffeb3b（亮黄）或#ffca28（暗色模式适配） -
color：搭配背景确保可读，深背景配深字，浅背景配深字 -
padding：建议0.1em 0.25em，避免文字贴边 - 可选增强：加
border-radius: 3px和box-shadow: inset 0 -2px 0 #007acc提升辨识度，尤其对色觉障碍用户
注意边界与兼容性细节
中文通常无需单词边界，但英文需防误切；多关键词要按长度从长到短排序；还要考虑全角/半角、大小写一致性：
- 英文匹配加
：正则写成new RegExp('\b(' + escaped + ')\b', 'gi') - 用户搜“JavaScript”，页面若存为“javascript”，需统一转小写再比对
- 避免在
<code>、<pre class="brush:php;toolbar:false;"></pre>等预格式化区域自动高亮，可能破坏语法展示 - 屏幕阅读器会播报
<mark></mark>，但不会特别强调——它靠的是语义关联，不是语音加重
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
