document.querySelectorAll元素排除规则失效，请求技术协助

你的核心问题有两个：

1. 选择器逻辑错误：.entry-content:not(a, style, script)选中的是带entry-content类的元素本身，而非该元素下排除a/style/script的子元素，所以根本没起到过滤作用。
2. 直接修改innerHTML会覆盖元素内所有HTML结构，包括嵌套的a标签，自然会把不该替换的内容也改了。

正确的做法是只遍历纯文本节点，跳过a、style、script这类不需要处理的元素，再对文本内容进行替换。以下是可行代码：

function replaceTermWithAnchor(term, anchorId) {
  const entryContent = document.querySelector('.entry-content');
  if (!entryContent) return;

  // 递归遍历节点树，仅处理文本节点
  function traverse(node) {
    // 跳过不需要处理的元素类型
    if (['A', 'STYLE', 'SCRIPT'].includes(node.nodeName)) return;

    if (node.nodeType === Node.TEXT_NODE) {
      const text = node.textContent;
      // 用单词边界避免部分匹配（比如不替换foobar里的foo，不需要可去掉\b）
      const regex = new RegExp(`\\b${term}\\b`, 'g');
      if (regex.test(text)) {
        const fragment = document.createDocumentFragment();
        let lastIndex = 0;
        let match;

        // 分割文本，逐个替换匹配项为锚点
        while ((match = regex.exec(text)) !== null) {
          fragment.appendChild(document.createTextNode(text.slice(lastIndex, match.index)));
          const anchor = document.createElement('a');
          anchor.href = `#${anchorId}`;
          anchor.style.background = 'lime';
          anchor.textContent = match[0];
          fragment.appendChild(anchor);
          lastIndex = match.index + match[0].length;
        }
        // 添加剩余未匹配的文本
        fragment.appendChild(document.createTextNode(text.slice(lastIndex)));
        // 替换原文本节点
        node.parentNode.replaceChild(fragment, node);
      }
    } else {
      // 递归处理子节点
      for (let i = 0; i < node.childNodes.length; i++) {
        traverse(node.childNodes[i]);
      }
    }
  }

  traverse(entryContent);
}

// 调用示例：替换foo为#foo锚点，替换bar为#bar锚点
replaceTermWithAnchor('foo', 'foo');
replaceTermWithAnchor('bar', 'bar');

代码优势 #

• 精准跳过a、style、script元素，不会修改这些元素内的内容
• 仅处理纯文本节点，避免破坏原有DOM结构
• 使用文档碎片减少DOM操作次数，性能更优
• 支持单词边界匹配，避免误替换（如foobar中的foo）

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