如何替换网页初始加载后动态新增及后续JavaScript调用修改的文本

要实现同时替换页面初始静态文本、后续JS动态注入/修改的文本，可通过「初始全量替换+DOM变化动态监听」的方案实现，具体实现如下：

1. 封装文本节点替换工具函数 #

该函数仅处理纯文本节点，不会修改HTML标签属性、JS/CSS代码内容，避免破坏页面原有功能：

function replaceTextInNode(node, regex, replacement) {
  // 仅处理文本节点
  if (node.nodeType === Node.TEXT_NODE) {
    node.textContent = node.textContent.replace(regex, replacement);
    return;
  }
  // 跳过特殊标签避免功能异常
  if (['SCRIPT', 'STYLE', 'IFRAME', 'NOSCRIPT'].includes(node.tagName)) return;
  // 递归遍历所有子节点
  node.childNodes.forEach(child => replaceTextInNode(child, regex, replacement));
}

2. 执行页面初始文本替换 #

页面加载完成后，先对当前已存在的所有文本做一次全量替换：

document.addEventListener('DOMContentLoaded', () => {
  // 示例规则：将所有"旧文本"全局替换为"新文本"
  replaceTextInNode(document.body, /旧文本/g, '新文本');
});

3. 监听DOM变化实现动态替换 #

通过MutationObserver监听页面DOM的所有变化，只要有新增节点、文本修改就自动执行替换，覆盖后续JS动态注入的内容：

// 观察者配置：监听子节点增删、子树变化、文本内容修改
const observerConfig = {
  childList: true,
  subtree: true,
  characterData: true
};

const textObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 处理新增节点的文本
    if (mutation.addedNodes.length) {
      mutation.addedNodes.forEach(node => replaceTextInNode(node, /旧文本/g, '新文本'));
    }
    // 处理原有节点的文本修改
    if (mutation.type === 'characterData') {
      replaceTextInNode(mutation.target, /旧文本/g, '新文本');
    }
  });
});

// 启动对整个页面body的监听
textObserver.observe(document.body, observerConfig);

注意事项 #

• 替换规则可根据需求调整正则，需要全局匹配必须加g修饰符，需要忽略大小写可加i修饰符
• 若后续不需要继续替换，可调用textObserver.disconnect()停止监听，释放内存
• 普通网页场景下该方案性能损耗可忽略，不建议在DOM频繁大规模修改的复杂交互页面长时间开启监听

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