确定当前文本选择包含哪些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用选择范围调用它.如果你需要知道确切的文本选择你再猜测基于moveStart/ moveEnd荷兰国际集团的范围和比较,这是不好玩的.