当我替换值时，我的光标移动到我的 contenteditable <p> 的第一个单词答案

【问题标题】：My cursor move to the first word of my contenteditable <p> when I replace value当我替换值时，我的光标移动到我的 contenteditable <p> 的第一个单词
【发布时间】：2020-12-26 09:50:30
【问题描述】：

当我输入一个由函数替换的新文本时，我的光标进入 contenteditable 的开头。我希望我的光标停留在最后一个字母上。

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>

【问题讨论】：

你提出的问题，已经被问过很多次了，发问题前请先搜索一下。这是一个很好的参考stackoverflow.com/questions/1181700/…

标签： javascript string dom-events str-replace contenteditable

【解决方案1】：

试试这个。

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,
});

&lt;p id="text" contenteditable="true"&gt;I'm a text will be change&lt;/p&gt;

【讨论】：

@Camille，我更新了答案。你可以试试这个吗？