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

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

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

是否可以使用Javascript找出文本中特定字符的位置（在x，y坐标中）？如果没有，我可以得到文本中每行的y位置吗

---

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

标记中有大量文本，因此在每个字符/单词周围添加

将是太多的处理。

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

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

您可以使用范围来查找元素的位置。快速点击这里：

---

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

我同意它可以工作，尽管它需要大量的处理。好主意。我的案子处理得太多了，但解决办法不错。更新的问题反映了这一点。您不需要将每个字符都包含在一个范围内，只需要包含您需要的坐标的字符。一旦得到位置，就可以展开它。不幸的是，由于紧排，在字符周围插入

span

标记实际上可能会影响其坐标。看到这个：@danfuzz很有趣。它还影响韧带（ff，fi）。检查这个：有什么想法吗？@Itsy第二高票的答案（范围）似乎是应该走的路。你是说你需要每个字符+单词的偏移量，而不仅仅是几个特定的？@Rup评论不错。实际上，我只需要文本中每一行的y位置。虽然它是可流动的文本，但不要认为它真的有什么不同。还是更新了问题。也许这对你有帮助：@pimvdb，但这只是执行下面的跨度技巧，但作为一个隐藏元素来测量宽度。我不认为这很容易适用于这一点-除了也许你可以将p的分数粗略地分成几行，并在每行上标记跨距，我认为这对于获取用户点击位置的字符索引很有用，但我认为OP是在寻找像素的x，y坐标。我的错，在我的示例中，我应该更清楚：client rect包含单击发生位置的客户机坐标。这可以很容易地用来瞄准一个特定的角色或一组角色。这太棒了，为什么我没早点找到呢？这正是我想要的。只有一句话，在代码示例中，最好使用类似于

parentElt.childNodes[0]

的内容，而不是

parentElt

，因为在JSFIDLE示例中显示了like，并将文本节点作为参数而不是html元素。谢谢您的回答！我对它进行了修改，以进行二进制搜索，以查找单击的确切字符。我还添加了

style=“空白：预换行”

来处理多个空格

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

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();