如何在保留span标记的同时，在可竞争的div中键入和删除span前换行文本中的文本

Question

有人知道如何在保留<span id="x">标记的同时，在内容可编辑div中的预span包装文本中插入和删除文本吗？

1. 在内容可编辑的div中，如果删除"kachu"，<span id="2">也将被删除。我希望那个特定的标签即使没有文本也仍然存在。<span id="2></span>

2. 在内容可编辑的div中，如果在"kachu"之前键入"pi"以生成"pikachu"，<span id="2">将不会包装"pi"。我想要<span id="2">pikachu</span>

HTML

<div id="inputbox" style="border:1px solid lightgrey" contenteditable="true">
<span id="1">love</span> <span id="1">kachu</span>
</div>

Answer 1

这会将包含"kachu"的span的内容更改为空字符串，但之后查找span会有点困难，因为它与另一个span具有相同的id。

$('#inputbox').find('span:contains("kachu")').html( '' );

一旦"kachu"被删除，要找到空的跨度，你可以做同样的事情，但将contains("kachu")更改为contains("")

您应该考虑为跨度使用不同的id。如果您确实希望第二个跨度具有id="2"，则可能是：$('#inputbox').find('#2').html( '' )或仅$('#2').html( '' )