如何用Javascript/JQuery找到元素节点之间的所有文本节点?

Given the following HTML-Fragment:

鉴于以下html片段:

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

I need an algorithm to fetch all nodes of type Text between #x and #y with Javascript. Or is there a JQuery function that does exactly that?

我需要一个算法来获取#x和#y之间的所有类型的文本节点。还是有一个JQuery函数可以做到这一点?

The resulting Text nodes (whitespace nodes ignored) for the example above would then be:

上面示例的结果文本节点(忽略空格节点)将是:

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

2 个解决方案

#1

The following works in all major browsers using DOM methods and no library. It also ignores whitespace text nodes as mentioned in the question.

下面的方法可以在所有主要浏览器中使用DOM方法，而不使用库。它还忽略了问题中提到的空白文本节点。

Obligatory jsfiddle: http://jsfiddle.net/timdown/a2Fm6/

义务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);

#2

The following example uses jQuery to find any two elements that are next to each other and may or may not have text nodes between them. This foreach loop will check the resulted elements to find any text nodes and add them to the list.

下面的示例使用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;
}

#1