确定当前文本选择包含哪些 DOM 元素

Question

我希望能够找出用户当前在浏览器中选择的文本中存在哪些 DOM 元素。

document.getSelection() 将为我们获取当前选定的文本。但是我们如何确定该文本选择中包含哪些 DOM 元素呢？

Answer 1

window.getSelection()

为您提供一个 Selection 对象。使用

selection.rangeCount

和

selection.getRangeAt()

获取代表您想要的选择的 Range 对象。

现在您可以从

range.startContainer

/

startOffset

和

range.endContainer

/

endOffset

获取选择中的第一个和最后一个节点。然后，您可以在树上走来走去，拾取这两个位置之间的所有元素，例如。使用

这个答案

中的getElementsBetweenTree()功能。

不幸的是，IE 的 TextRange 模型与 W3 和 HTML5 标准完全不同，而且总体来说要差得多。它几乎不会轻易放弃开始和结束位置，而且不会以任何可靠的方式放弃。你得到的只是

parentElement

来告诉你共同的祖先，从那里你只能猜测范围是基于创建一个新的范围并调用

moveToElementText

，然后使用选择范围调用

compareEndPoints

。如果您需要知道确切的文本选择，那么您就需要根据范围和比较进行猜测，这一点也不有趣。

包含节点

Answer 2

要知道某个 DOM 元素是否在选择范围内，可以使用如下方法： moveStart

或者如果您想检查当前正在选择哪些元素，您可以尝试以下操作：

moveEnd

黑客快乐..！ 🙂👍