如何獲取window.getSelection（）的範圍對象？

Question

在js函數中，當用戶選擇了內容時，我想要獲取作爲網頁內容一部分的所有節點（HTML元素）。

現在，我明白，window.getSelection（）會給我一個選擇對象。此外，在我可以獲得屬於該選擇的節點（HTML元素）列表之前，必須將該選擇對象轉換爲範圍對象。

如何獲取範圍對象？從我讀到的，不同的瀏覽器有不同的範圍對象的實現...最初，我只會在谷歌瀏覽器中使用這個js函數...所以代碼應該在谷歌瀏覽器中完美工作...但我確實希望代碼工作橫跨谷歌瀏覽器的所有/大多數新版本...代碼可能是JS或純粹的Jquery。

還有一個問題 - 我必須使用像「Rangy」這樣的js庫 - http://code.google.com/p/rangy/爲此目的嗎？或者可以使用純js或jquery代碼來實現？

Answer 1

除了IE瀏覽器< 9之外，所有主流瀏覽器都採用相同的選擇和範圍標準，並且已經完成了多年。有一些差異，但API是相同的。如果您對IE < 9沒有困擾，那麼您確實不需要使用Rangy（它在gzipping之前大約40KB），儘管它確實有一個獲取節點的方便方法，您可能會發現它有幫助。

要獲得選區內的節點，就可以得到所選擇的範圍是這樣的：

var sel = window.getSelection(); 
if (sel.rangeCount > 0) { 
    var range = sel.getRangeAt(0); 
} 

要從範圍內獲得的節點，你可以從this answer使用的代碼。如果你使用了Rangy，那將是

var sel = rangy.getSelection(); 
if (sel.rangeCount > 0) { 
    var range = sel.getRangeAt(0); 
    var nodes = range.getNodes(); 
} 

Answer 2

我可以看到您面臨的問題不是獲取範圍對象，而是找到選擇內的HTML節點。在this demo中，如果您選擇文本並單擊「獲取選擇HTML」按鈕，則會顯示包含DOM的選定文本。一旦你得到了，你可以找到一個使用jQuery代碼的DOM節點列表。讓我知道你是否需要更多信息。