在可编辑的div中找到当前的插入符号位置？

Question

I have a contenteditable div . I want to colorize specific text (which is like A4 , D12 etc) while typing.

So on each keypress i check the content of div , find out the tokens(A4,D11 etc) and wrap them into span .

So abcd+A6 will get converted as abcd+<span color=#some-color>A6</span>

Now i want to know the current caret position. Let say cursor is after A inside the span ,

but when i do

sel=window.getSelection()
pos = sel.anchorOffset

i am getting pos=1 that is the position of the caret in the span element But i want the caret positon relative to the div element (it should be pos=6 in this case)

Any help would be appreciated.

Answer 1

Try this:

sel = window.getSelection();
pos = sel.focusOffset;

You can see more here