如何区分文本节点与span元素，替换非span内指定文本

问题核心 #

你需要替换DIV中不在SPAN元素内的"TARGET"文本，将其包裹为<span class="target-class">TARGET</span>，但现有代码仅遍历元素节点（children），忽略了文本片段（Text节点），导致无法处理直接属于DIV的文本内容。

修改思路 #

1. 遍历所有子节点：将原代码中遍历element.children改为遍历element.childNodes，覆盖文本节点、元素节点等所有类型的节点。
2. 区分节点类型处理：
   • 文本节点：检查内容是否包含目标文本，若包含则拆分并替换为带样式的SPAN元素。
   • 元素节点：跳过SCRIPT/STYLE，递归遍历其子节点，同时跳过已处理的带类SPAN，避免重复操作。
3. 安全替换文本节点：文本节点无法直接包含HTML元素，需将匹配到目标文本的节点拆分为「前缀文本节点 + SPAN元素 + 后缀文本节点」，再替换原节点。

修改后的完整代码 #

1. 更新遍历函数（支持文本节点） #

export function visitChildren(
    element: HTMLElement,
    visitors: ((node: Node) => [boolean, string[]])[],
) {
    // 复制子节点列表，避免DOM修改导致遍历异常
    const childNodes = Array.from(element.childNodes);
    for (const node of childNodes) {
        // 处理文本节点
        if (node.nodeType === Node.TEXT_NODE) {
            for (const visitor of visitors) {
                visitor(node);
            }
            continue;
        }

        // 处理元素节点
        if (node.nodeType !== Node.ELEMENT_NODE) continue;
        const elementNode = node as HTMLElement;

        // 跳过脚本、样式元素
        if (elementNode.tagName === "SCRIPT" || elementNode.tagName === "STYLE") {
            continue;
        }

        // 跳过已标记的目标SPAN，避免重复处理
        if (elementNode.tagName === "SPAN" && elementNode.classList.contains("target-class")) {
            continue;
        }

        // 递归遍历子节点
        visitChildren(elementNode, visitors);
    }
}

2. 更新替换逻辑（兼容文本节点） #

export function replaceItemWithTag(node: Node, targets: Set<string>, replaceWith: string): [boolean, string[]] {
    const targetArray = Array.from(targets);
    const reg = RegExp(`\\b(${targetArray.join("|")})\\b`, "ig");
    const reason: string[] = [
        `targets: ${targetArray.join(",")}`,
        `regex: ${reg}`,
    ];

    // 处理文本节点
    if (node.nodeType === Node.TEXT_NODE) {
        const textNode = node as Text;
        const text = textNode.textContent || "";
        if (!reg.test(text)) {
            reason.push("no target in text");
            return [false, reason];
        }

        const parent = textNode.parentNode;
        if (!parent) return [false, reason];

        let lastIndex = 0;
        let match;
        reg.lastIndex = 0; // 重置正则索引，避免循环异常
        while ((match = reg.exec(text)) !== null) {
            // 插入匹配前的文本片段
            if (match.index > lastIndex) {
                parent.insertBefore(document.createTextNode(text.slice(lastIndex, match.index)), textNode);
            }
            // 创建并插入目标SPAN元素
            const span = document.createElement("span");
            span.className = "target-class";
            span.textContent = match[0];
            parent.insertBefore(span, textNode);
            lastIndex = match.index + match[0].length;
        }
        // 插入剩余文本片段
        if (lastIndex < text.length) {
            parent.insertBefore(document.createTextNode(text.slice(lastIndex)), textNode);
        }
        // 删除原文本节点
        parent.removeChild(textNode);
        reason.push("replaced target in text node");
        return [false, reason];
    }

    // 处理元素节点（仅判断是否需要递归，不直接替换）
    const elementNode = node as HTMLElement;
    if (elementNode.classList.contains("target-class")) {
        reason.push("already replaced");
        return [false, reason];
    }

    let hasTarget = false;
    for (const target of targetArray) {
        if (elementNode.innerText.toLowerCase().includes(target)) {
            hasTarget = true;
            break;
        }
    }
    reason.push(hasTarget ? "target exists, will check children" : "no target in element");
    return [hasTarget, reason];
}

3. 更新调用逻辑 #

export async function updateLabels(includedItems: Set<string>, excludedItems: Set<string>, allItems: Set<string>) {
  visitChildren(
    document.body,
    [
      (node: Node) => replaceItemWithTag(node, allItems, `<span class="target-class">$1</span>`),
    ],
  );
  // setItemClassifications(includedItems, excludedItems)
}

关键说明 #

• childNodes遍历：替代children实现对文本节点的处理，确保所有内容都被检查。
• 文本节点拆分：通过拆分文本并插入新节点的方式，避免直接修改innerHTML导致的DOM结构破坏。
• 跳过已处理元素：对带有target-class的SPAN直接跳过，防止重复替换SPAN内的文本。

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