在contenteditable div中更改innerHTML时保留光标位置

Question

我正在构建一个对代码进行语法高亮显示的编辑器。我当前的方法是只将文本放入编辑器（将contenteditable设置为true的div）并检查字符串中的正则表达式是否匹配。然后，我将匹配项替换为<span>元素，并将某些样式应用于这些span元素。然后，使用.innerHTML属性用新文本替换分隔符中的完整文本。这很好用，但是我必须向后键入，因为插入文本后，我的光标将重置为零位置。我尝试在插入然后做

之前记录selectionStart的值

element.selectionStart = oldSelectionStart + 1;

但是没有用。我认为这是因为chrome的渲染管道，在渲染页面之前运行了JavaScript，并且在渲染时重置了光标，而不是在设置时重置了光标……有人可以帮忙吗？我如何设法将光标保持在原处？