构建一个 :selection 选择器答案

【问题标题】：Building a :selection selector构建一个 :selection 选择器
【发布时间】：2011-10-24 05:32:33
【问题描述】：

我可以查询（在 jQuery 意义上）DOM 元素 - 不只是文本节点 - 完全由鼠标选择吗？

【问题讨论】：

“高亮”到底是什么意思？而且，更重要的是，“部分突出显示”是什么意思？
看看这个：stackoverflow.com/questions/7803016/…
@Randomblue "selected" 是更熟悉的术语...
@Randomblue 考虑:selection
@ŠimeVidas：好主意！我将编辑问题。

【解决方案1】：

这将为您提供所有被完全选中的元素：

var currentSelection = window.getSelection();
var firstRangeInSelection = currentSelection.getRangeAt(0);
var commonAncestor = firstRangeInSelection.commonAncestorContainer;

var nodesInSelection = $(commonAncestor).find("*").filter(function() {
                           return currentSelection.containsNode(this, false);
                       });

有关 DOM 选择的更多信息，请查看this page。

【讨论】：

+1，虽然它会通过一些检查得到改进：首先，IE window.getSelection()，所以你应该检查它是否存在；其次，getRangeAt(0) 会在没有选择任何内容时抛出错误，所以你应该检查currentSelection.rangeCount 是否大于零。
实际上，如果选择完全包含在单个文本节点中会发生什么？我想你会得到一个空的 jQuery 对象。

【解决方案2】：

您可以调整我对以下问题的回答，以返回一个 jQuery 对象而不是一个数组，这应该很简单：

JS: Get array of all selected nodes in contentEditable div

但是，这在 IE Selection 对象。为此，您需要另一种方法。有我自己的 Rangy 库，如该答案中所述，但如果您需要 IE

【讨论】：

@Chris：我指的不是你的回答。我曾假设 OP 需要一个 jQuery 集合而不是一个数组，这就是我链接到的答案所产生的结果。