Question

I am working with a real time editor and need to find all text nodes that are inside the range a user has selected.

Example (the “|” marks the selection range start and end point):

<p>Here starts the |selection.</p>
<p>This is fully in the range.</p>
<p>This only |partial.</p>

How do i find all those nodes? (i do not want to find the textnode “Here” in case there is more than one textnodes in the first paragraph! (there could be several!))

Answer 1

Rangy (disclosure: written by me) does this for you:

range.getNodes([3]); // 3 is Node.TEXT_NODE

Otherwise, I’d suggest traversing the DOM of the range’s commonAncestorContainer and for each text node encountered, check whether it overlaps the range by creating a range for the text node (using selectNode()) and using its compareBoundaryPoints() method to compare it to the selection range.