html - 选择范围 - 获取范围+起始节点+结束节点+距离

Question

从我的previous question选择特定的html文本，我已经通过this link了解html字符串的范围。

用于选择html页面上的特定文本。我们需要遵循这些步骤。

假设的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脚本的范围

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 

进行选择我想这样做的反转方式。我的意思是，假设选择是由用户在浏览器（safari）上完成的。我的问题是我们如何获得起始节点（因为这里有'p节点'）和结束节点（因为我们在这里有'第二个li节点'）以及范围（因为我们在这里有13,17） ？

编辑：我的努力（从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); 
    } 

不过，但我感到困惑越来越像，如果选择的是第一款或第二或第三，或选择在第一个标题或第二个标题或什么...

Answer 1

存储选定的范围很简单。下面将只返回第一个选定的范围（火狐至少支持多种选择）：

<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将具有属性startContainer（包含范围的开始的节点），startOffset（起始容器节点内的偏移量：文本节点中的字符偏移量和元素中的子偏移量），endContainer和endOffset（等同于开始属性的behvaiour）。由its specification和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。