js递归检索包含子串的所有文本节点

在Web 前端开发过程中，高效地检索文本节点对于实现一些功能，如关键词高亮，显得尤为重要，特别是在处理页面动态加载内容的情况下。本文将详细探讨几种方法，用于检索 HTML 元素的所有子文本节点，并通过性能测试来确定最佳解决方案。

检索方法概述

1. 使用 childNodes 递归
2. TreeWalker
3. NodeIterator
4. document.evaluate()配合 XPath

性能测试

测试代码基于一个由多个流行网站 HTML 代码组合而成的样本文档。以下是几种主要的检索方法实现：

// childNodes 递归
function recursiveChildNodes(el) {
    var nodes = [];
    function traverse(el) {
        for (var i = 0; i < el.childNodes.length; i++) {
            var node = el.childNodes[i];
            if (node.nodeType == Node.TEXT_NODE) {
                nodes.push(node);
            } else traverse(node);
        }
    }
    traverse(el);
    return nodes;
}

// TreeWalker
function useTreeWalker(el) {
    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
    const nodes = [];
    while (walker.nextNode()) nodes.push(walker.currentNode);
    return nodes;
}

// NodeIterator
function useNodeIterator(el) {
    const iterator = document.createNodeIterator(el, NodeFilter.SHOW_TEXT);
    const nodes = [];
    let node;
    while (node = iterator.nextNode()) nodes.push(node);
    return nodes;
}

// XPath
function useXPath(el) {
    let iterator = document.evaluate("//text()", el, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE);
    const nodes = [];
    let node;
    while (node = iterator.iterateNext()) nodes.push(node);
    return nodes;
}

测试结果显示，TreeWalker、NodeIterator 和 XPath 方法的性能相近，均比基于 childNodes 的递归方法快约 5 倍。

包含特定子串的文本节点检索

对于需要查找包含特定子串的文本节点，比较了两种方法：

1. 使用 TreeWalker 获取所有文本节点后过滤
2. 直接使用 XPath 表达式查找包含特定字符串的文本节点

// TreeWalker + 过滤
function treeWalkerWithFilter(el, text) {
    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
    const nodes = [];
    while (walker.nextNode()) {
        if (walker.currentNode.nodeValue.includes(text)) {
            nodes.push(walker.currentNode);
        }
    }
    return nodes;
}

// XPath 直接查找
function xpathDirectSearch(el, text) {
    let iterator = document.evaluate(`//text()[contains(.,'${text}')]`, el, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE);
    const nodes = [];
    let node;
    while (node = iterator.iterateNext()) nodes.push(node);
    return nodes;
}

测试结果表明，使用 TreeWalker 获取所有节点后再过滤的方法比直接使用 XPath 条件查询更快。

结论与最佳实践

1. 对于检索所有嵌套文本节点，document.createTreeWalker()和 document.createNodeIterator()是最佳选择。
2. 当需要查找包含特定子串的文本节点时，先使用 TreeWalker 获取所有文本节点，然后进行过滤是更高效的方法。

在处理大型、复杂的 Web 应用时，实现高性能的文本搜索和高亮功能变得尤为重要。这些优化技巧在提升页面的响应速度和用户体验方面发挥着关键作用。通过选择合适的方法，能够显著提高网页的性能和用户体验。