Как найти все текстовые узлы между двумя узлами с помощью JavaScript / jQuery? - PullRequest
5 голосов
/ 09 декабря 2010

Учитывая следующий HTML-фрагмент:

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

Мне нужен алгоритм для извлечения всех узлов типа Text между #x и #y с помощью Javascript.Или есть функция JQuery, которая делает именно это?

Результирующие текстовые узлы (пропущенные узлы) для примера выше будут:

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

Ответы [ 2 ]

7 голосов
/ 09 декабря 2010

Следующее работает во всех основных браузерах с использованием методов 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);
0 голосов
/ 08 февраля 2015

В следующем примере 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;
}
...