删除某些跨度标签，将文本保留在里面 - Javascript/jquery答案

【问题标题】：Remove certain span tags, keep the text inside - Javascript/jquery删除某些跨度标签，将文本保留在里面 - Javascript/jquery
【发布时间】：2018-08-15 00:18:10
【问题描述】：

我有以下html：

<h1>These are <span style="color: red;">RED</span> words</h1>
<h2>These are <span class="green">GREEN</span> words</h2>
<h3>These are more <span style="color: red;">RED</span> words</h3>

我想要：

<h1>These are RED words</h1>
<h2>These are <span class="green">GREEN</span> words</h2>
<h3>These are more RED words</h3>

换句话说，我想使用 javascript 或 jquery 来删除 <span style="color: red;"></span> ，但保留其他所有内容。并且 span 标签没有 id，只是用来区分它们的样式。

感谢您的帮助。

【问题讨论】：

您只想删除具有style="color: red" 的span 标记，还是删除具有内联样式的span 标记？或者你想删除没有类的内联样式的 span 标签？

标签： javascript jquery html regex

【解决方案1】：

您可以使用unwrap()。 Here 你可以找到文档。还要记得检查span 是否具有style 属性。

$('h1, h2, h3').find('span').each(function(){
    if($(this).attr('style')){
      $(this).contents().unwrap();
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>These are <span style="color: red;">RED</span> words</h1>
<h2>These are <span class="green">GREEN</span> words</h2>
<h3>These are more <span style="color: red;">RED</span> words</h3>

【讨论】：

这是一件好事，但您将如何选择文本内容以匹配父项？
不错！也许为 .css ('color') 写一个 if 语句
@Jtbs，是的，刚刚添加。谢谢

【解决方案2】：

这也有效：

$('h1').text($('h1').text())
$('h3').text($('h3').text())

当然，您仍然需要逻辑来测试跨度上是否存在样式，只是表明还有另一种方法可以删除跨度并保留文本。

【讨论】：