使用replaceAll替换页面文本导致社交平台元素失效，求替代实现方案

兄弟，你踩了个DOM操作的经典大坑！直接用document.body.innerHTML = ...替换内容，等于把整个页面的DOM结构重新渲染了一遍——社交平台的按钮、交互元素都是靠JavaScript绑定事件监听的，重新渲染后这些绑定全丢了，按钮自然就失效了。

正确的思路是只修改页面里的文本节点，完全不碰元素本身的结构和属性，这样就能保住所有原有的事件和组件状态。给你写个实用的实现：

核心函数：遍历文本节点替换内容 #

function replaceTextInNodes(rootNode, searchStr, replaceStr) {
  // 跳过脚本、样式这类不能乱改的标签
  const skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'IFRAME'];
  if (rootNode.tagName && skipTags.includes(rootNode.tagName)) {
    return;
  }

  // 逐个处理子节点
  for (const node of rootNode.childNodes) {
    if (node.nodeType === Node.TEXT_NODE) {
      // 只替换文本节点的内容，不影响元素结构
      node.textContent = node.textContent.replaceAll(searchStr, replaceStr);
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      // 递归处理元素节点的子节点
      replaceTextInNodes(node, searchStr, replaceStr);
    }
  }
}

// 调用示例：替换页面中所有"game"为"work"
replaceTextInNodes(document.body, 'game', 'work');

处理动态加载的内容 #

社交平台大多是滚动加载新内容的，上面的函数只能处理当前已有的DOM。如果要覆盖后续加载的内容，再加个MutationObserver监听DOM变化：

// 创建DOM变化观察者
const contentObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 遍历所有新增的节点
    mutation.addedNodes.forEach(node => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        replaceTextInNodes(node, 'game', 'work');
      }
    });
  });
});

// 配置监听：观察body下所有子节点的变化
contentObserver.observe(document.body, {
  childList: true,
  subtree: true
});

这个方案完全不破坏原有DOM的结构和事件绑定，只会悄悄替换文本内容，社交平台的按钮、交互功能都能正常使用。

备注：内容来源于stack exchange，提问作者Grasper