Retrieving character position in case of a mouse over event

I'm l开发者_JAVA百科ooking 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.)

It's really ugly, but you could use

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

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

That's an interesting question. It's a difficult one though, since you may have invisible characters (think formating, like

 <b> some text </b> more text

for example, that's already 7 characters' offset in your file).

I think the easiest path towards a solution uses a Javascript method applied only to the displayed characters inside the div. Maybe a well-wrought regexp can do that.

Edit: no, do NOT use a regexp to do that. It's dangerous for your sanity.