html - 选择范围 - 获取范围+起始节点+结束节点+距离 [英] html - selection range - getting the range + starting node + ending node + distance
问题描述
从我的上一个问题中选择特定的HTML文本，我已经通过此链接了解html字符串的范围。
用于选择特定文本在html页面上。我们需要按照这个步骤操作。
假设HTML：
< ; h4 id =entry1196>< a
href =http://radar.oreilly.com/archives/2007/03/call_for_a_blog_1.html
class =external>呼吁Blogger的行为准则< / a>< / h4>
< p> Tim O'Reilly要求提供Blogger行为准则。他的建议是：< / p>
< li>不仅负责您自己的话，还负责您在博客上允许的
评论。< / li>
< li>为辱骂性评论标记容忍度级别。< / li>
< li>考虑消除匿名评论。< / li>
< / ol>
按范围进行选择的Java脚本
var range = document.createRange（）; //创建范围
var startPar = [p节点]; //开始参数
var endLi = [第二个li节点]; //结束参数
range.setStart（startPar，13）; //距起始参数的距离。
range.setEnd（endLi，17）; //距离结束参数的距离
range.select（）; //这个语句将会选择
我想以反向的方式做到这一点。我的意思是，假设选择是由用户在浏览器（safari）上完成的。我的问题是我们如何获得起始节点（因为这里有'p节点'）和结束节点（因为我们在这里有'第二个li节点'）以及范围（因为我们在这里有13,17） ？
编辑：我的努力（来自这个问题）
var sel = window.getSelection（）;
if（sel.rangeCount< 1）{
return;
}
var range = sel.getRangeAt（0）;
var startNode = range.startContainer，endNode = range.endContainer;
//根据需要拆分开始和结束容器文本节点
if（endNode.nodeType == 3）{
endNode.splitText（range.endOffset）;
range.setEnd（endNode，endNode.length）;
if（startNode.nodeType == 3）{
startNode = startNode.splitText（range.startOffset）;
range.setStart（startNode，0）;
}
但是，我很困惑，如果选择第一段或第二或第三，或选择是在第一个标题或第二个标题或什么....
存储选定的范围很简单。以下将只返回第一个选择的范围（Firefox至少支持多选）：
< script type =text /的javascript>
函数getSelectionRange（）{
var sel;
if（window.getSelection）{
sel = window.getSelection（）;
if（sel.rangeCount）{
return sel.getRangeAt（0）;
}
} else if（document.selection）{
return document.selection.createRange（）;
}
返回null;
}
var range;
< / script>
< input type =buttononclick =range = getSelectionRange（）;
value =商店选择>
范围的属性 startContainer （包含范围开始的节点）， startOffset （起始容器节点内的偏移量：个案中的字符偏移量的文本节点和子元素偏移）， endContainer 和 endOffset （相当于behvaiour到开始属性）。 范围由其规范和 MDC 。
在IE中， range 将包含一个 TextRange ，它的工作原理非常不同。 TextRanges不是节点和偏移量，而是关注字符，单词和句子。微软的网站有一些文档： http://msdn.microsoft .com / en-us / library / ms533042％28VS.85％29.aspx ， http://msdn.microsoft.com/en-us/library/ms535872%28VS.85%29.aspx 。
From my previous question for selecting specific html text, I have gone through this link to understand range in html string.
For selecting a specific text on html page. We need to follow this steps.
Assumed HTML:
<h4 id="entry1196"><a
href="http://radar.oreilly.com/archives/2007/03/call_for_a_blog_1.html"
class="external">Call for a Blogger's Code of Conduct</a></h4>
<p>Tim O'Reilly calls for a Blogger Code of Conduct. His proposals are:</p>
<ol>
<li>Take responsibility not just for your own words, but for the
comments you allow on your blog.</li>
<li>Label your tolerance level for abusive comments.</li>
<li>Consider eliminating anonymous comments.</li>
</ol>
java script to make selection by range
var range = document.createRange(); // create range
var startPar = [the p node]; // starting parameter
var endLi = [the second li node]; // ending parameter
range.setStart(startPar,13); // distance from starting parameter.
range.setEnd(endLi,17); // distance from ending parameter
range.select(); // this statement will make selection
I want to do this in invert way. I mean, assume that selection is done by user on browser (safari). My question is that How can we get starting node (as we have 'the p node' here) and ending node (as we have 'the second li node' here) and the range as well (as we have 13,17 here)?
Edit : my efforts (From this question)
var sel = window.getSelection();
if (sel.rangeCount < 1) {
return;
}
var range = sel.getRangeAt(0);
var startNode = range.startContainer, endNode = range.endContainer;
// Split the start and end container text nodes, if necessary
if (endNode.nodeType == 3) {
endNode.splitText(range.endOffset);
range.setEnd(endNode, endNode.length);
}
if (startNode.nodeType == 3) {
startNode = startNode.splitText(range.startOffset);
range.setStart(startNode, 0);
}
But, yet I am confused about getting like, if selected is first paragraph or second or third, or selected is in first heading or second heading or what....
Storing the selected range is simple. The following will return only the first selected range (Firefox at least supports multiple selections):
<script type="text/javascript">
function getSelectionRange() {
var sel;
if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount) {
return sel.getRangeAt(0);
}
} else if (document.selection) {
return document.selection.createRange();
}
return null;
}
var range;
</script>
<input type="button" onclick="range = getSelectionRange();"
value="Store selection">
range will have properties startContainer (the node containing the start of the range), startOffset (an offset within the start container node: a character offset in the case of text nodes and child offset in elements), endContainer and endOffset (equivalent behvaiour to the start properties). Range is well documented by its specification and MDC.
In IE, range will contain a TextRange, which works very differently. Rather than nodes and offsets, TextRanges are concerned with characters, words and sentences. Microsoft's site has some documentation: http://msdn.microsoft.com/en-us/library/ms533042%28VS.85%29.aspx, http://msdn.microsoft.com/en-us/library/ms535872%28VS.85%29.aspx.
这篇关于html - 选择范围 - 获取范围+起始节点+结束节点+距离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
