使用JQuery来解析出元素标签，但不是它的内容

问题描述：

我有一个字符串，包含html，我想删除整个span元素，但不是从字符串中的内容（我想留下加拿大和任何其他元素的话）。使用JQuery来解析出元素标签，但不是它的内容

var htmlString = 
<p>The Royal <span class="highlight-keyword highlight-keyword-2 highlight-pid-28" style="font-weight: bold;">Canadian<span> Navy (RCN) is the naval force of Canada.<p> 
<p>As of 2015 <span class="highlight-keyword highlight-keyword-2 highlight-pid-28" style="font-weight: bold;">Canada's</span> navy operates 1 destroyer, 12 frigates, 4 patrol submarines, 12 coastal defence vessels and 8 unarmed patrol/training vessels, as well as several auxiliary vessels.</p>

现在，如果我被操纵DOM我可以简单地使用

$(this).find("span.highlight-keyword").each(function() { 
    $(this).contents.unwrap(); 
})

，但我不能操纵DOM我操纵一个字符串，我想没有span元素返回整个字符串，但保持一切。

答

代码：

var htmlString = "<p>The Royal <span class='highlight-keyword highlight-keyword-2 highlight-pid-28' style='font-weight: bold;'>Canadian<span> Navy (RCN) is the naval force of Canada.<p><p>As of 2015 <span class='highlight-keyword highlight-keyword-2 highlight-pid-28' style='font-weight: bold;'>Canada's</span> navy operates 1 destroyer, 12 frigates, 4 patrol submarines, 12 coastal defence vessels and 8 unarmed patrol/training vessels, as well as several auxiliary vessels.</p>" 

var cleanString = $(htmlString).find('span').each(function() { 
    $(this).contents().unwrap(); 
}).end().appendTo('<div/>').parent().html(); 

console.log(cleanString)

样品：

https://jsfiddle.net/SeanWessell/5a23stwq/

步骤：

从HTML创建jQuery对象。
对于每个展开展开内容。
调用结束（）返回原来的jQuery对象NOT跨越之前被过滤。
调用AppendTo临时对象，它现在是父级但是从未附加到DOM
返回作为父级的临时对象的html（）函数。从控制台

结果：

<p>The Royal Canadian Navy (RCN) is the naval force of Canada.</p><p></p><p>As of 2015 Canada's navy operates 1 destroyer, 12 frigates, 4 patrol submarines, 12 coastal defence vessels and 8 unarmed patrol/training vessels, as well as several auxiliary vessels.</p>

清洁，简单，不正是我需要做的！非常感谢你！ –

答

最简单的方法是创建临时DOM节点，HTML设置到这个节点，删除跨度，并获得innerHTML。

但是，如果你想这样做很难。

您可以尝试匹配除span节点之外的所有字符串。

var htmlString = ` 
<p>The Royal <span class="highlight-keyword highlight-keyword-2 highlight-pid-28" style="font-weight: bold;">Canadian<span> Navy (RCN) is the naval force of Canada.<p> 
<p>As of 2015 <span class="highlight-keyword highlight-keyword-2 highlight-pid-28" style="font-weight: bold;">Canada's</span> navy operates 1 destroyer, 12 frigates, 4 patrol submarines, 12 coastal defence vessels and 8 unarmed patrol/training vessels, as well as several auxiliary vessels.</p>` 

htmlString.split('\n') 
    .filter(x=>x) 
    .map(str => str.match(/(.+)(?:<span[^>]*>)(.*)(?:<\/?span>)(.*)/).slice(1).join('') ) 
    .join('\n')

我懒得过滤文本中的特殊字符，所以我使用了es6模板字符串语法。

修正了错误，不匹配第一行的第二个span标签。 – Arnial

我的坏我应该提到，正则表达式不会工作，因为类名有时会不同，即突出显示关键字2，突出显示关键字3。看起来，创建一个临时dom节点是一切，毕竟肖恩在他的回答中提到。 –

正则表达式不使用任何类名，它只是删除span标签（全部）。但无论如何，使用正则表达式来完成这个任务有点深奥或开玩笑。 – Arnial

答

使用String.prototype.replace用正则表达式来删除span元素：

var htmlString = '<p>The Royal <span class="highlight-keyword highlight-keyword-2 highlight-pid-28" style="font-weight: bold;">Canadian<span> Navy (RCN) is the naval force of Canada.</p> <p>As of 2015 <span class="highlight-keyword highlight-keyword-2 highlight-pid-28" style="font-weight: bold;">Canada\'s</span> navy operates 1 destroyer, 12 frigates, 4 patrol submarines, 12 coastal defence vessels and 8 unarmed patrol/training vessels, as well as several auxiliary vessels.</p>'; 
 

 
var withoutSpans = htmlString.replace(/<\/?span[^>]*>/ig, ''); 
 

 
console.log(withoutSpans);

使用JQuery来解析出元素标签，但不是它的内容

相关推荐