javascript - 如何通过 Javascript 消除多余的、重复的 HTML 标签？

Question

我有一些从另一个进程返回的 HTML，如下所示:

Lorem <i style="color:blue;">
<strong>ipsum</strong>
</i>
<i style="color:blue;">
<strong> </strong></i>
<i style="color:blue;">
<strong>test</strong>
</i> dolor sit amet

请注意，基本上每个元素(其中一个单词、一组标点符号或一组空格构成一个“元素”)都有自己的一组相同的标签包裹在它周围。我正在尝试在 Javascript 中找到一种方法将其简化为:

    Lorem <i style='color:blue;'>
<strong>ipsum test</strong></i>
 dolor sit amet

它看起来既简单又复杂。我的大脑因一整天的强力编码而焦躁不安，所以我想不出任何有创意的解决方案。

super 感谢!

Answer 1

怎么样

DEMO

var str = 'Lorem <i style="color:blue;"><strong>ipsum</strong></i><i style="color:blue;"><strong> </strong></i><i style="color:blue;"><strong>test</strong></i> dolor sit amet'
var d = document.createElement('div');

d.innerHTML= str;
var italics = d.getElementsByTagName('i');

var text  = str.substring(0,str.indexOf('<i'))
text += '<i style="color:blue;"><strong>';

for (var i=0;i<italics.length;i++) {
  text += italics[i].textContent;
}
text += '</strong></i>';
text += str.substring(str.lastIndexOf('>')+1);
    console.log(text)
document.getElementById('content').innerHTML=text;