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

Question

我正在创建一个内容可编辑的 div，其中我输入的某些词会变成​​粗体和红色(使用 jQuery 等)。我通过用适当样式的 span 标签包含的相同词替换目标词来实现这一点。例如:

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 { 字体粗细:粗体； 红色;

目标

$('换句话说').insertAfter('#fill_me');