我正在尝试创建一个div，当用户右键单击一个单词时，它变为红色。此div是可编辑的，因此用户可以更改其中的文本。
<div contenteditable="true" id="test"><span class="word">text</span></div>
到目前为止，我所做的是，每次调用事件监听器“input”时，我遍历div中的所有跨度并在其内容上使用正则表达式将它们与（空格）（单词）或（字）（空格）。然后，我在包含第二个匹配部分的当前范围之后添加一个新范围，并用第一个匹配的部分替换当前范围的内容。我还将类字添加到包含单词的范围，具体取决于匹配的表达式。
到目前为止这个方法的话，我能够右键单击单个单词，或者将它们置于红色或不是。
然而我的问题是，当我插入并删除我的contenteditable div中的跨度时，插入符的位置会发生变化。原因可能是因为div内部html的长度变化超过了文本的长度。
我怎么能这样做，以便在我输入，粘贴或删除div中的一些文本之后，并且在我的函数将空格与不同跨度中的字符分开之后，插入符号仍保持原样。
换句话说，我想存储当前的插入位置，修改我的div的html（不是文本），然后恢复之前的插入位置。
有没有人知道如何继续？谢谢您的帮助！