html搜索高亮必须依赖关键词，mark标签仅是语义容器，不具搜索能力；需提取清洗用户输入关键词，遍历文本节点匹配插入mark，避免html结构污染和正则元字符错误。
HTML搜索高亮必须依赖关键词，没有关键词就无法确定“高亮谁”——mark 标签本身不带搜索能力，它只是语义容器，真正驱动高亮的是你传进去的关键词字符串。
为什么不能直接用 mark 自动高亮？
mark 是纯展示标签，浏览器不会主动扫描页面找匹配词。它像一个空盒子，你得把内容塞进去，还得告诉它“塞哪一段”。比如 <mark>React</mark> 会高亮，但写个 <mark></mark> 或者放错位置（比如套在 <img> 外），不仅没效果，还可能破坏 DOM 结构或导致渲染异常。
关键词怎么传给高亮逻辑？
实际开发中，关键词通常来自用户输入或 URL 参数，需要被安全提取、清洗后参与匹配：
- 用户输入的关键词要先
.trim()去空格，再判断是否为空，避免空mark或正则报错 - 多词搜索（如 “前端 工程化”）建议用
.split(/\s+/)拆成数组，逐个匹配，而不是用|拼正则——后者容易因特殊字符（如.、+）触发意外匹配 - 大小写处理要统一：一般转小写比对（
textContent.toLowerCase().includes(keyword.toLowerCase())），但替换回 DOM 时仍用原文本，否则破坏大小写语义 - 关键词里若含正则元字符（如
$、[），必须用RegExp.escape（或手动转义）包裹，否则new RegExp(keyword)会语法错误
高亮时最容易踩的坑：HTML 标签干扰
直接对 innerHTML 做字符串替换，关键词一旦出现在 src、alt、class 等属性值里，就会把 HTML 结构搞坏。比如搜索 “logo”，可能误改 <img src="logo.png"> 成 <img src="<mark>logo</mark>.png">，图片直接挂掉。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
正确做法是只遍历文本节点（nodeType === 3），跳过元素节点。可以用 document.createTreeWalker 或递归 childNodes，拿到纯文本后再做匹配和 mark 插入。这样既避开标签污染，也保证语义准确——mark 只包真正该高亮的“内容”，不是“结构”。
要不要用正则？什么时候该用 mark 而不是 span？
正则在简单场景够用（如整词匹配、无跨标签需求），但遇到换行、空格折叠、富文本嵌套时极易漏匹配。而 mark 的核心价值不在样式，而在语义：screen reader 会读出“已标记文本”，搜索引擎能识别相关性，CSS 也能用 mark:not([data-nohighlight]) 精准控制。所以只要关键词来自用户意图（搜索、引用、定位），就该用 mark；仅做视觉强调（比如标题副标）才考虑 span + class。
跨标签关键词（比如“前”在 <strong>前</strong>端 中）必须走 DOM 遍历+文本拼接+位置映射，没法靠字符串替换解决——这是最常被低估的复杂点，也是线上项目高亮失效的主因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
