Javascript 在变量contenteditable div中保持插入符号位置

我有一个contenteditable div，它通过websocket从另一个客户端的contenteditable div获取它的innerhtml。每次接收并设置客户端的div html时，两个客户端都会丢失其选择范围和插入符号位置。我一直在使用rangy设置选择范围，将用户的选择保存在div中，但我无法将它们替换为从websocket接收的updatehtml字符串。例如
旧div innerhtml：

test123

（长度跨度表示所选文本）
收到的div innerhtml：

foobarnewtext

理想情况下：

foobarnewtext

如何重新插入这样的长度跨度以保持选择？除了使用rangy，还有更简单的方法吗？每次需要重新插入插入符号位置和选择时，只修改div的一个连续区域

我也尝试过rangy的基于字符索引的保存和恢复，但是这个功能被破坏了。 如果从范围中删除字符，rangy的字符索引方法将无法恢复该范围