How to iterate over every node in a selected range in javascript?

Question

When implementing a rich text editor in javascript, I need to apply some changes to every text node in selected range. Range object provides interface to get startContainer, endContainer, startOffset, endOffset for the selected range. How can I iterate over every DOM node in between?

var selection = window.getSelection();
var range = selection.getRange(0);
// How can I iterate over every node within the range?

Does [an example on accessing the range DOM](http://stackoverflow.com/a/4220888/2579117) get you up to speed? — Rogier Spieker, Feb 18 '16 at 08:15
@RogierSpieker That points me in the right direction, thanks! — NeoWang, Feb 18 '16 at 08:38

score 16 · Accepted Answer · edited Dec 07 '17 at 05:31

As suggested, you can use NodeIterator to walk inside range.commonAncestorContainer.

Here's a snippet:

var _iterator = document.createNodeIterator(
    range.commonAncestorContainer,
    NodeFilter.SHOW_ALL, // pre-filter
    {
        // custom filter
        acceptNode: function (node) {
            return NodeFilter.FILTER_ACCEPT;
        }
    }
);

var _nodes = [];
while (_iterator.nextNode()) {
    if (_nodes.length === 0 && _iterator.referenceNode !== range.startContainer) continue;
    _nodes.push(_iterator.referenceNode);
    if (_iterator.referenceNode === range.endContainer) break;
}

You should use NodeFilter.SHOW_ALL because your range can contain multiple nodeTypes. If you know what you are selecting, you can check this reference to properly choose NodeFilter.

Edit: I also want to point out document.createTreeWalker().

The key difference is that document.createTreeWalker() allow your acceptNode filter to return both NodeFilter.FILTER_REJECT and NodeFilter.FILTER_SKIP with real differences.

Quote from NodeFilter docs:

FILTER_REJECT:

Value to be returned by the NodeFilter.acceptNode() method when a node should be rejected. For TreeWalker, child nodes are also rejected. For NodeIterator, this flag is synonymous with FILTER_SKIP.

Ps: the NodeFilter.acceptNode() documentation for NodeFilter.FILTER_REJECT is incorrect.

I might be wrong, but I think not using NodeFilter.SHOW_ALL would potentially result in the first condition always evaluating to false, as referenceNode might never equal startContainer if it was filtered away. — Benny Bottema, Nov 18 '20 at 20:04

score 5 · Answer 2 · answered Jun 19 '17 at 00:25

5

range.commonAncestorContainer will give you the node that encompasses the range. If it gives you a text node, then that's the only node in your range.

If it gives you an element, you can use NodeIterator, or el.querySelectorAll('*') to get the nodes within.

Not all of these will be inside your range, so use range.intersectsNode(el) to confirm.

answered Jun 19 '17 at 00:25

JaffaTheCake

13,895
4
51
54

`Range.intersectsNode()` has no support on IE (up to and including 11) :( Likewise `Selection.containsNode()`. – simon Jul 22 '17 at 07:00

How to iterate over every node in a selected range in javascript?

2 Answers2