使用原生JavaScript替换DOM中任意位置的电话号码

我来给你梳理下解决方案的思路和具体实现代码，完美适配你现在的场景——不需要依赖统一容器类名，直接遍历整个DOM替换目标电话号码，同时不破坏原有DOM结构和事件绑定：

• 核心原则：只修改文本内容和相关属性，不直接替换元素的innerHTML，避免破坏原有DOM结构、事件监听或者组件状态
• 两步走：
  1. 递归遍历DOM中的所有节点，筛选出文本节点（直接包含文字内容的节点），检查并替换其中的目标电话号码
  2. 遍历元素节点的属性（比如<a>的href属性、可能存在的data-phone等），替换其中以tel:开头的旧号码
• 排除特殊标签：跳过<script>、<style>、<noscript>这类不需要修改内容的标签，避免破坏页面逻辑或样式

document.addEventListener('DOMContentLoaded', function() {
  // 定义需要替换的旧号码数组和新号码
  const oldPhoneNumbers = ["0123 123456", "0231 123456"];
  const newPhoneNumber = "0231 177293-79";
  // 定义需要跳过的标签，避免修改脚本、样式等内容
  const skipTags = new Set(['SCRIPT', 'STYLE', 'NOSCRIPT', 'IFRAME']);

  // 递归遍历DOM节点的函数
  function traverseNodes(node) {
    // 如果是需要跳过的标签，直接返回
    if (skipTags.has(node.tagName?.toUpperCase())) return;

    // 处理元素节点的属性（比如a标签的href中的tel链接）
    if (node.nodeType === Node.ELEMENT_NODE) {
      // 遍历所有属性
      Array.from(node.attributes).forEach(attr => {
        // 检查属性值是否包含tel:开头的旧号码
        oldPhoneNumbers.forEach(oldNum => {
          const telPrefix = `tel:${oldNum}`;
          if (attr.value.includes(telPrefix)) {
            attr.value = attr.value.replace(telPrefix, `tel:${newPhoneNumber}`);
          }
          // 也可以处理属性值中直接包含号码的情况（比如data-phone属性）
          if (attr.value.includes(oldNum)) {
            attr.value = attr.value.replace(oldNum, newPhoneNumber);
          }
        });
      });

      // 递归处理子节点
      Array.from(node.childNodes).forEach(child => traverseNodes(child));
    }

    // 处理文本节点
    if (node.nodeType === Node.TEXT_NODE) {
      let text = node.textContent;
      oldPhoneNumbers.forEach(oldNum => {
        // 使用正则全局替换，确保文本中所有旧号码都被替换
        const regex = new RegExp(oldNum.replace(/\s/g, '\\s'), 'g');
        text = text.replace(regex, newPhoneNumber);
      });
      // 只有当文本确实被修改时才更新，避免不必要的DOM操作
      if (text !== node.textContent) {
        node.textContent = text;
      }
    }
  }

  // 从根节点开始遍历
  traverseNodes(document.body);
});

• 为什么遍历文本节点而非直接用innerHTML？：直接修改元素的innerHTML会重新解析整个元素的DOM结构，导致原有元素上绑定的事件监听丢失，还可能触发不必要的重渲染，而只修改文本节点则不会影响DOM结构和事件。
• 处理属性的必要性：像示例中的<a href="tel:0231 123456">，如果只替换文本内容，点击链接还是会拨打旧号码，所以必须同步修改href属性中的值。
• 正则替换的小技巧：把号码中的空格转义成\\s，确保不管号码是带空格还是可能的其他空白符（比如换行）都能匹配到，同时加g修饰符实现全局替换。
• 跳过特殊标签：<script>和<style>里的内容属于代码逻辑或样式规则，替换其中的号码可能导致功能异常，所以必须跳过。

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