如何删除仅具有特定类名且没有字符串内部内容的html标签（跨度）包装？答案

【问题标题】：How to remove html tags (span) wrap only with specific class name and without inner content from a string?如何删除仅具有特定类名且没有字符串内部内容的html标签（跨度）包装？
【发布时间】：2019-04-22 08:58:24
【问题描述】：

我想从字符串中删除一些不需要的标签，以将干净的字符串存储到数据库中。

我试图将字符串与正则表达式相关联。这是我尝试过的——https://codepen.io/rushijagani/pen/wZxWRj

var data = '<p><span class="unwanted-span-one" data-hello="unwated-attr">Donec</span> rutrum congue leo eget malesuada. <span>Mauris</span> blandit aliquet elit, eget <span class="unwanted-span-two" data-hello="unwated-attr-two"> malesuada</span>.</p>'

我想删除所有类名以“unwanted-span-”开头的跨度标签，它应该只删除标签包装而不是内容。

所以想要的输出应该如下

var data = '<p>Donec rutrum congue leo eget malesuada. <span>Mauris</span> blandit aliquet elit, eget malesuada.</p>'

请注意 -- 我们只需要删除类名以“unwanted-span-”开头的span标签，其他span应该保持原样。

【问题讨论】：

标签： javascript jquery string

【解决方案1】：

你可以简单地使用

var allData = $('*[class^="unwanted-span-"]').contents().unwrap();
console.log($(".all").html())

如果你不想改变 HTML，你可以试试这个：

var match = $('*[class^="unwanted-span-"]').get(0);
var test = $('p').html().replace(match.outerHTML,match.innerHTML);
console.log( test );

当然，如果您有多个匹配项，则必须迭代所有匹配项:)

【讨论】：

正如我在标题中提到的，它是一个字符串而不是一个 DOM。所以这可能只适用于 DOM。
var data = 'Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget malesuada.' 我想把上面的字符串转换成这个 --- var data = 'Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget malesuada.'
删除具有“unwanted-span-”类名但内部内容保持不变的跨度包装。
我没有在问题的任何地方提到 DOM。请看我清楚地提到STRING的标题。我需要使用 jQuery 来处理这个问题，所以必须提到它。

【解决方案2】：

您可以像这样使用带运算符的开头：

var allData = $('.all').find("span[class^='unwanted-span']").css('color','blue');

我编辑你的 codepen 容器https://codepen.io/anon/pen/qwyayP

要删除使用这个：

var allData = $('.all').find("span[class^='unwanted-span']").remove();

要展开跨度文本，请使用：

var allData = $('.all').find('span[class^="unwanted-span-"]').contents().unwrap();

console.log($('.all').html());

【讨论】：

感谢您的调查，但我需要删除这些跨度。请从描述中查看所需的输出。
很简单，把css('color', 'blue')改成remove()。 var allData = $('.all').find("span[class^='unwanted-span']").remove();
是的，我也试过了。但是 remove() 将删除整个标记及其内容。我只想删除和而不是跨度的内容。不应删除 span 的内容。
好的，你可以用这个var allData = $('p').text() console.log(''+allData+'');检查你的代码笔。
var allData = $('.all').find('span[class^="unwanted-span-"]').contents().unwrap(); console.log($('.all').html());