function getcaretPosition(element) {
    var caretOffset = 0;
    var doc = element.ownerDocument || element.document;
    var win = doc.defaultView || doc.parentWindow;
    var sel;
    if (typeof win.getSelection != "undefined") {
        sel = win.getSelection();
        if (sel.rangeCount > 0) {
            var range = win.getSelection().getRangeAt(0);
            var preCaretRange = range.cloneRange();
            preCaretRange.selectNodeContents(element);
            preCaretRange.setEnd(range.endContainer,range.endOffset);
            caretOffset = preCaretRange.toString().length;
        }
    } else if ( (sel = doc.selection) && sel.type != "Control") {
        var textrange = sel.createRange();
        var preCarettextrange = doc.body.createtextrange();
        preCarettextrange.moveToElementText(element);
        preCarettextrange.setEndPoint("EndToEnd",textrange);
        caretOffset = preCarettextrange.text.length;
    }
    return caretOffset;
}

function SetCaretPosition(el,pos) {
  for (var node of el.childNodes) {
    if (node.nodeType == 3) {
      if (node.length >= pos) {
        var range = document.createRange(),sel = window.getSelection();
        range.setStart(node,pos);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
        return -1;
      } else {
        pos -= node.length;
      }
    } else {
      pos = SetCaretPosition(node,pos);
      if (pos == -1) {
        return -1;
      }
    }
  }
  return pos;
}

window.clickA = function() {
  let input = document.getElementById("div_id");
  var replacer = "Hello guy!";
  var replacer_tags = ['<span contenteditable="false" class="tagged-user" id="0">','</span>'];
  input.focus()
  var caretPos = getcaretPosition(input);
  let all = input.innerText;
  var len = input.innerText.length
  var behind = all.substring(0,caretPos)
  var after  = all.substring(caretPos,len)
  let text = replacer_tags.join(replacer) + '&nbsp;'
  let str = behind + text + after;
  input.innerHTML = str
}

.tagged-user {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin: 0 2px;
    padding: 2px;
    max-width: 120px;
    border-radius: 3px;
    background-color: #0084ff;
    color: #fff;
    vertical-align: text-bottom;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1;
    cursor: pointer;
}

<div contenteditable="true" id="div_id">1234567890</div>
<button onclick="clickA()" id="button">Click this button to insert text</button>