如何获取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＆lt; 9，所有主流浏览器都实现了相同的选择和范围标准，并且已经做了多年。存在一些差异，但API是相同的。如果你不关心IE＆lt; 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节点列表。如果您需要更多信息，请与我们联系。