2

我正在尝试清理用户输入的具有大量内联 CSS 的 HTML 代码，尤其是跨样式，我不知道从哪里开始。有谁知道使用 JavaScript 合并跨度和样式的方法？我已经找到了通过将所有样式移动到样式表来转换内联样式的方法，但是现在还不可能将 CSS 页面存储在我们的系统中。（希望这将是在不久的将来的一个目标，但不是我的电话）

一个例子 - 把这个烂摊子：

<span style="font-size: large;"><span style="font-family: arial black,avant garde;"><span style="font-size: xx-large;"><span style="font-size: large;"><span style="font-family: arial black,avant garde;"><span style="font-size: xx-large;"><span style="color: #000000;"><span style="font-size: x-large;"><span style="font-size: large;"><span style="font-family: arial black,avant garde;"><span style="font-size: xx-large;"><span style="color: #000000;"><span style="font-size: x-large;"><a href="index.php?p=75">Home</a></span></span></span></span></span></span></span></span></span></span></span></span></span>

进入这个：

<span style="font-size: x-large;color: #000000;font-family: arial black,avant garde;"><a href="index.php?p=75">Home</a></span>
4

1 回答 1

1

这个怎么样？

window.onload = function(){
    var spans = document.querySelectorAll('span');

    for (var i = 0; i < spans.length; i++)
    {
        if (spans[i].hasChildNodes() && spans[i].childNodes.length == 1
            && spans[i].firstChild.tagName == 'SPAN')
        {
            var parent = spans[i];
            var child = spans[i].firstChild;

            // Copy new properties to child.
            for (var j = 0; j < parent.style.length; j++)
            {
                var prop = parent.style[j];
                if (child.style.getPropertyValue(prop) === "")
                {
                    child.style.setProperty(
                        prop,
                        parent.style.getPropertyValue(prop),
                        ''
                    );
                }
            }

            // Replace parent with child.
            parent.parentNode.insertBefore(child, parent);
            parent.parentNode.removeChild(parent);
        }
    }
}

这将找到所有跨度，并合并那些只有一个跨度子级的跨度。

这将忽略 的使用!important，但我认为无论如何都没有使用它。

getPropertyValue此外，由于标准化它们，它不会返回完全相同的属性值。

编辑：

上面的示例代码将示例中的 13 个跨度减少到对我来说只有一个，但是，Safari 在此过程中丢弃了一些样式。

当然，这相当简单，并且仅基于一个示例，因为我不知道您可能会遇到什么样的跨度汤，或者您可能正在寻找什么样的结果。

例如，您可能也想像这样合并跨度<p>foo<span style="font-size: x-large"> <span style="font-size: small">bar</span></span></p>：您最终会丢失该空间的字体大小，但这只会产生很小的差异。

我敢肯定还有很多这样的案例，所以这将归结为您希望最终结果有多干净，以及您想花多少时间修复所有角落案例。

例如，您可以在Mozilla 的CSSStyleDeclaration和element的 DOM 参考中找到有关我使用的 DOM 方法的更多信息。

于 2011-07-15T23:50:04.967 回答