获取元素中文本的位置

If I have an element, for instance:

如果我有一个元素，例如：

<p>Lorem ipsum dolor sit amet, ante risus massa adipiscing quisque quis. At mauris tellus in, sed vehicula integer fermentum rhoncus at faucibus, in vitae purus. Maecenas in vel ligula orci tellus ac, fringilla conubia lorem elit. Dui nulla sodales morbi vel. Massa sed viverra. Maecenas imperdiet donec urna a, ligula sed</p>

And this flowed across multiple lines:

这涉及多条线：

Lorem ipsum dolor sit amet, ante risus massa adipiscing
quisque quis. At mauris tellus in, sed vehicula integer
fermentum rhoncus at faucibus, in vitae purus. Maecenas
in vel ligula orci tellus ac, fringilla conubia lorem
elit. Dui nulla sodales morbi vel. Massa sed viverra.
Maecenas imperdiet donec urna a, ligula sed

Is it possible to find out the position (in x,y coords) of a particular character in the text using JavaScript? Failing this could I get the y position of each line in the flowed text?

是否有可能使用JavaScript找出文本中特定字符的位置（x，y坐标）？如果不这样，我可以在流动的文本中获得每行的y位置吗？

Please note: There is a lot of text in the <p> tag in my application, so adding <span> around each character/word would be too much processing.

请注意：我的应用程序中的

标记中有很多文本，因此在每个字符/单词周围添加将会处理太多。

3 个解决方案

#1

If you know the string position of the character in the text, you can wrap the character in a <span> or similar element with an ID and find the x,y coords of that element. Easiest way to do this is with jQuery or another library, see this answer for a cross-browser, no-library method.

如果您知道文本中字符的字符串位置，则可以将字符包装在带有ID的或类似元素中，并找到该元素的x，y坐标。最简单的方法是使用jQuery或其他库，请参阅此答案，了解跨浏览器，无库方法。

#2

You can use ranges to find the position of elements. Quick jsfiddle here: https://jsfiddle.net/abrady0/ggr5mu7o/

您可以使用范围来查找元素的位置。快速jsfiddle在这里：https：//jsfiddle.net/abrady0/ggr5mu7o/

var range = document.createRange();
range.setStart(parentElt, start);
range.setEnd(parentElt, end);
// These rects contain the client coordinates in top, left
var rects = range.getClientRects();

Edit: modified to print out the coordinates of the matched rect

编辑：修改为打印出匹配的rect的坐标

#3

Idea i get is - get all the text , pack required substring into span-s , replace innerHTML of element , and get position of span-s

我得到的想法是 - 获取所有文本，将所需的子字符串打包到span-s中，替换element的innerHTML，并获取span-s的位置

#1

#2