如何获得dom范围内的所有文本节点？

我正在使用实时编辑器，需要查找用户选择范围内的所有文本节点。如何获得dom范围内的所有文本节点？

例（以下简称“|”商标的选择范围开始和结束点）：

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

如何找到所有的节点？（我不想在第一段中有多个文本节点时找到textnode“Here”！（可能有几个！））

来源

2011-10-07 Thariama

这SO答案可能是使用的http://stackoverflow.com/questions/2477192/use-javascript-to-extend-a-dom-range-to- cover-partially-selected-nodes/2477306＃2477306 –

thx为链接，但我不想放大用户选择 – Thariama

Rangy（披露：由我撰写）为您做到这一点：

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

否则，我会建议遍历范围的commonAncestorContainer的DOM和遇到的每个文本节点，检查它是否重叠的范围内通过创建文本节点的范围（使用selectNode()），并利用其compareBoundaryPoints()方法将其与选择范围进行比较。

来源

2011-10-07 11:29:27

Rangy真棒。 –

rangy听起来不错，但我必须尽可能少地使用图书馆。对于非rangy方法，我获得了commonAncestorContainer的所有文本节点，但是我无法使该函数工作，以决定给定的文本节点是否在范围内。有什么建议么？ – Thariama

@Thariama：''rangIntersectsNode（）'函数可能在这里回答可能有所帮助：http://stackoverflow.com/questions/1482832/javascript-how-to-get-all-elements-that-are-highlighted/1483487# 1483487 –

假设您只想消除未选中的文本节点，这可能适用于您。

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

这使串"selection."和叶关闭未选中的文本。您可以使用range.endContainer做同样的事情现在，如果您对节点感兴趣而不是选定的文本，则可以使用此文本创建文本节点。

来源

2011-10-07 12:27:15

真棒这正是我所需要的我的情况 – Acquire

嘿的友情尝试下面的代码

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

来源

2014-03-04 11:59:27

此方法返回节点的克隆，而不是范围中的实际节点。 – moomoo

如何获得dom范围内的所有文本节点？

回答

相关问题