最自然、语义正确又易控的方式是用 标签包裹关键字并配合 CSS 自定义样式；支持手动标记、JS 动态替换、属性选择器分类控制，兼顾可访问性与视觉统一。
想高亮页面中特定关键字，最自然、语义正确又容易控制样式的方式，就是用 标签包裹目标文字，再配合 CSS 选择器统一设置高亮样式。
用 标签手动标记关键词
这是最直接可控的方法：在 HTML 中把需要高亮的词用 包起来。它本身就有默认黄底样式，但你可以完全自定义：
搜索结果包含JavaScript和CSS相关内容。
- 然后加一句 CSS 就能统一改所有高亮效果：
mark { background-color: #ffeb3b; color: #212121; padding: 0 4px; border-radius: 3px; }
用 JavaScript 动态高亮（适合搜索/过滤场景）
如果关键字来自用户输入或需实时匹配，就得用 JS 找到文本并替换为 。注意要避免破坏原有 HTML 结构：
立即学习“前端免费学习笔记（深入）”；
- 只操作文本节点，避开已有标签；
- 用正则匹配时加上
g和i标志（全局+忽略大小写）； - 简单示例：
element.innerHTML = element.textContent.replace(/keyword/gi, '$&');
（实际项目建议用更安全的 DOM 操作，比如document.createRange()）
用属性选择器精准控制某类 mark
如果不同场景需要不同颜色（比如“错误关键词”红底、“推荐词”绿底），可以给 加 class 或 data 属性：
-
404→mark.error { background: #f44336; } -
React→mark[data-type="suggestion"] { background: #4caf50; }
注意可访问性与样式重置
是语义化标签，屏幕阅读器会读作“highlighted”，这点很好。但默认样式可能和整体设计不搭，建议：
- 显式设置
color，避免黄底白字在浅色主题下看不清； - 加
padding和border-radius提升视觉舒适度； - 如需去除默认样式（比如只加下划线），用
mark { background: transparent; text-decoration: underline; }
基本上就这些—— + 选择器是轻量、标准、易维护的高亮方案，不需要额外库，也不污染结构。
