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

Question

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

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

我如何獲得范圍對象？ 從我讀到的，不同的瀏覽器有不同的范圍對象實現...最初，我將只在谷歌Chrome中使用這個js功能...所以代碼應該在谷歌Chrome中完美運行...但我確實希望代碼有效跨所有/大多數新版Google Chrome ...代碼可能是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);
}

要從范圍中獲取節點，您可以使用此答案中的代碼。 如果您使用Rangy，那就是

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

Answer 2

我可以看到您面臨的問題不是獲取范圍對象，而是查找選擇內的HTML節點。 在本演示中 ，如果您選擇文本並單擊“獲取選擇html”按鈕，則會獲得包含DOM的選定文本。 一旦你得到它，你可以使用jquery代碼找到DOM節點列表。 如果您需要更多信息，請與我們聯系。