如何解决Document.createNodeIterator()遍历DOM时的无限迭代问题——实现不区分大小写的单词<mark>标记

嘿，我来帮你搞定这个无限循环的问题！你的代码之所以会陷入无限迭代，核心原因在于你用parent.innerHTML替换内容的方式，会动态生成新的文本节点，而NodeIterator会实时监听DOM变化，把这些新节点也纳入遍历范围。

具体来说：当你把包含stackoverflow的文本替换成<mark>stackoverflow</mark>时，父元素里会新增一个mark元素，而mark内部的文本节点还是stackoverflow——这个新的文本节点会被你的迭代器再次捕获，然后你又会重复替换操作，生成新的mark和文本节点，如此循环往复就停不下来了。而当你替换成duckduckgo时，目标单词不存在了，迭代器找不到匹配的节点，循环自然就结束了。

修复方案：手动拆分文本节点，避免innerHTML的动态DOM生成 #

我们可以换一种思路：不直接替换父元素的innerHTML，而是拆分原文本节点，手动创建mark元素包裹匹配的内容，同时过滤掉已经在mark里的文本，避免重复处理。这样既能精准标记目标单词，又不会触发无限循环。

修复后的完整代码如下：

window.onload = function() { getChildren(document.body); }
function getChildren(mytag) {
  // 可以在这里添加所有需要标记的目标单词
  const targetWords = ['stackoverflow', 'Google'];
  // 构建不区分大小写的正则，匹配任意目标单词
  const regex = new RegExp(`(${targetWords.join('|')})`, 'ig');
  
  const nodeIter = document.createNodeIterator(
    mytag,
    NodeFilter.SHOW_TEXT,
    (node) => {
      // 跳过已经被mark包裹的文本，防止重复标记
      if (node.parentElement.tagName === 'MARK') {
        return NodeFilter.FILTER_REJECT;
      }
      // 只处理包含目标单词的文本节点
      return regex.test(node.textContent) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
    }
  );

  let node = nodeIter.nextNode();
  while (node) {
    // 提前保存下一个节点：因为当前节点会被删除，迭代器可能丢失后续节点的引用
    const nextNode = nodeIter.nextNode();
    const text = node.textContent;
    const parent = node.parentElement;
    
    let lastIndex = 0;
    let match;
    
    // 遍历当前文本节点里所有匹配的目标单词
    while ((match = regex.exec(text)) !== null) {
      const matchStr = match[0];
      const matchStart = match.index;
      const matchEnd = matchStart + matchStr.length;
      
      // 插入匹配前的文本片段（如果有的话）
      if (matchStart > lastIndex) {
        parent.insertBefore(document.createTextNode(text.slice(lastIndex, matchStart)), node);
      }
      
      // 创建mark元素并插入到DOM中
      const mark = document.createElement('mark');
      mark.textContent = matchStr;
      parent.insertBefore(mark, node);
      
      lastIndex = matchEnd;
    }
    
    // 插入剩余的文本片段（如果有的话）
    if (lastIndex < text.length) {
      parent.insertBefore(document.createTextNode(text.slice(lastIndex)), node);
    }
    
    // 移除原来的文本节点
    parent.removeChild(node);
    
    // 处理下一个提前保存的节点
    node = nextNode;
  }
}

关键修复点说明 #

• 提前获取下一个节点：因为当前文本节点会被删除，直接调用nodeIter.nextNode()可能会出错，所以我们先把下一个节点的引用保存下来。
• 过滤mark内的文本：在NodeIterator的过滤函数里，直接拒绝处理父元素是mark的文本节点，彻底避免重复标记。
• 手动拆分文本节点：通过拆分原文本，逐个插入普通文本和包裹好的mark元素，不会生成额外的、未被跟踪的DOM节点，从根源上杜绝无限循环。
• 支持多单词标记：把目标单词放在数组里，一次就能处理多个需要标记的内容，扩展性更强。

这个方案不仅解决了无限循环的问题，还能保留原有的DOM结构（比如你的<a>标签不会被innerHTML破坏），标记效果也更精准。

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