javascript string clicked position

Question

Hello all, If I have a string in a div

<div id="article">
 lots of text goes here
<strong> it's really interesting</strong>
and it's free to read
</div>

if a user double click or single click on a particular word, is there a way to determine the position/index of the character clicked?

If that cannot be done, how about determining how many space character there are before the clicked position. So if I click on the word 'goes' in the above example, it returns 3 because there are three spaces before the word goes which is clicked.

Thank You very much for your time.

Answer 1

The ugly hack solution to such a problem involves programming converting the characters into event capturing objects.

For instance

<div id="article">
<span>lots </span><span>of </span><span>text</span>...
</div>

Now this can be done programmatically. You can grab whatever the current content of a div and convert it to something like the formatting above. Then attach event handlers to the contained spans which count the number of spans preceding it in the same container.

Answer 2

a way to determine the position/index of the character clicked

Well, first I need to use a fixed width size font like Courier. Then, I'd create two span with only a char each. With those two, I should be able to know the width of a char (beware padding and margin) and its height. Then, you need to know your upper left coordinates for your div whose id is 'article' and capture click event with event.x and event.y.

After that,

var line = (event.x - divLeft) / charHeight; 
var column = (event.y - divTop) / charWidth;