Javascript 获取选定的文本位置

目前，我正在浏览器中获取所选文本，执行以下操作：

window.getSelection();

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

---

有没有一种方法可以做到这一点，可能是将文本包装在标记中，然后获得偏移量？它只需在Chrome浏览器中工作，而不是在所有浏览器中。

最简单的方法是在选择的开始或结束处插入一个临时标记元素，并获取其位置。在堆栈溢出之前，我已经演示了如何执行此操作：

返回所选内容。所以试试看

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

---

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

在使用

getBoundingClientRect

之前，您需要知道：

CSSOM working draft指定它为每个边框框返回一个clienter

根据这个‘标准’：

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

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

选项1:通过查找文本的精确起点和终点。然后使用提取的计算行高度和容器宽度计算选定的行矩形。正在使用的API:

• 赞成：每行文本的结果都是最精确的
• 缺点：1）如果选择跨越多个具有不同线高度和宽度的节点，则算法会变得复杂。2） 您需要实现计算算法，这在实现简单功能时太耗时了

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

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

对于选项2，是一个带有easy 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}

---

不幸的是，Range的

getBoundingClientRect（）

方法并没有得到普遍支持，尽管它正在得到广泛支持。例如，我不认为IE9有，问题是只针对Chrome。这在Chrome和FF中工作。

橙色

。。。我知道你在那里做了什么：）看看这里，浏览器支持其实很好：@HumanA。支持范围应为Range.getBoundingClientRect（），该链接通常说明getBoundingClientRect。可能重复的如果这是该问题的重复，那么您是否应该投票关闭？没有添加指向另一个答案的答案？@Liam：我不确定；这些问题并不相同，但回答它们所需的技巧是相同的。我不能否认，在回答问题的时候，我正处于寻找代表的最佳阶段。

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}