Javascript 使用JQuery解析元素标记，但不解析其内容

我有一个包含html的字符串，我想从字符串中删除整个span元素，但不删除其内容（我想保留单词canada和任何其他元素）

但我不是在操作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)

<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>

var htmlString=“加拿大皇家海军（RCN）是加拿大的海军力量。截至2015年，加拿大海军拥有1艘驱逐舰、12艘护卫舰、4艘巡逻潜艇、12艘海防舰和8艘非武装巡逻/训练舰，以及数艘辅助舰。
”
var cleanString=$（htmlString）.find（'span'）.each（函数（）{
$（this.contents（）.unwrap（）；
}).end（）.appendTo（“”）.parent（）.html（）；
console.log（cleanString）

示例：

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)

<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>

步骤：

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)

<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>

从HTML创建jQuery对象

对于每个跨度，展开内容

调用end（）返回原始jQuery对象，而不是先前筛选的范围

调用AppendTo临时对象，该对象现在将是父对象，但从未附加到DOM

将temp对象作为父对象返回html（）函数

来自控制台的结果：

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)

<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>

加拿大皇家海军（RCN）是加拿大的海军力量。
截至2015年，加拿大海军拥有1艘驱逐舰、12艘护卫舰、4艘巡逻潜艇、12艘海防舰和8艘非武装巡逻/训练舰，以及数艘辅助舰

代码：

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)

<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>

var htmlString=“加拿大皇家海军（RCN）是加拿大的海军力量。截至2015年，加拿大海军拥有1艘驱逐舰、12艘护卫舰、4艘巡逻潜艇、12艘海防舰和8艘非武装巡逻/训练舰，以及数艘辅助舰。
”
var cleanString=$（htmlString）.find（'span'）.each（函数（）{
$（this.contents（）.unwrap（）；
}).end（）.appendTo（“”）.parent（）.html（）；
console.log（cleanString）

示例：

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)

<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>

步骤：

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)

<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>

从HTML创建jQuery对象

对于每个跨度，展开内容

调用end（）返回原始jQuery对象，而不是先前筛选的范围

调用AppendTo临时对象，该对象现在将是父对象，但从未附加到DOM

将temp对象作为父对象返回html（）函数

来自控制台的结果：

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)

<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>

加拿大皇家海军（RCN）是加拿大的海军力量。
截至2015年，加拿大海军拥有1艘驱逐舰、12艘护卫舰、4艘巡逻潜艇、12艘海防舰和8艘非武装巡逻/训练舰，以及数艘辅助舰

最简单的方法是创建临时dom节点，将html设置到此节点中，删除span，然后获取

innerHTML

但是如果你想用这种艰难的方式

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

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')

var htmlString=`
加拿大皇家海军（RCN）是加拿大的海军力量。
截至2015年，加拿大海军拥有1艘驱逐舰、12艘护卫舰、4艘巡逻潜艇、12艘海防船和8艘非武装巡逻/训练船，以及数艘辅助船。
`
htmlString.split（'\n'）
.filter（x=>x）
.map（str=>str.match（/（.+）（？：]*>）（.*）（？：）（.*）/）.slice（1.join（“”））
.join（“\n”）

---

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

最简单的方法是创建临时dom节点，将html设置到此节点中，删除span，然后获取

innerHTML

但是如果你想用这种艰难的方式

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

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')

var htmlString=`
加拿大皇家海军（RCN）是加拿大的海军力量。
截至2015年，加拿大海军拥有1艘驱逐舰、12艘护卫舰、4艘巡逻潜艇、12艘海防船和8艘非武装巡逻/训练船，以及数艘辅助船。
`
htmlString.split（'\n'）
.filter（x=>x）
.map（str=>str.match（/（.+）（？：]*>）（.*）（？：）（.*）/）.slice（1.join（“”））
.join（“\n”）

---

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

使用

string.prototype。用正则表达式替换
，以删除
span
元素：


var htmlString=”加拿大皇家海军（RCN）是加拿大的海军力量。
截至2015年，加拿大海军运营1艘驱逐舰、12艘护卫舰、4艘巡逻潜艇、12艘海防船和8艘非武装巡逻/训练船，以及数艘辅助船。
'；
var withoutSpans=htmlString.replace（/]*>/ig'，）；
控制台日志（无盘）使用
String.prototype。用正则表达式替换
，以删除
span
元素：


var htmlString=”加拿大皇家海军（RCN）是加拿大的海军力量。
截至2015年，加拿大海军运营1艘驱逐舰、12艘护卫舰、4艘巡逻潜艇、12艘海防船和8艘非武装巡逻/训练船，以及数艘辅助船。
'；
var withoutSpans=htmlString.replace（/]*>/ig'，）；
控制台日志（无盘）修复了错误，与第一行的第二个span标记不匹配。我不好，我应该提到regex不起作用，因为类名有时会不同，即highlight-keyword-2、highlight-keyword-3。正如肖恩在回答中提到的那样，创建一个临时dom节点似乎是一种方法。Regex不使用任何类名，它只是删除了span标记（所有这些标记）。但无论如何，使用正则表达式来完成这项任务有点深奥或开玩笑。修复了错误，与第一行的第二个span标记不匹配。我不好的是，我应该提到正则表达式不起作用，因为类名有时会不同，即highlight-keyword-2，highlight-keyw