1

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

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

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

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

4

2 回答 2

3

除了 IE < 9，所有主流浏览器都实现了相同的选择和范围标准，并且已经这样做了多年。有一些差异，但 API 是相同的。如果您不介意 IE < 9，那么您真的不需要使用 Rangy（在 gzip 压缩之前它大约 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();
}
于 2012-07-25T08:43:27.867 回答
0

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

于 2012-07-25T08:10:57.887 回答