如何用JavaScript替换动态加载内容中的字符串？

方法一：使用MutationObserver监听DOM变化 #

这是最通用的方案，能自动捕获页面上所有动态新增的DOM元素，然后对其执行文本替换：

function walkText(node) {
  if (node.nodeType == 3) {
    node.data = node.data.replace(/Villa/g, "Replaced");
    node.data = node.data.replace(/Apartment/g, "Replaced2");
  }
  if (node.nodeType == 1 && node.nodeName != "SCRIPT") {
    for (var i = 0; i < node.childNodes.length; i++) {
      walkText(node.childNodes[i]);
    }
  }
}

// 初始化监听
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // 遍历所有新增的节点
    mutation.addedNodes.forEach((node) => {
      walkText(node);
    });
  });
});

// 配置监听选项：监听子节点变化和子树变化
observer.observe(document.body, {
  childList: true,
  subtree: true
});

// 先处理一次静态内容
walkText(document.body);

原理：MutationObserver会监听DOM树的变化，当有新元素通过AJAX或其他方式插入页面时，自动对新增节点执行文本替换逻辑，无需手动触发。

方法二：在AJAX请求完成后手动调用替换函数 #

如果知道页面中AJAX请求的触发时机和完成回调，可以在请求成功后，直接对加载的目标容器执行替换：

比如用fetch实现的AJAX请求：

// 示例AJAX请求
fetch('/api/get-dynamic-content')
  .then(response => response.text())
  .then(html => {
    const targetContainer = document.getElementById('dynamic-container');
    targetContainer.innerHTML = html;
    // 内容插入后立即执行替换
    walkText(targetContainer);
  });

用jQuery的$.ajax实现：

$.ajax({
  url: '/api/get-dynamic-content',
  success: function(html) {
    $('#dynamic-container').html(html);
    walkText(document.getElementById('dynamic-container'));
  }
});

这种方法性能更高，只针对动态加载的容器处理，不会监听整个DOM树。

方法三：重写DOM插入相关方法（进阶） #

如果不想用Observer，也可以重写innerHTML、appendChild这类方法，在内容插入前或插入后自动执行替换：

// 重写appendChild方法
const originalAppendChild = Element.prototype.appendChild;
Element.prototype.appendChild = function(node) {
  const result = originalAppendChild.call(this, node);
  walkText(node);
  return result;
};

// 重写innerHTML
const originalInnerHTML = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
Object.defineProperty(Element.prototype, 'innerHTML', {
  set: function(value) {
    originalInnerHTML.set.call(this, value);
    walkText(this);
  },
  get: function() {
    return originalInnerHTML.get.call(this);
  }
});

// 先处理静态内容
walkText(document.body);

这种方式能覆盖大多数动态插入场景，但要注意可能和其他脚本的兼容性问题。

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