获取元素内文本的位置

如果我有一个元素,例如:

<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>

并且这流过了多条线路:

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

是否可以使用JavaScript找出文本中某个特定字符的位置(x,y坐标)? 如果没有这个,我可以得到流动文本中每行的y位置?

请注意 :我的应用程序中的<p>标记中有很多文本,因此在每个字符/单词周围添加<span>会导致处理过多。


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


您可以使用范围来查找元素的位置。 快速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();

编辑:修改为打印出匹配矩形的坐标


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

链接地址: http://www.djcxy.com/p/15615.html

上一篇: Get the position of text within an element

下一篇: How to recalculate x,y coordinates based on screensize