如何遍历HTML时排除嵌套anchor元素，执行正则innerHTML替换

核心思路：操作文本节点而非innerHTML #

直接对整个innerHTML用正则会同时命中标签属性和嵌套内容，正确做法是只遍历并处理非<a>标签后代的文本节点，完全避开<a>及其子元素的所有内容（包括属性和内部文本）。

具体实现步骤 #

1. 递归遍历文本节点，过滤<a>标签及其后代 #

写递归函数收集所有不属于<a>标签（自身是<a>或父节点是<a>）的有效文本节点：

function getTextNodesExceptAnchors(element) {
  const textNodes = [];
  function traverse(node) {
    // 遇到<a>标签直接跳过所有子节点
    if (node.tagName === 'A') return;
    if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
      textNodes.push(node);
    } else {
      // 递归遍历子节点
      node.childNodes.forEach(child => traverse(child));
    }
  }
  traverse(element);
  return textNodes;
}

2. 对文本节点批量执行正则替换 #

拿到符合要求的文本节点后，逐个对其textContent执行正则替换。为优化性能，建议提前编译正则规则：

// 预编译正则数组，每个元素包含正则和对应的span类名
const regexRules = [
  { regex: /directive/gi, className: 'highlight-directive' },
  // ... 其余299个正则规则
];

// 获取目标容器下的有效文本节点（示例为document.body，可替换为具体容器）
const targetTextNodes = getTextNodesExceptAnchors(document.body);

// 批量处理文本节点
targetTextNodes.forEach(textNode => {
  let content = textNode.textContent;
  regexRules.forEach(({ regex, className }) => {
    content = content.replace(regex, `<span class="${className}">$&</span>`);
  });
  // 用临时span包裹替换后的内容，替换原文本节点
  const tempSpan = document.createElement('span');
  tempSpan.innerHTML = content;
  textNode.parentNode.replaceChild(tempSpan, textNode);
});

3. 针对大文档的性能优化 #

面对25万词的HTML和300个正则，可通过以下方式提速：

• 正则预编译：提前用RegExp构造函数或字面量创建正则，避免重复编译
• 缩小处理范围：定位到具体的内容容器（而非整个body），减少遍历节点数量
• 批量DOM操作：对单个文本节点一次性完成所有替换，减少DOM变更次数
• 使用DocumentFragment：若需创建大量节点，先用DocumentFragment暂存，最后一次性插入DOM，减少重排重绘

为什么之前的方案不可行？ #

• 直接操作innerHTML：会命中<a>标签的属性（如href中的关键词）和内部文本，无法精准排除
• 移除再插入<a>标签：DOM结构变更后，原位置跟踪难度极大，插入新span后坐标完全混乱
• 排除包含<a>的父元素：会丢失父元素下的非<a>后代文本（如示例中p标签的直接子文本）

效果验证 #

用你提供的示例HTML测试后，只有UK law which is a directive中的"directive"会被包裹为<span class="highlight-directive">directive</span>，<a>标签内的文本和href属性完全不受影响。

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