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

Question

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

现在，我明白，window.getSelection（）会给我一个选择对象。此外，在我可以获得属于该选择的节点（HTML元素）列表之前，必须将该选择对象转换为范围对象。

如何获取范围对象？从我读到的，不同的浏览器有不同的范围对象的实现...最初，我只会在谷歌浏览器中使用这个js函数...所以代码应该在谷歌浏览器中完美工作...但我确实希望代码工作横跨谷歌浏览器的所有/大多数新版本...代码可能是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); 
} 

要从范围内获得的节点，你可以从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节点列表。让我知道你是否需要更多信息。