My cursor move to the first word of my contenteditable <p> when I replace value

Question

When I enter a new text who replace by the function, my cursor go in the start of contenteditable. I would like my cursor stay in the last letter.

document.designMode = "on";

var text = document.getElementById('text');

let observer = new MutationObserver(mutations =>
  mutations.forEach(mutation => {
    console.log(text.textContent);
    text.textContent = text.textContent.replace('/', ' a');
  })
);

observer.observe(text, {
  childList: true,
  characterData: true,
  subtree: true,
});

<p id="text" contenteditable="true">I'm a text will be change</p>

Answer 1

Try this one.

document.designMode = "on";

var text = document.getElementById('text');

let observer = new MutationObserver(mutations =>
  mutations.forEach(mutation => {
    console.log(text.textContent);
    text.textContent = text.textContent.replace('/', ' a');
    const range = document.createRange();
    const textNode = text.firstChild;
    range.setStart(textNode, text.textContent.length);
    range.setEnd(textNode, text.textContent.length);
    const sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
  })
);

observer.observe(text, {
  childList: true,
  characterData: true,
  subtree: true,
});

<p id="text" contenteditable="true">I'm a text will be change</p>