Javascript 如何获取dom范围内的所有文本节点？_Javascript_Jquery_Html_Dom_Range

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

javascript jquery html dom

Javascript 如何获取dom范围内的所有文本节点？,javascript,jquery,html,dom,range,Javascript,Jquery,Html,Dom,Range,我正在使用实时编辑器，需要查找用户选择范围内的所有文本节点示例（“|”标记选择范围的起点和终点）：这里开始|选择这完全在范围之内这只是局部的我如何找到所有这些节点？（如果第一段中有多个textnode，我不想在这里找到textnode！（可能有几个！））（披露：由我编写）这是为您做的： range.getNodes([3]); // 3 is Node.TEXT_NODE 否则，我建议遍历范围的commonAncestorContainer的DOM，对于遇到的每个文本节点，通过为文

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

示例（“|”标记选择范围的起点和终点）：

这里开始|选择
这完全在范围之内
这只是局部的

我如何找到所有这些节点？（如果第一段中有多个textnode，我不想在这里找到textnode！（可能有几个！））

（披露：由我编写）这是为您做的：

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

否则，我建议遍历范围的

commonAncestorContainer

的DOM，对于遇到的每个文本节点，通过为文本节点创建一个范围（使用

selectNode（）

）并使用其

compareBundaryPoints（）检查它是否与范围重叠

方法将其与选择范围进行比较。

假设您只对删除未选择的文本节点感兴趣，这可能适用于您

 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

执行相同的操作。现在，如果您对节点而不是所选文本感兴趣，您可以使用此文本创建文本节点。

嘿，请尝试下面的代码

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


帕亚姆·贾巴里
$（文档）.ready（函数（）{
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（）；
选择。添加范围（范围）；
//下面的代码返回选择范围内的所有节点。此代码适用于所有浏览器
var nodes=range.cloneContents（）.queryselectoral（“*”）；
对于（var i=0；irangy听起来不错，但我必须使用尽可能少的库。对于非rangy方法，我获得了commonAncestorContainer的所有textnodes，但我无法使决定给定文本节点是否在范围内的函数工作。有什么建议吗？@Thariama:therangIntersectsNode（）
函数可能会在这里回答：我可以假设这是节点中的3
。元素节点
（等于3）？@Lori:嗯，这是文本节点
，而不是元素节点，但是是的。IE的旧版本（此答案可能对链接有用，但我不想放大用户选择。此方法返回节点的克隆，而不是范围内的实际节点。
    <!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>