如何替换DOM中任意位置的指定词语？

要实现跨网站的词语替换，同时避免DOM遍历导致的性能问题，核心是只处理文本节点，避免直接操作整个body的innerHTML（会破坏事件绑定、引发大量重排）。以下是可落地的实现方案：

关键优化点 #

• 用TreeWalker高效遍历文本节点，比递归遍历性能更优
• 跳过无需处理的元素（如script、style、输入框等）
• 正则添加边界匹配\b避免部分词语误匹配，同时转义特殊字符防止正则失效
• 用DocumentFragment批量更新节点，减少DOM重排

完整代码实现 #

// 转义正则特殊字符（避免old_words含./*等字符时正则出错）
function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

const old_words = ['word1', 'word2', 'word3'];
const new_words = ['nword1', 'nword2', 'nword3'];

// 构建词语映射表，方便快速查找对应替换词
const wordMap = new Map();
old_words.forEach((word, idx) => {
  wordMap.set(word.toLowerCase(), new_words[idx]);
});

// 构建带边界匹配的正则（\b确保匹配完整词语）
const escapedWordList = old_words.map(word => escapeRegExp(word));
const replaceRegex = new RegExp(`\\b(${escapedWordList.join('|')})\\b`, 'gi');

// 用TreeWalker遍历所有文本节点
const treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_TEXT,
  null,
  false
);

let currentNode;
while (currentNode = treeWalker.nextNode()) {
  const parentTag = currentNode.parentElement.tagName.toLowerCase();
  // 跳过无需处理的元素文本
  if (['script', 'style', 'noscript', 'textarea', 'input', 'select'].includes(parentTag)) {
    continue;
  }

  const textContent = currentNode.textContent;
  // 无匹配内容直接跳过
  if (!replaceRegex.test(textContent)) continue;

  // 创建文档片段批量处理节点，减少DOM操作
  const fragment = document.createDocumentFragment();
  let lastMatchEnd = 0;

  textContent.replace(replaceRegex, (matchedWord, _, matchStart) => {
    // 添加匹配前的纯文本
    if (matchStart > lastMatchEnd) {
      fragment.appendChild(document.createTextNode(textContent.slice(lastMatchEnd, matchStart)));
    }
    // 创建包裹span
    const span = document.createElement('span');
    span.dataset.oldWord = matchedWord;
    span.textContent = wordMap.get(matchedWord.toLowerCase());
    fragment.appendChild(span);
    lastMatchEnd = matchStart + matchedWord.length;
  });

  // 添加剩余的纯文本
  if (lastMatchEnd < textContent.length) {
    fragment.appendChild(document.createTextNode(textContent.slice(lastMatchEnd)));
  }

  // 替换原文本节点
  currentNode.parentNode.replaceChild(fragment, currentNode);
}

针对你现有问题的说明 #

1. 你之前的代码仅完成了词语替换的逻辑，但没有将结果应用到DOM节点上，缺少遍历DOM的核心步骤
2. 直接用document.body.innerText.indexOf后修改innerHTML的方式，会导致整个DOM重新渲染，大页面下必然崩溃，同时丢失原有元素的事件绑定
3. 正则未处理边界和特殊字符，容易出现误匹配（比如把"word123"中的"word1"也替换）

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