获取选定的文本位置答案

【问题标题】：Getting selected text position获取选定的文本位置
【发布时间】：2011-07-07 19:11:29
【问题描述】：

目前我正在浏览器中获取选定的文本：

window.getSelection();

现在我需要在按下自定义键时在该文本上方显示一个工具提示（请注意，鼠标不能再位于文本上方），因此我需要该选定文本的绝对位置。

有没有办法做到这一点，也许将该文本包装在标签内，然后获取偏移量？它只需要在 Chrome 中运行，而不是在所有浏览器中运行。

【问题讨论】：

How can I position an element next to user text selection?的可能重复

标签： javascript html text position selection

【解决方案1】：

最简单的方法是在选择的开头或结尾插入一个临时标记元素并获取其位置。我之前在 Stack Overflow 上演示过如何做到这一点：How can I position an element next to user text selection?

【讨论】：

如果这是该问题的重复，那么您不应该投票结束吗？不添加指向另一个答案的答案？
@Liam：我不确定；这些问题并不相同，但回答它们所需的技术是相同的。我不能否认在回答时我正处于最大的重复搜索阶段。

【解决方案2】：

s = window.getSelection();

返回一个选择。所以试试

s = window.getSelection();
oRange = s.getRangeAt(0); //get the text range
oRect = oRange.getBoundingClientRect();

oRect 将是客户端（固定）坐标中的边界矩形。

【讨论】：

Range 的getBoundingClientRect() 方法并没有得到普遍支持，不幸的是，尽管它已经实现了。例如，我认为 IE9 没有它。
这个问题只针对 Chrome。这适用于 Chrome 和 FF。
oRange ...我知道你在那里做了什么:)
看这里，浏览器支持其实很好：caniuse.com/#feat=getboundingclientrect
@HumanA。应该支持 Range.getBoundingClientRect(), developer.mozilla.org/en-US/docs/Web/API/Range/… ，该链接一般说的是 getBoundingClientRect。

【解决方案3】：

在使用getBoundingClientRect之前，你需要知道this note：

CSSOM 工作草案指定它为每个边框框返回一个 ClientRect

按照这个“标准”：

对于内联元素，两个定义是一样的。但是对于块元素，Mozilla 将只返回一个矩形。

因此，如果阅读这篇文章的任何人想要一个通用解决方案以更精确地定位所选文本的位置和布局，我建议以下方法：

选项 1： 查找 inserting invisible elements 文本的确切起点和终点。然后使用提取的计算线高和容器宽度计算选定的线矩形。正在使用的 API：window.getComputedStyle。

专业人士：每行文本的结果都是最精确的。
Con: 1) 如果选择跨越具有不同线高和宽度的多个节点，则算法变得复杂。 2) 并且需要实现计算算法，实现一个简单的特性太耗时了。

选项 2： 用精心设计的内联元素包裹每个文本，提取每个框的布局，并将结果合并为行。

Pro：适用于所有连续选择（这基本上意味着当前主流浏览器实现中的所有情况。）。每行文本的精度都足够好。
Con: 1) 它的结果在某些情况下有点不准确，因为它增加了kerning 的错误宽度。 2）选择大量文本时速度很慢。

对于选项 2，rangeblock 是一个现有的实现，具有简单的 API，可为您提供每行文本的绝对布局：

let block = rangeblock.extractSelectedBlock(window, document);
console.info("Text layout: " + JSON.stringify(block.dimensions));
// output: Text layout: {Left: 100, Top: 90, Width: 200, Height: 50}

【讨论】：