Determine the position index of a character within an HTML element when clicked

Question

I have an HTML element with only visible text inside. This example is a

element, but it could be a ,

Answer 1

In many cases, a possible solution can be to add zero-width space character (U+200B) between each char of the content of the tag. Then using javascript window.getSelection().focusOffset + some simple computations does the job.

Sample html code (including zero-width space characters):

T​h​i​s​ ​i​s​ ​a​ ​s​i​m​p​l​e​ ​e​x​a​m​p​l​e​.

Sample javascript code:

Seems to work widely, even on internet explorer!

jsFidle: http://jsfiddle.net/by1a9pfm/