How can I find all text nodes between two element nodes with JavaScript/jQuery?

Question

Given the following HTML-Fragment:

<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?

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

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

Do you want to grab the text nodes or their (string) contents? — Šime Vidas
– Šime Vidas, Commented Dec 9, 2010 at 13:24
Also, note that there are more than 3 text nodes between those two SPANs. (I think 5, but I'm not sure) — Šime Vidas
– Šime Vidas, Commented Dec 9, 2010 at 13:27
@user In that case the result wouldn't be ['def', 'ghi', 'jkl'] but an array of DOM Text Node objects — Šime Vidas
– Šime Vidas, Commented Dec 9, 2010 at 13:51
Seems like you might need to combine stackoverflow.com/questions/2203958/… with stackoverflow.com/questions/298750/…. — sje397
– sje397, Commented Dec 9, 2010 at 13:57

Tim Down · Accepted Answer · 2010-12-09 19:11:13Z

11

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

Obligatory 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);

edited Dec 9, 2010 at 19:11

answered Dec 9, 2010 at 14:28

Tim Down

326k76 gold badges461 silver badges546 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Martin Andert Over a year ago

Instead of document.body I think I can use the common parent node of both the start node and the end node as root node.

Tim Down Over a year ago

@user375773: Indeed, I agree that would be better. I omitted that for the sake of simplicity.

Dan-el · Accepted Answer · 2015-02-08 12:59:44Z

0

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.

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;
}

answered Feb 8, 2015 at 12:59

Dan-el

534 bronze badges

Collectives™ on Stack Overflow

How can I find all text nodes between two element nodes with JavaScript/jQuery?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related