我正在尝试用ContentEditable DIV编写一些代码，所以如果你输入一些特定的单词，它们就会改变颜色。多亏了一些堆栈溢出（还有什么），我才能让它工作，但每当我更新我正在使用的元素的innerHTML时，它就会将我的插入符号（你输入的闪烁的东西）移动到文本的开头。有没有一种方法可以保留我在这个DIV中的插入符号位置？

const words = [
  "apple",
  "banana",
  "pear"
]

document.getElementById("colordiv").addEventListener("keypress", colorchange)

function colorchange() {
  var cont = document.getElementById("colordiv").innerHTML.split(" ");
  for (i = 0; i < cont.length; i++) {
    if (words.includes(cont[i])) {
      cont[i] = "<span style='color:blue'>" + cont[i];
      cont[i] = cont[i] + "</span>";
    }
    document.getElementById("colordiv").innerHTML = cont.join(" ");
  }
}

<代码><；DIV ID=“ colordiv ” contenteditable=“ true ”>；用户可以编辑此文本。<；/DIV>；

顺晟科技：