键入时将 spans 注入 contenteditable div答案

【问题标题】：Inject spans into contenteditable div while typing键入时将 spans 注入 contenteditable div
【发布时间】：2018-03-16 14:08:59
【问题描述】：

我正在尝试将<span> 元素注入到用户正在输入contenteditable <div> 的文本中。输入事件 (DOMCharacterDataModified) 定期触发对识别文本中某些实体的服务的请求，我想相应地更新它。例如，

<div id="editor" contenteditable="true">
    The New York Times is an American newspaper based 
    in New York City with worldwide influence and 
    readership.
</div>

变成

<div id="editor" contenteditable="true">
    The <span class="name">New York Times</span> is an 
    American newspaper based in <span class="loc">New 
    York City</span> with worldwide influence and 
    readership.
</div>

有什么方法可以注入<span> 元素而不替换<div> 的内容，从而保留用户的文本光标位置？

【问题讨论】：

DOMCharacterDataModified is depreacted。看看How to change contenteditable input character, on keypress
你是在建议keydown吗？我知道弃用，但认为input 将是way to go。
是的，链接（要走的路）是正确的

标签： javascript html wysiwyg contenteditable

【解决方案1】：

我不知道它是否会保留文本光标位置，但简单的 JavaScript replace() 应该可以工作，不管它是否在 contenteditable 内。

str.replace("New York Times", "<span>New York Times</span>")

【讨论】：

不幸的是，这不会保留文本光标位置。
尝试查看stackoverflow.com/questions/16105482/… 并可能先保存位置，然后应用跨度，然后将光标放回原处？
我已经尝试过保存和恢复光标位置，但我无法提出一个防弹的解决方案——尤其是异步服务请求。