4

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!))

Tim Down
  • 318,141
  • 75
  • 454
  • 536
Thariama
  • 50,002
  • 13
  • 138
  • 166

3 Answers3

11

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.

Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • rangy sounds good, but i have to work with as few libraries as possible. For the non-rangy approach i got all textnodes of the commonAncestorContainer, but i am not able to make the function work that decides if a given text node is in the range. Any suggestions? – Thariama Oct 07 '11 at 11:58
  • 1
    @Thariama: The `rangIntersectsNode()` function from may answer here may help: http://stackoverflow.com/questions/1482832/javascript-how-to-get-all-elements-that-are-highlighted/1483487#1483487 – Tim Down Oct 07 '11 at 12:59
  • Can I assume that's `3` as in `Node.ELEMENT_NODE` (which equals 3)? – Lori Oct 17 '15 at 23:50
  • 1
    @Lori: Well, it's `TEXT_NODE` rather than `ELEMENT_NODE` but yes. Old versions of IE (<= 8, I think) don't have the node constants, hence I use the number instead. – Tim Down Oct 19 '15 at 09:41
5

Assuming you are interested only in eliminating the text nodes that are not selected, this might work for you.

 var selectedTextOfFirstNode = '';
 //for simplicity assuming one selected range
 var range = window.getSelection().getRangeAt(0);
 if (range.startContainer.nodeType == 3)   
     selectedTextOfFirstNode = range.startContainer.textContent
                                           .substring(range.startOffset);

This gives the string "selection." and leaves off the text that is not selected. You can do the same thing with range.endContainer Now you can create text nodes using this text if you are interested in nodes and not the text that is selected.

Narendra Yadala
  • 9,554
  • 1
  • 28
  • 43
0

Hey firend try below code

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>payam jabbari</title>
<script src="http://code.jquery.com/jquery-2.0.2.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){
    var startNode = $('p.first').contents().get(0);
var endNode = $('span.second').contents().get(0);
var range = document.createRange();
range.setStart(startNode, 0);
range.setEnd(endNode, 5);
var selection = document.getSelection();
selection.addRange(range);
// below code return all nodes in selection range. this code work in all browser
var nodes = range.cloneContents().querySelectorAll("*");
for(var i=0;i<nodes.length;i++)
{
   alert(nodes[i].innerHTML);
}
});
</script>
</head>

<body>
<div>

<p class="first">Even a week ago, the idea of a Russian military intervention in Ukraine seemed far-fetched if not totally alarmist. But the arrival of Russian troops in Crimea over the weekend has shown that he is not averse to reckless adventures, even ones that offer little gain. In the coming days and weeks</p>

<ol>
    <li>China says military will respond to provocations.</li>
    <li >This Man Has Served 20 <span class="second"> Years—and May Die—in </span> Prison for Marijuana.</li>
    <li>At White House, Israel's Netanyahu pushes back against Obama diplomacy.</li>
</ol>
</div>
</body>
</html>
payam jabbari
  • 19
  • 1