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。