如何在index.html中添加网页内内容搜索高亮功能

正确实现网页关键词高亮：避免 innerHTML 陷阱，采用文本节点遍历

直接使用 innerHTML 对关键词进行高亮替换，十次操作中有九次会导致意外问题——表单中的值被清空、已绑定的事件监听器失效、甚至 img 标签上的 onerror 事件也无法正常触发，最严重时可能破坏整个 DOM 嵌套结构。根本原因在于：这种做法跳过了文本节点，将整个 HTML 字符串当作普通文本处理。

因此，正确的实现方式只有一个：仅操作真正承载“文字”的节点。

为何不能对 innerHTML 执行正则替换

浏览器不会区分用户输入是否为普通文字。如果搜索关键词包含 或 &、" 等字符，innerHTML 会直接将其解析或执行为 HTML 标签，导致样式错乱，甚至引发跨站脚本（XSS）风险。更隐蔽的问题是：一个带有 onclick 的按钮在执行高亮后可能变为纯文本，失去交互能力；input 框中的输入内容也可能被一并清除。

许多开发者首先会写出类似以下代码：

el.innerHTML = el.innerHTML.replace(/keyword/gi, '$&');

这种做法跳过了 DOM 树遍历，将整个 HTML 字符串当作普通文本处理，完全忽略了节点的语义和当前状态。本质上是为了简化代码，但引入了大量隐患。

正确方法：仅遍历并替换文本节点

核心逻辑非常简单：递归访问所有 DOM 节点，当遇到 Node.TEXT_NODE 类型时才执行匹配和包裹操作，其他节点（如元素、注释）则直接跳过。匹配时使用 document.createElement('mark') 创建新节点，再通过 replaceChild 替换原来的文本节点。

• 使用 node.nodeType === Node.TEXT_NODE 判断是否为文本节点，这是最基本的一步。
• 中文搜索需谨慎处理：例如搜索“窗透”时，“初晓”中的“透”字可能被误匹配。解决方法是在正则中添加 Unicode 边界限定，如 /(\u4e00-\u9fa5|^)\s*keyword\s*(\u4e00-\u9fa5|$)/gi。
• 英文不区分大小写匹配可使用 new RegExp(keyword, 'gi')，但必须先用 escapeRegExp() 对 keyword 进行转义处理，否则用户输入 . 或 * 等字符会出错。
• 每次高亮前先克隆当前选区（使用 getSelection().getRangeAt(0).cloneRange()），替换完成后再恢复，否则 getSelection() 可能返回空值。

highlightText 函数的关键参数与注意事项

该函数通常接收三个参数：node（搜索的根节点）、keyword（用户输入）、caseSensitive（是否区分大小写）。除核心逻辑外，实际编写时还需留意以下要点：

• 如果 keyword.trim() === ''，必须提前返回，否则正则表达式会变成 //g，匹配所有空字符串，导致页面崩溃。
• 目标区域若包含大量动态内容（例如 React/Vue 渲染的界面），不要直接传入 document.body，应限定为具体容器，如 document.getElementById('content')，以降低性能开销。
• 多词搜索（例如“AI 工具”）不应简单使用 split(' ')，而应采用 keyword.split(/\s+/).filter(Boolean)，再依次对每个词执行高亮逻辑。
• 在性能敏感的场景（如超过 200 条卡片）中，必须加防抖处理。可使用 setTimeout 配合 clearTimeout 控制触发频率，建议用户按下回车键后再执行搜索，而非每输入一个字符都重新遍历整个 DOM 树。

CSS 样式与语义细节不可忽略

高亮功能实现后，样式和语义同样需要重视。 标签天然适合用于高亮展示，比 更具语义性，且默认附带浅黄色背景。但许多父级 CSS 会覆盖该样式，因此需要明确声明：

mark { background: #ffeb3b; color: #212121; padding: 0 2px; border-radius: 2px; }

此外，mark 是内联元素，通常不影响块级布局；但如果父容器设置了 user-select: none，则高亮文字无法被选中或复制——这一细节常被忽视。

总而言之，最棘手的并非如何标红文字，而是在完成高亮后，如何让页面依然保持可交互、可编辑、可选中。所有绕过文本节点的操作本质上都削弱了 DOM 的稳定性，这一点值得每一位前端开发者认真考量。