如何获取window.getSelection(）的范围对象

How to obtain range object for window.getSelection()?

本文关键字：范围 对象 getSelection window 获取 何获取      更新时间：2024-01-31

在js函数中，当用户选择了网页中的内容时，我想获得作为该内容一部分的所有节点（HTML元素）。

现在，我知道window.getSelection（）会给我一个选择对象。此外，这个选择对象必须转换为范围对象，然后我才能获得作为该选择一部分的节点（HTML元素）列表。

如何获取范围对象？据我所知，不同的浏览器对范围对象有不同的实现。。。最初，我只会在Google Chrome中使用这个js函数。。。所以代码应该在谷歌浏览器中完美工作。。。但我确实希望该代码适用于所有/大多数新版本的谷歌Chrome。。。代码可以是JS，也可以是纯Jquery。

还有一个问题——我必须使用像"Rangy"这样的js库吗http://code.google.com/p/rangy/为了这个目的？或者这可以使用纯js或jquery代码来实现吗？

除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();
}

我可以看到，您面临的问题不是获取范围对象，而是在选择中查找HTML节点。在这个演示中，如果您选择文本并单击"获取选择html"按钮，您将获得包含DOM的所选文本。一旦得到了它，就可以使用jquery代码找到DOM节点的列表。如果你需要更多信息，请告诉我。

相关文章：