JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable=true>
    some example text <a>anchor tag</a>&nbsp;


</div>

CSS

div{width:300px; height:100px; border:solid 1px #DDD;}
div a{background:#333; color:#FFF;}

JavaScript

function getCaretPosition(editableDiv) {
    var caretPos = 0, containerEl = null, sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            if (range.commonAncestorContainer.parentNode == editableDiv) {
                caretPos = range.endOffset;
            }
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        if (range.parentElement() == editableDiv) {
            var tempEl = document.createElement("span");
            editableDiv.insertBefore(tempEl, editableDiv.firstChild);
            var tempRange = range.duplicate();
            tempRange.moveToElementText(tempEl);
            tempRange.setEndPoint("EndToEnd", range);
            caretPos = tempRange.text.length;
        }
    }
    return caretPos;
}



$('div').keyup(function(){
   alert(getCaretPosition(this));
});