HTML 剔除无用的 font 标签和 span 标签

Question

现在有一个 HTML

<p>
    "ab"
    <font>
        <span>cd</span>
    </font>
    <font>
        <font>
            <span>
                <img xxx>
            </span>
        </font>
    </font>
    <span>ef</span>
    <font>
          <span>gh</span>
    </font>
</p>

这是一个带有未知层 font / span 嵌套的 HTML 片段, 然而这些 font 标签和 span 标签是没有意义的, 我想剔除这些标签, 转换成如下的形式

<p>
    <p>ab</p>
    <p>cd</p>
    <img xxx>
    <p>ef</p>
    <p>gh</p>
</p>

这是一个简单的示例, 不单单有 font 和 span, 该死的 IE 把能带上的没用的标签都给带上了, 而且每个标签都有 N 个值为未知的属性.

请问我该如何操作? 原生 js / jquery 均可, 兼容 IE 11.

Answer 1

全局替换；把不要font和span全局替换成空串

Answer 2

声明一个数组arr,可以递归下各节点，然后从最子节点向上查找，如果el.childNodes长度为0的时候remove节点（如果el.innerText有值先追加到变量再移除节点）arr.push("<p>"+el.innerText+"</p>")，特殊标签单独处理 (img等)，判断为特殊标签，也是先push再移除节点，以此类推