如何使用 JavaScript/jQuery 找到两个元素节点之间的所有文本节点？答案

【问题标题】：How can I find all text nodes between two element nodes with JavaScript/jQuery?如何使用 JavaScript/jQuery 找到两个元素节点之间的所有文本节点？
【发布时间】：2011-05-22 20:41:30
【问题描述】：

给定以下 HTML 片段：

<div>
  <p>
    abc <span id="x">[</span> def <br /> ghi
  </p>
  <p>
    <strong> jkl <span id="y">]</span> mno </strong>
  </p>
</div>

我需要一种算法来使用 Javascript 获取 #x 和 #y 之间的所有 Text 类型的节点。或者是否有一个 JQuery 函数可以做到这一点？

上面示例的结果文本节点（忽略空白节点）将是：

['def', 'ghi', 'jkl']

【问题讨论】：

你想抓取文本节点还是它们的（字符串）内容？
另外，请注意这两个 SPAN 之间的文本节点超过 3 个。（我认为是 5，但我不确定）
@Sime：我要抓取文本节点。
@user 在这种情况下，结果将不是['def', 'ghi', 'jkl']，而是一个 DOM 文本节点对象数组
看来您可能需要将stackoverflow.com/questions/2203958/… 与stackoverflow.com/questions/298750/… 结合起来。

标签： javascript jquery traversal

【解决方案1】：

以下内容适用于所有使用 DOM 方法且无库的主流浏览器。它还会忽略问题中提到的空白文本节点。

必填 jsfiddle：http://jsfiddle.net/timdown/a2Fm6/

function getTextNodesBetween(rootNode, startNode, endNode) {
    var pastStartNode = false, reachedEndNode = false, textNodes = [];

    function getTextNodes(node) {
        if (node == startNode) {
            pastStartNode = true;
        } else if (node == endNode) {
            reachedEndNode = true;
        } else if (node.nodeType == 3) {
            if (pastStartNode && !reachedEndNode && !/^\s*$/.test(node.nodeValue)) {
                textNodes.push(node);
            }
        } else {
            for (var i = 0, len = node.childNodes.length; !reachedEndNode && i < len; ++i) {
                getTextNodes(node.childNodes[i]);
            }
        }
    }

    getTextNodes(rootNode);
    return textNodes;
}

var x = document.getElementById("x"),
    y = document.getElementById("y");

var textNodes = getTextNodesBetween(document.body, x, y);
console.log(textNodes);

【讨论】：

代替document.body我想我可以使用起始节点和结束节点的公共父节点作为根节点。
@user375773：确实，我同意这样会更好。为了简单起见，我省略了。

【解决方案2】：

以下示例使用 jQuery 来查找彼此相邻的任意两个元素，它们之间可能有也可能没有文本节点。这个 foreach 循环将检查结果元素以查找任何文本节点并将它们添加到列表中。

function getTextNodes() {
    var list = [];
    $(document.body).find("*+*").toArray().forEach(function (el) {
        var prev = el.previousSibling;
        while (prev != null && prev.nodeType == 3) {
            list.push(prev);
            prev = prev.previousSibling;
        }
    });
    return list;
}

【讨论】：