JavaScript 获取a标签任意层级嵌套子元素文本实现tel号码替换

核心问题定位 #

现有代码仅遍历目标a标签的直接子元素做匹配，无法应对任意深度、任意元素类型的嵌套结构，导致深层嵌套在多级span、div等标签内的电话号码文本无法被识别替换。

适配方案逻辑 #

不需要手动编写多层递归判断DOM层级，通过原生DOM遍历API自动适配任意嵌套结构，核心保留原有号码清洗、匹配规则不做修改，仅调整节点查找的逻辑：

• 保留原有replaceStr、rmLetters两个号码清洗工具函数，复用已有匹配校验规则
• 针对每一个匹配到的电话号码a标签，使用TreeWalkerAPI遍历标签下的所有文本节点，自动穿透任意层级的嵌套结构，定位最末端携带电话号码的文本内容
• 匹配成功后直接替换对应文本节点的内容，不修改原有DOM结构的元素层级，避免破坏页面原有样式

核心改造代码 #

// 原有工具函数直接复用，无逻辑修改
const replaceStr = (source) => source.replace(/[- )(]/g, '');
const rmLetters = (source) => source.replace(/\D+%?/g, '');

// 选中所有带电话协议的a标签
const telLinks = document.querySelectorAll("a[href^='tel:'], a[href^='Tel:'], a[href^='callto:']");

telLinks.forEach(link => {
  // 从href中提取目标电话号码，兼容不同大小写、协议前缀的差异
  const targetPhone = link.href.slice(link.href.indexOf(':') + 1);

  // 初始化文本节点遍历器，仅遍历当前a标签子树范围内的文本节点
  const textWalker = document.createTreeWalker(
    link,
    NodeFilter.SHOW_TEXT,
    null
  );

  let currentNode;
  // 自动穿透任意嵌套深度查找目标文本
  while (currentNode = textWalker.nextNode()) {
    const rawText = currentNode.textContent.trim();
    if (!rawText) continue; // 跳过纯换行、空格的无效节点

    // 复用原有匹配规则做校验
    const cleanedTextA = replaceStr(rawText);
    const cleanedTextB = replaceStr(rmLetters(rawText));

    // 匹配成功则替换文本内容
    if (cleanedTextA === targetPhone || cleanedTextB === targetPhone) {
      currentNode.textContent = cleanedTextA.slice(0, 4) + "...Click Here";
      break;
    }
  }
});

方案效果说明 #

• 完全兼容任意深度、任意元素类型的嵌套结构，哪怕a标签下嵌套10层以上的不同标签，都能准确定位到最内层的电话号码文本
• 相比手动递归遍历所有元素的实现，TreeWalker原生节点过滤的遍历性能更高，不会带来明显的页面卡顿
• 仅替换末端文本节点内容，不修改原有元素的层级关系，不会破坏页面原有布局和样式

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