高亮搜索结果后JavaScript失效问题求助

问题现象 #

带有预定义搜索词的搜索栏，点击搜索结果完成页面关键词高亮后，所有JavaScript功能完全失效，必须刷新页面才能恢复。

核心原因 #

问题出在highlightMatches和clearHighlights函数中直接替换document.body.innerHTML的操作：

• 替换整个body的HTML时，页面原有DOM元素会被完全销毁并替换为新元素
• 之前通过addEventListener绑定的所有事件（比如搜索结果点击事件、输入框交互事件等）都会丢失，新元素未绑定任何事件，导致后续JS功能全部失效

解决方案 #

避免直接替换整个body的HTML，改用遍历文本节点的方式添加/移除高亮，保留原有DOM结构和事件绑定。

步骤1：实现文本节点遍历工具函数 #

用于遍历页面中所有有效文本节点，跳过script、style等无需处理的标签：

function traverseTextNodes(node, callback) {
  if (node.nodeType === Node.TEXT_NODE) {
    callback(node);
  } else if (node.nodeType === Node.ELEMENT_NODE && !['SCRIPT', 'STYLE', 'NOSCRIPT'].includes(node.tagName)) {
    node.childNodes.forEach(child => traverseTextNodes(child, callback));
  }
}

步骤2：重写highlightMatches函数 #

通过操作文本节点实现高亮，不破坏原有DOM：

function highlightMatches(searchText) {
  clearHighlights(); 
  const regex = new RegExp(searchText, 'gi');

  traverseTextNodes(document.body, (textNode) => {
    let text = textNode.textContent;
    let match;
    let lastIndex = 0;
    const parent = textNode.parentNode;

    if (!regex.test(text)) return;
    regex.lastIndex = 0; // 重置正则匹配索引

    while ((match = regex.exec(text)) !== null) {
      // 插入匹配前的文本节点
      const beforeText = document.createTextNode(text.slice(lastIndex, match.index));
      parent.insertBefore(beforeText, textNode);

      // 创建高亮span并插入
      const highlightSpan = document.createElement('span');
      highlightSpan.className = 'highlight-span';
      highlightSpan.textContent = match[0];
      parent.insertBefore(highlightSpan, textNode);

      lastIndex = match.index + match[0].length;
    }

    // 插入剩余文本
    if (lastIndex < text.length) {
      const afterText = document.createTextNode(text.slice(lastIndex));
      parent.insertBefore(afterText, textNode);
    }

    // 删除原文本节点
    parent.removeChild(textNode);
  });

  searchInput.focus();
}

步骤3：重写clearHighlights函数 #

移除高亮span并合并相邻文本节点，恢复原有文本结构：

function clearHighlights() {
  document.querySelectorAll('.highlight-span').forEach(span => {
    const textNode = document.createTextNode(span.textContent);
    span.parentNode.replaceChild(textNode, span);
    mergeAdjacentTextNodes(textNode.parentNode);
  });
}

// 合并相邻文本节点，优化DOM结构
function mergeAdjacentTextNodes(parent) {
  let currentNode = parent.firstChild;
  while (currentNode) {
    const nextNode = currentNode.nextSibling;
    if (currentNode.nodeType === Node.TEXT_NODE && nextNode && nextNode.nodeType === Node.TEXT_NODE) {
      currentNode.textContent += nextNode.textContent;
      parent.removeChild(nextNode);
    } else {
      currentNode = nextNode;
    }
  }
}

步骤4：优化事件绑定（可选） #

将搜索结果的点击事件改为事件委托，避免每次更新列表重复绑定事件：

// 初始化时绑定一次，不要放在DisplaySearchResults中重复执行
resultListContainer.addEventListener('click', function (e) {
  if (e.target.tagName === 'LI') {
    const searchText = e.target.textContent;
    highlightMatches(searchText);
    scrollToFirstMatch(searchText);
  }
});

function DisplaySearchResults(result) {
  const content = result.map((list) => {
    return "<li>" + list + "</li>";
  });
  resultList.innerHTML = "<ul>" + content.join('') + "</ul>";
}

效果验证 #

修改后，点击搜索结果高亮关键词时，原有DOM结构和事件绑定会被保留，JavaScript功能不会失效，无需刷新页面即可继续操作。

内容的提问来源于stack exchange，提问作者Artin Goodarzi