Get the coordinates of a word

Question

In my HTML, I have a paragraph that contains a lot of text.

<p>
    ... abc ...
    ... def ...
    ... ghi ...
    ... jkl ...
    ... mno ...
</p>

What I want now is to be able to get the position in X and Y coordinates of h in the third line. I have searched all over the web, but I can't find it. How would I do this?

Answer 1

Create a Range containing just the character in question (up to you how you do this; I'd suggest something like searching through all the text nodes in your paragraph until you find the one you want) and call its getBoundingClientRect() method.