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!))
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!))
Share Improve this question edited Oct 7, 2011 at 11:39 Tim Down 325k76 gold badges460 silver badges542 bronze badges asked Oct 7, 2011 at 10:04 ThariamaThariama 50.8k13 gold badges145 silver badges174 bronze badges 2- This SO answer might be of use stackoverflow./questions/2477192/… – Narendra Yadala Commented Oct 7, 2011 at 12:01
- thx for the link, but i do not want to enlarge the users selection – Thariama Commented Oct 7, 2011 at 12:07
3 Answers
Reset to default 11Rangy (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 monAncestorContainer 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 pareBoundaryPoints() method to pare it to the selection range.
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.
Hey firend try below code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>payam jabbari</title>
<script src="http://code.jquery./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 ing 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>