Css 关闭内容可编辑div中的范围标记

我正在创建一个内容可编辑的div，其中我键入的某些单词将变为粗体和红色（使用jQuery…等）。我通过用带有适当样式的span标记的相同单词替换目标单词来实现这一点。例如：

Target ----> <span style="color:red; font-weight:bold">target</span>

Target-->Target

问题是，一旦我将目标词替换为其跨距版本，我在content editable div中键入的所有其他内容都将放在目标词的跨距标记内，而不是放在它们之外。例如：

* What I want: <span style="color:red; font-weight:bold">target</span> other words
* What happens: <span style="color:red; font-weight:bold">target other words</span>

*我想要的：瞄准其他单词
*发生了什么：瞄准其他词

什么是优雅的方式？我试图避免添加包含零宽度字符的额外跨距，并将样式恢复为正常样式。

\p>\fill\u me{ 字体大小：粗体； 颜色：红色； }

目标

---

$（'other words'）。插入后面（'fill#me'）

我理解逻辑，但我不知道如何实现这一点，因为用户直接在content editable div中键入内容。为什么用户能够这样做？在这种情况下，我使用的是content editable div，类似于textarea。用户在content-editable div中键入一个目标词，当他/她键入一个目标词时，该词立即替换为同一个词的红色和粗体版本（通过span）。使用jquery，您可以通过触发的事件（如onChange）通过ajax请求检测目标词。ajax请求只会返回true或false，在这种情况下，您将用相应的span标记替换目标单词。这不是一个合理的解决方案吗？