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

Question

我正在构建一个对代码进行语法突出显示的编辑器。我当前的方法是仅获取编辑器中的文本（contenteditable 设置为 true 的 div）并检查字符串中的正则表达式匹配。然后，我用元素替换匹配项<span>，并对这些 span 元素应用一些样式。然后，我使用该属性将分隔线中的完整文本替换为新文本.innerHTML。这工作得很好，但我必须向后输入，因为插入文本后，我的光标被重置到位置零。我尝试记录插入之前的值selectionStart，然后执行

element.selectionStart = oldSelectionStart + 1;

但没有成功。我认为这是因为 chrome 的渲染管道，其中 JavaScript 在渲染页面之前运行，并且光标在渲染时重置，而不是在设置时重置...任何人都可以帮忙吗？如何设法将光标保持在原来的位置？

Answer 1

element.selectionStart适用于输入元素，不适用于contentEditable元素。您应该尝试创建一个Range对象，设置其startContainer&startOffset并将其折叠以将插入符号设置在所需的位置。有关详细信息，请参阅 [https://developer.mozilla.org/en-US/docs/Web/API/Range]。

PS：如果您想将光标设置到“行尾”，您可以使用range.selectNode(requiredNode)和range.collapse(true)将插入符号移动到节点末尾，即行轻松完成