如何获取元素中文本的位置？

IT技术 javascript html
2021-01-25 09:17:55

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

<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>在每个字符/单词周围添加太多处理。

3个回答

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

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

这么厉害，我怎么不早点发现呢？
2021-03-23 09:17:55
这对于获取用户单击位置的字符索引很有用，但我认为 OP 正在寻找以像素为单位的 x,y 坐标。
2021-03-26 09:17:55
这正是我正在寻找的。只有一个评论，而不是parentElt在您的代码示例中，最好使用类似的内容，parentElt.childNodes[0]因为 like 显示在您的 jsfiddle 示例中range.setStart，range.setEnd并将文本节点作为参数而不是 html 元素。
2021-03-26 09:17:55
谢谢你的回答！我修改它以进行二分搜索以找到单击的确切字符。我还添加style="white-space: pre-wrap"了处理多个空间jsfiddle.net/bomelino/fmx5awy2/58
2021-04-07 09:17:55
我的错，我应该在我的例子中更清楚：客户端矩形包含点击发生位置的客户端坐标。这可以很容易地用于定位特定字符或字符集。
2021-04-13 09:17:55

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

在我的情况下处理太多，但很好的解决方案。更新了问题以反映这一点。
2021-03-17 09:17:55
不幸的是，由于字距调整，span在字符周围插入标签可能会实际影响其坐标。例如看这个：jsfiddle.net/4p4uw94h
2021-03-19 09:17:55
@ithcy 投票率第二高的答案（范围）似乎是要走的路。
2021-03-26 09:17:55
您不需要将每个字符都包装在一个跨度中，只需将您需要的坐标包装起来。获得位置后，您可以打开它。
2021-03-28 09:17:55
@danfuzz 非常有趣。它也会影响连字 (ff, fi)。检查这个：jsfiddle.net/x4zjcbft 有什么想法吗？
2021-04-12 09:17:55

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

我同意它会起作用，尽管对于我需要它的处理太多了。不过这个主意不错。
2021-03-25 09:17:55
其它你可能感兴趣的问题
上一篇区分+0和-0 下一篇如何使用 JavaScript 获取 <textarea > 中的行数？