Question

使用jQuery，我该怎么做呢：

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

......进入这个：

<span style="font-size:21px; color:#ff0000">
  Something
</span>

请注意，除去无用的跨度但仍保持颜色。

在previous question中，我问如何从字符串中删除无用的SPAN，结果是使用：

$('span').unwrap();

这很有效但在上面的例子中，它没有考虑颜色。

有谁能想到有效处理这个问题？

Answer 1

如果您想保留继承的color属性，一个选项是使用css方法，为了防止冲突/更好的性能，您可以过滤没有后代span元素的元素。 / p>

$('span').css('color', function() {
   return $(this).css('color');
}).unwrap();

要过滤没有后代span元素的span，您可以使用.filter()方法。（我没有测试它与前一个片段的性能）：

$('span').filter(function() {
    return !$(this).find('span').length;
}).css('color', function() {
    return $(this).css('color');
}).end()
  .unwrap();

Answer 2

如果你可以列出你想要的所有属性，那么这就可以了。

如果你有一个共同的容器，你可以这样做：

var $container = $('.container-for-useless-spans');

// This is an array of the properties to grab...
var properties_to_get = ['color', 'font-size'];

// Grab the CSS properties from the deepest span since it'll have all the parents styling...
var styles_to_copy = $container.find('span:last').css(properties_to_get);

// Just grab the text from the container and apply the styles that were on the deepest span..
$container.html($container.text()).css(styles_to_copy);


<div class="container-for-useless-spans">
  <span style="font-size:19px">
    <span style="font-size:20px; color:#ff0000">
        <span style="font-size:21px;">
            Something
        </span>
    </span>
  </span>
</div>

以下是快速演示：http://jsbin.com/IneXasOL/1/edit?html,js,output

我个人只会清理HTML。这很愚蠢，特别是考虑到浏览器处理它是多么微不足道。

Answer 3

我将尝试并实现一个多用途的纯JS解决方案。这将适用于所有没有兄弟节点的元素（即包装器包装器），但请注意，在某些情况下，这会破坏您网站的布局。我将在代码之后详细介绍。另请注意，我不鼓励使用此代码。这更像是我做某事的能力。

(function() {
  var all = document.getElementsByTagName("*"), l = all.length, i, k;
  for( i=l-1; i>=0; i--) { // by going backwards, children are processed before parents
    if( !all[i].parentNode || all[i].parentNode.children.length != 1) continue;
    // element is only child, apply its styles to parent node and transfer children
    for( k in all[i].style) {
      if( all[i].style.hasOwnProperty(k) && all[i].style[k]
                                            && typeof all[i].style[k] == "string") {
        all[i].parentNode.style[k] = all[i].style[k];
      }
    }
    while(all[i].firstChild) all[i].parentNode.appendChild(all[i].firstChild);
    // finally, remove current node
    all[i].parentNode.removeChild(all[i]);
  }
})();

一切顺利，这应该会对整个文档产生预期的效果。

我重复：这太糟糕了！你应该生成整洁的HTML，甚至不应该使用内联style属性。单独的内容和格式，或类似的东西，我不知道。我使用style属性，我不在乎......

无论如何，这会在某些情况下破坏页面。例如，假设您有一个包含单个项目的列表：

<ul><li>Derp</li></ul>

上面的代码会将其更改为：

<ul>Derp</ul>

这是因为显而易见的原因，无效。这可以通过附加检查来修复，如下所示：

if( !all[i].pare ... || all[i].nodeName != all[i].parentNode.nodeName) continue;

一次：这不是您应该用于除练习之外的其他任何代码！

Answer 4

此功能应该这样做：

var font, color;

$(span).each(function () {
   if ($(this).css('font-size')) { font = $(this).css('font-size');}
   if ($(this).css('color')) { font = $(this).css('color');}
});

$(span).unwrap().addCss({'font-size' : font, 'color' : color)});

基本上只是循环遍历所有跨度（您可以更加具体地锁定要循环的跨度部分）并使用最新找到的值设置字体和颜色。最后，您打开所有跨度并将字体大小和颜色设置为最后遇到的值。

Answer 5

您是否考虑过实施第三方库来清理整个WYSIWYG编辑器？查看HTML Purifier http://htmlpurifier.org/

这不仅会清理您的HTML，而且还可以很好地清除您发布的表单中的其他潜在问题，如XSS和注入。

用jQuery清理HTML？

5 个答案: