css - 在内容可编辑的 div 中关闭 span 标签

Question

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

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

问题是一旦我用它的跨版本替换目标单词，我在内容可编辑 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>

解决这个问题的优雅方法是什么？我试图避免添加一个包含零宽度字符并将样式恢复正常的额外跨度。

Answer 1

#fill_me { 字体粗细：粗体；红色; }

<span id="fill_me">目标</span>

$('其他话').insertAfter('#fill_me');