css - 清理和合并内联 CSS 样式

Question

我正在尝试清理用户输入的 HTML 代码，其中包含大量内联 CSS，尤其是跨样式，但我不确定从哪里开始。有谁知道使用 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>

Answer 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 个 span 减少到我的一个，不过，Safari 在此过程中丢弃了一些样式。

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

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

我敢肯定还有很多这样的情况，所以这将归结为您希望最终结果有多干净，以及您想花多少时间来修复所有极端情况。

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