高亮搜索关键词需语义正确、安全替换、样式可控：仅匹配上下文中的完整词组，动态插入前转义字符并遍历文本节点，用锚定英文单词边界，中文整段比对，样式须显式声明背景色、文字色及内边距。
用标签高亮搜索关键词，核心是“语义正确 + 安全替换 + 样式可控”。不是简单套个黄色背景，而是让高亮既对用户可见，又对机器可读、对辅助技术友好。
明确适用场景：只高亮“匹配上下文”的词
比如用户搜“表单验证”，页面中所有出现的“表单验证”都该被包裹；但不要把标题里的“表单验证指南”整个标上，更不能给警告语“请务必验证！”加——那是的事。语义错位会让屏幕阅读器忽略重点，也影响SEO权重分配。
动态插入时必须转义，否则可能执行脚本
用户输入不可信。如果直接用innerHTML = text.replace(keyword, '<mark>$&</mark>')，当keyword是<script>alert(1)</script>时，页面就执行了恶意代码。
- 安全做法：先创建文本节点，再插入包裹的新节点
- 或使用正则前先转义特殊字符：
keyword.replace(/[.*+?^${}()|[]\]/g, '\$&') - 大小写不敏感匹配要加
gi标志：new RegExp(keyword, 'gi')
正则替换要防跨标签断裂和误匹配
原始文本含HTML标签时（如<p>用<strong>JavaScript</strong>写代码</p>），直接正则替换可能切开<strong>，导致DOM结构损坏。
立即学习“前端免费学习笔记（深入）”；
- 推荐遍历纯文本节点：用
TreeWalker只处理Node.TEXT_NODE - 英文需锚定单词边界：
keyword，避免“cat”匹配到“education” - 中文无天然词界，若需精准匹配短语，建议整段比对后替换，不依赖
样式必须自定义，不能依赖浏览器默认
默认黄色在深色模式、高对比度设置或打印时可能完全不可读。生产环境必须显式声明：
-
background-color和color成对设置，确保对比度≥4.5:1 - 加
padding: 0.1em 0.2em提升可读性，避免文字贴边 - 可用
border-radius: 2px柔化边缘，但别过大 - 暗色模式下用
@media (prefers-color-scheme: dark)单独定义
