目前我正在浏览器中获取选定的文本：
window.getSelection();
现在我需要在按下自定义键时在该文本上方显示一个工具提示（请注意，鼠标不能再位于文本上），因此为了做到这一点，我需要该选定文本的绝对位置。
有没有办法做到这一点，也许将该文本包装在标签中然后获取偏移量？它只需要在 Chrome 中运行，而不是在所有浏览器中运行。
获取选定的文本位置
IT技术
javascript
html
text
position
selection
2021-02-22 19:25:40
3个回答
s = window.getSelection();
返回一个选择。所以试试
s = window.getSelection();
oRange = s.getRangeAt(0); //get the text range
oRect = oRange.getBoundingClientRect();
oRect 将是客户端（固定）坐标中的边界矩形。
最简单的方法是在选择的开始或结束处插入一个临时标记元素并获取其位置。我之前已经在 Stack Overflow 上演示了如何执行此操作：如何将元素放置在用户文本选择旁边？
在使用之前getBoundingClientRect，你需要知道这个注意事项：
CSSOM 工作草案指定它为每个边框框返回一个 ClientRect
按照这个“标准”：
对于内联元素，这两个定义是相同的。但是对于块元素，Mozilla 只会返回一个矩形。
因此，如果有人阅读这篇文章想要更精确的选定文本的位置和布局的通用解决方案，我建议采用以下方法：
选项 1：通过插入不可见元素来查找文本的确切起点和终点。然后使用提取的计算线高和容器宽度计算选定的线矩形。使用中的 API：window.getComputedStyle。
- 优点：每行文本的结果将是最精确的。
- 缺点：1）如果选择跨多个具有不同线高和宽度的节点，则算法变得复杂。2) 并且需要实现计算算法，实现简单的特征太耗时。
选项 2：用精心设计的内联元素包裹每个文本，提取每个框的布局，并将结果合并成行。
- Pro：适用于所有连续选择（这基本上意味着当前主流浏览器实现中的所有情况。）。每行文本的精度都足够好。
- 缺点：1) 在某些情况下，它的结果有点不准确，因为它增加了字距调整的错误宽度。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}