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 <div> element, but it could be a <span>, <p>, or other DOM element.

<div>This is a simple example.</div>

When clicked, I can get the position of the cursor on the surface of the div, but I need to determine the position of the nearest character and/or its index into the div.innerHTML string at the time of the click.

I found a similar implementation in the "getCharNumAtPosition" method in SVG text entities here.

Is it possible to implement such a function in JavaScript that works with HTML?

(Solutions would be most useful if they are portable across most modern browsers, work with most written languages, and are based on relatively stable standards so that they will not become buggy later.)

Answer 1

$('div').click( function () {
  getSelectionPosition (); 
});


function getSelectionPosition () {
  var selection = window.getSelection();
  console.log(selection.focusNode.data[selection.focusOffset]);
  alert(selection.focusOffset);
}

This works with "click", as well as with a "range" for most browsers. (selection.type = "caret" / selection.type = "range").

selection.focusOffset() gives you the position in the inner node. If elements are nested, within <b> or <span> tags for example, it will give you the position inside the inner element, not the full text, more or less. I'm unable to "select" the first letter of a sub tag with focusOffset and "caret" type (click, not range select). When you click on the first letter, it gives the position of the last element before the start of tag plus 1. When you click on the second letter, it correctly gives you "1". But I didn't find a way to access the first element (offset 0) of the sub element. This "selection/range" stuff seems buggy (or very non-intuitive to me). ^^

But it's quite simple to use without nested elements! (Works fine with your <div>)

Here is a fiddle

Important edit 2015-01-18:

This answer worked back when it was accepted, but not anymore, for reasons given below. Other answers are now most useful.

• Matthew's general answer
• The working example provided by Douglas Daseeco.

Both Firefox and Chrome debugged window.getSelection() behavior. Sadly, it is now useless for this use case. (Reading documentation, IE 9 and beyond shall behave the same).

Now, the middle of a character is used to decide the offset. That means that clicking on a character can give back 2 results. 0 or 1 for the first character, 1 or 2 for second, etc.

I updated the JSFiddle example.

Please note that if you resize the window (Ctrl + mouse), the behavior is quite buggy on Chrome for some clicks.

Answer 2

You could, using JavaScript, break each character into it's own SPAN tag and add an onclick event for each. Then, read the x, y position from the event data when the SPAN is clicked.

As well, you will have access to the character clicked with event.target.innerHTML

Answer 3

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):

<div onclick='magic(this)'>T​h​i​s​ ​i​s​ ​a​ ​s​i​m​p​l​e​ ​e​x​a​m​p​l​e​.</div>

Sample javascript code:

<script>
    function magic(e)
    {
        var s, p, c;
        s = e.innerHTML;
        p = window.getSelection().focusOffset;
        c = s.charAt((p >> 1) << 1);
        alert("index:" + (p >> 1) + " char: " + c);
    }
</script>

Seems to work widely, even on internet explorer!

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