将 span 标签动态添加到内容可编辑 div 中的某些单词

Question

我创建了一个内容可编辑的 div，用户可以在其中编写 cmets 并标记其他用户。当用户键入时，将进行 API 调用以检查评论中指定的任何用户名。

例如，如果有人写道： "此任务将由 User123 处理。UserABC 和 UserXYZ 可以提供帮助。"

这是 API 响应：

res = [
    {'useremail':"user123@email.com", "start":29, "end": 36},
    {'useremail':"userxyz@email.com", "start":38, "end": 45},
    {'useremail':"userabc@email.com", "start":50, "end": 57}
]

如果未找到用户名，则响应为空数组。

现在的问题是在为 cmets 中指定的那些用户名添加跨度标签以突出显示它们时。我知道要突出显示的文本内容的开始和结束索引。如何将 span 标签动态添加到可编辑 div 中的给定索引？该过程不应中断正在输入的用户。

我更喜欢为此使用纯 Javascript。但我可以使用 jQuery。

感谢任何帮助。 如果您需要更多信息，请发表评论。提前谢谢你。

Answer 1

我只会获取文本，剪切它，截断 div 并附加带有特定文本块的 span 包装器。它不应该打扰用户。

此外，如果您调用innerText，您将获得所有后代的文本，因此即使它们位于跨度包装器中，您也可以提取整个文本并重新剪切它。