Get position of word from html code given its start and end index calculated from

[bsmetri]

I have

contenteditable

div and would like to know the index of character typed in it with respect to html code.
For example:

<div id="editableDiv" contenteditable="true">
    the @twitter
</div>

The sentence is formatted like this: the @twitter
I can calculate the string position in sentence using below sentence. This is called once @ keyed down (start index) and on space bar key down (end index - 1)

getCaretPosition : function(){
       var element = document.getElementById("editableDiv");
       var caretOffset = 0;
       if (typeof window.getSelection != "undefined") {
            var range = window.getSelection().getRangeAt(0);
            var preCaretRange = range.cloneRange();
            preCaretRange.selectNodeContents(element);
            preCaretRange.setEnd(range.endContainer, range.endOffset);
            caretOffset = preCaretRange.toString().length;
        } else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
            var textRange = document.selection.createRange();
            var preCaretTextRange = document.body.createTextRange();
            preCaretTextRange.moveToElementText(element);
            preCaretTextRange.setEndPoint("EndToEnd", textRange);
            caretOffset = preCaretTextRange.text.length;
        }
        return caretOffset;
    }

Start index is 5 and end index is 12 for the word @twitter in above sentence.

I would now like to get the index of the same word from innerHTML of the div

editableDiv

.

InnerHTML:

<b>the</b> @twitter

Input index of the word @twitter: (5,12)
Output ->
start Index : 12
end index: 19