Retrieving character position in case of a mouse over event

Question

I'm looking for a way to retrieve the character position when moving the mouse pointer over a div containing text.

So basically, if this is the text:

The quick brown fox jumps over the lazy dog

and I move my mouse over the first 'b' (in 'brown'), then I would basically like to have the ability to return the position of 'b' in an mouseover event. (In this case, I would need to get the value 10, assuming starting at position 0.)

(O, and if it helps, I would be ok with having a solution for a monospaced font. And I don't really care too much about the character's 'value' at the given position. Like, when I move the value over the 'q', then I don't care to know if it's actually a 'q', but I would love to know that the mouse pointer is currently moving over the 5th character.)

Answer 1

It's really ugly, but you could use

<span onmouseover="setPosition(...)"></span> 

around every character in the <div>, with suitable JavaScript implementation of setPosition().