How can i get all text nodes inside a dom range?
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!))
3 answers
solution1
11 ACCPTED 2011-10-07 11:29:27
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.
solution2
4 2011-10-07 12:27:15
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.
solution3
1 2014-03-04 11:59:27
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.