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

Question

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

现在，我知道 window.getSelection() 会给我一个选择对象。此外，必须先将此选择对象转换为范围对象，然后才能获取属于该选择的节点（HTML 元素）列表。

如何获取范围对象？根据我的阅读，不同的浏览器对范围对象有不同的实现......最初，我将只在 Google Chrome 中使用这个 js 函数......所以代码应该在 Google Chrome 中完美运行......但我确实希望代码能正常工作跨所有/大多数新版本的 Google Chrome... 代码可能是 JS 或纯 Jquery。

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

Answer 1

除了 IE

要获取选择范围内的节点，您可以像这样获取选定范围：

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 节点列表。如果您需要更多信息，请告诉我。