更改innerHTML时停止更改光标位置

Question

当javascript编辑innerHTML时，如何停止光标更改位置？ 我目前正在制作一个小代码编辑器项目，我希望文本突出显示，但为此，我必须编辑innerHTML / DOM元素以向其添加跨度。但是当发生这种情况时，它会改变文本开头的位置。

var c = document.getElementById("c");
var t = setInterval(function(){
	c.innerHTML = $("#c").text().split("lol").join("<span class='hi1'>lol</span>");
},1);

[contenteditable] {
    border: 1px solid gray;
}

.hi1 {
  color: rgb(51, 153, 255);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable id="c">
    write "l o l" without spaces. Then continue to write and try to change location with arrow keys / mouse
</div>