如何实现网页内容的关键词自动搜索并高亮_脚本遍历文本节点-html教程-PHP中文网

直接用 innerHTML 替换会破坏表单和事件绑定，因为会重建 DOM 子树，清空事件监听器、表单值及 canvas 状态；安全做法是仅遍历并替换文本节点（nodeType === 3），跳过 script/style/textarea 等元素，用 TreeWalker + mark 标签包裹关键词，避免触碰结构节点。

如何实现网页内容的关键词自动搜索并高亮_脚本遍历文本节点

为什么直接用 `innerHTML` 替换会破坏表单和事件绑定

很多初学者一上来就对 document.body.innerHTML 做正则替换，结果发现输入框失焦、按钮点击失效、addEventListener 全丢了。这是因为 innerHTML 赋值会触发浏览器重新解析并重建整个 DOM 子树，所有已绑定的 JS 事件监听器、表单控件的当前值（比如用户刚输了一半的文本）、甚至的绘图状态都会被清空。

真正安全的做法是只遍历文本节点（Node.TEXT_NODE），逐个检查内容并包裹匹配关键词的片段，不碰元素节点本身。

只操作 nodeType === 3 的节点，跳过 1（元素）、8（注释）、9（document）等类型
避免处理 <script></script>、、等内部文本不应高亮的节点（可用 node.parentElement.tagName 判断）
替换后用 document.createTextNode() 和 document.createElement('mark') 拼接，保留原始节点结构

如何正确遍历并替换文本节点中的关键词

核心是用 TreeWalker 或递归 childNodes，但前者更健壮——它能自动跳过注释、文档类型等非目标节点，且支持过滤条件。关键词匹配需注意大小写、全词匹配、正则转义等细节。

下面是一个最小可行脚本片段：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

function highlightText(keyword, root = document.body) {
  const walker = document.createTreeWalker(
    root,
    NodeFilter.SHOW_TEXT,
    {
      acceptNode: node => {
        // 跳过 script/style/textarea 内容
        const parent = node.parentElement;
        if (!parent) return NodeFilter.FILTER_REJECT;
        if (['SCRIPT', 'STYLE', 'TEXTAREA'].includes(parent.tagName)) {
          return NodeFilter.FILTER_REJECT;
        }
        return node.textContent.trim() ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
      }
    }
  );

  const regex = new RegExp(keyword.replace(/[.*+?^${}()|[]\]/g, '\$&'), 'gi');
  
  let node;
  while (node = walker.nextNode()) {
    const text = node.textContent;
    if (!regex.test(text)) continue;

    const span = document.createElement('mark');
    span.className = 'highlight';
    
    const fragments = text.split(regex);
    const matches = text.match(regex) || [];
    
    const fragmentNodes = [];
    fragments.forEach((frag, i) => {
      if (frag) fragmentNodes.push(document.createTextNode(frag));
      if (i

keyword.replace(/[.*+?^${}()|[]\]/g, '\$&') 是必须的，否则用户搜 a.b 会变成正则 a.b（点号匹配任意字符）
不要用 String.prototype.replaceAll 直接替换整个文本节点——它无法区分“abc”在“abcde”中是否为独立词，且会丢失原始空白符结构
每次 replaceChild 后，walker 的内部指针可能失效，所以用 while + nextNode() 比 for...of 更稳妥

为什么高亮后点击失效或样式错乱

常见原因是被插入到行内元素（如、）内部，而这些元素的 CSS 设置了 display: block 或 white-space: nowrap，导致换行或尺寸异常；或者父容器用了 contenteditable="true"，但不被允许嵌套其中。

若页面有 contenteditable 区域，高亮前先检查 node.closest('[contenteditable]')，跳过处理
给 .highlight 加上 display: inline !important 和 box-decoration-break: clone（应对跨行高亮断裂）
避免在、、的父链中执行高亮逻辑，它们没有文本子节点可操作

搜索后如何清除高亮而不影响 DOM 结构

不能简单地 document.querySelectorAll('.highlight').forEach(el => el.remove())，因为这会把原本的文本节点也删掉——你实际插入的是多个新节点（mark + textNode），它们共同替代了原来的单个文本节点。清除必须还原原始文本内容。

最可靠方式：高亮前用 WeakMap 缓存每个被修改的文本节点及其原始内容，清除时遍历该映射并 node.replaceWith(document.createTextNode(originalText))
如果没做缓存，可尝试收集所有 .highlight 的父节点，再对每个父节点调用 normalize() 合并相邻文本节点，但这不能保证完全还原（比如原先是带空格/换行的格式）
不要依赖 innerHTML 回填——又回到第一个问题，会丢事件和状态

关键词高亮看着简单，真正落地时最麻烦的不是匹配，而是绕开浏览器对 DOM 树的隐式约束：哪些节点能动、哪些改了会连锁崩溃、哪些样式会让 mark 表现反直觉。动手前先用 console.dir(node) 看三眼父元素和兄弟节点，比硬写逻辑有用得多。