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

Question

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

document.getSelection（）会为我们提供当前选中的文本。但是，我们如何确定此文本选择中包含哪些DOM元素？

Answer 1

window.getSelection()会为您提供Selection个对象。使用selection.rangeCount和selection.getRangeAt()获取一个Range对象，表示您想要的选择。

现在，您可以从range.startContainer / startOffset和range.endContainer / endOffset获取选择中的第一个和最后一个节点。然后你可以在树上走来走去，拿起这两个位置之间的所有元素，例如。使用this answer中的getElementsBetweenTree()函数。

不幸的是，IE的TextRange模型与W3和HTML5标准完全不同，而且通常更糟糕。它几乎不会轻易放弃起点和终点位置，也不会以任何可靠的方式放弃。所有你得到的是parentElement告诉你共同的祖先，从那里你只能猜测范围的基础是创建一个新范围并在其上调用moveToElementText然后compareEndPoints选择范围。如果您需要知道确切的文本选择，那么您将根据moveStart / moveEnd范围进行猜测并进行比较，这根本不是很有趣。