使用jQuery清理HTML代码？

Question

使用jQuery，有谁知道我怎样可以清理这个标记：

<span style="font-size:19px">
  <span style="font-size:20px">
    <span style="font-size:21px">
      Something
    </span>
  </span>
</span>

将它转换为这样：

<span style="font-size:21px">
  Something
</span>

如果有人能指点我正确的方向，将不胜感激。或者如果有人知道任何可以从HTML中删除无用标签的库，那也太好了。

---

更新

上面的代码只是一个例子。例如可能会有20个包装的span...

- Andrew

Answer 1

只需unwrap所有的span标签，这将只留下内部的span标签。

$('span').unwrap();

FIDDLE

- adeneo

---

这样做不会删除所有的span吗？ - Andrew

@Andrew - 不，内部标签不会被移除。 - adeneo

@Andrew：span将被解除包装，而不是span的内容（尽管如果最内层的span有任何兄弟节点可能会有问题（但不是）（http://jsfiddle.net/davidThomas/v3UaV/1/）。 - David Thomas

@Andrew，你已经有了一个实时演示，还问这个问题。 - php_nub_qq

这是一个很好的解决方案，回答了我的问题 - 我会将其标记为已接受。但是，在您的示例中，如果最里层的 span 没有设置颜色，那么父级 span 设置的颜色将会丢失... - Andrew

Answer 2

你也可以这样做：

$('span').each(function() {
    if($(this).prop('tagName') == $(this).children(":first").prop('tagName')) {
       $(this).children(":first").unwrap();
    }
});

- Bryan Elliott

Answer 3

这不是一个 jQuery 的解决方案，但我不知道你是否需要实时处理你的 HTML。否则，你可以使用这个在线工具：http://www.dirtymarkup.com/ 它将转换你的代码:

<span style="font-size:19px">
  <span style="font-size:20px">
    <span style="font-size:21px">
      Something
    </span>
  </span>
</span>

转换为：

<span style="font-size: 19px">Something</span>

- Bas van Dijk