jQuery实现文本替换无需触发更新按钮 解决动态更新后替换失效问题

原代码仅在页面初始化阶段执行一次替换逻辑，当页面触发运费计算、动态更新label节点的文本内容时，因为没有触发新的替换流程，就会出现动态刷新后西语文本漏显的问题。结合无法修改原生HTML的限制，可通过DOM变动监听的方式实现持续、自动的替换效果。

实现思路 #

• 封装通用的文本替换函数，既处理页面初始加载的内容，也能在DOM变动时重复调用
• 针对WooCommerce结账页的核心容器配置DOM监听器，只要监听到节点文本发生变动，就触发替换逻辑
• 加入防抖机制，避免高频DOM变动造成的性能损耗

完整可运行代码 #

jQuery(function ($) {
  // 封装通用替换逻辑，支持重复调用
  const replaceShippingText = () => {
    $('label[for^="shipping_method_0"]').contents().filter(function() {
      // 仅匹配纯文本节点，且内容为目标西语运费文案
      return this.nodeType === 3 && $.trim(this.textContent).includes('Gastos de envío:');
    }).replaceWith('Shipping costs: ');
  };

  // 页面初始化时先执行一次替换
  replaceShippingText();

  // 确定DOM监听的根节点
  const checkoutContainer = document.querySelector('.woocommerce-checkout');
  const observeRoot = checkoutContainer || document.body;

  // 配置监听器参数：覆盖子节点变动、全后代节点、文本内容变动
  const observerOption = {
    childList: true,
    subtree: true,
    characterData: true
  };

  // 防抖处理，避免短时间内重复触发替换
  let debounceTimer;
  const handleDomChange = () => {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
      replaceShippingText();
    }, 100);
  };

  // 初始化DOM监听器
  const domObserver = new MutationObserver(handleDomChange);
  domObserver.observe(observeRoot, observerOption);
});

效果说明 #

• 替换动作无需用户手动点击更新按钮触发，页面任何阶段的西语文本都会被自动匹配为对应英文内容
• 替换逻辑会先判断当前文本节点是否为目标西语内容，不会对已经替换完成的文本、其他正常文本节点产生误改
• 监听范围覆盖结账页全量DOM变动，哪怕页面后续通过异步加载刷新了运费区域内容，替换逻辑也能正常生效

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