Javascript 如何删除特定标记并保留其内容

我在contenteditable div中有一些不需要的标记，需要删除它们

这些是

和

span

尝试使用jquery

unwrap

函数，但结果是

未定义

，因为它删除了父项的标记，而不是标记本身

有什么帮助吗？在下面的示例中，预期的控制台是：

lorem ipsum lorem ipsum lorem ipsum

$（'button'）。在（'click'，function（）上{
$（'span'）.unwrap（）；
log（$（'#story'）.html（））；
});

loem ipsum lorem ipsum lorem ipsum


单击
您必须像

$（“#故事”）.find（“span”）.contents（）.unwrap（）


$（'button'）。在（'click'，function（）上{
$（“#故事”）.find（“span”）.contents（）.unwrap（）；
console.log（$（'#story'）.html（）.replace（//g'，）；
});

loem ipsum lorem ipsum lorem ipsum


单击
可以将
的
outerHTML
更改为
innerHTML
，然后使用replace删除


$（'button'）。在（'click'，function（）上{
$（'span'）。每个（函数（）{
this.outerHTML=this.innerHTML；
})
让html=$（'#story'）.html（）；
$（'#story'）.html（html.replace（//g，“”））
log（$（'#story'）.html（））；
});

loem ipsum lorem ipsum lorem ipsum


单击
您需要展开文本节点，因此使用方法获取所有子节点。并使用方法替换
，其中带有回调的方法（回调中的第二个参数是旧的HTML内容）可用于更新内容


$（'button'）。在（'click'，function（）上{
//获取子节点的跨距标记并展开
$（“#故事跨度”）.contents（）.unwrap（）；
//从html内容中删除
$（'#story'）.html（（#，html）=>html.replace（//g'，））
log（$（'#story'）.html（））；
});

loem ipsum lorem ipsum lorem ipsum


单击
nbsp
怎么样？