如何在保留span标记的同时在可竞争div中的预跨度包装文本中键入和删除文本

Question

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

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'的范围的内容更改为空字符串，但在此之后找到范围会稍微困难，因为它与另一个范围具有相同的ID。

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

删除“kachu”后，要找到空的跨度，您可以执行相同操作，但将contains("kachu")更改为contains("")

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