我的问题非常具体，我试图用彩色脚本创建在线代码编辑器。
我正在使用contenteditable div，因此我可以添加span。当我输入单词script时，caret将在字段的开头处进行，每次我尝试添加更多文本时，插入符号将再次开始。
如果有人帮助我解决这个问题，那么很多人都会尝试这样做。
这是我的代码：
<html>
<body>
<div contentEditable style="width: 400px; height: 200px; border: 1px solid red;"></div>
<script>
document.querySelector("div").addEventListener("input", function() {
document.querySelector("div").innerHTML= document.querySelector("div").innerHTML
.replace("script","<span style='color:red;'>script</span>");
}, false);
</script>
</body>
</html>