Why is triple content returned after processing?

Question

JavaScript

Good afternoon!
I am adapting a function that performs a replacement in the selected fragment.

function add_left_2_indent() {
  var div = document.querySelector('.entry-content');

  var selStart = div.selectionStart,
        selEnd = div.selectionEnd;

  var slection = div.innerHTML.substring(selStart, selEnd);

  if (slection) {
    var replaced = slection.replace(/^([^\r\n][\s\S]*?)$/gm, "  $1");
    div.innerHTML = div.innerHTML.substring(0, selStart) + replaced + txval.substring(selEnd, txval.length);
    selEnd = selStart + replaced.length;
  }

  div.setSelectionRange(selStart, selEnd);
}

After applying this function, we have, not a replacement in the selection, but the content multiplied by three.
How to fix it?
PS The container is registeredcontenteditable="true"

Answer 1

delete this fucking code and take it

function add_left_2_indent(div) {
  var div = document.querySelector('.entry-content');

  var text = div.innerHTML

  selection = window.getSelection();
  var substr1 = selection.toString()

  var newstr =   text.replace(substr1  , '123' )

    div.innerHTML = newstr
}

 var div = document.querySelector('.entry-content');
 div.addEventListener('click' , function(){
    add_left_2_indent()
 })