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个跨度减少到只有一个，但是，Safari会抛弃一些样式。

当然，这是相当简单的，只是基于一个例子，因为我不知道你可能遇到什么样的跨度汤，或者你可能正在寻找什么样的结果。

例如，您可能也希望合并这样的跨度：foo bar？你最终会失去那个空间的字体大小，但这只会产生微小的差异。

我确信还有更多这样的案例，所以它归结为你想要最终结果的清洁程度，以及你想花多少时间修复所有角落案件。

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

清理和合并内联CSS样式

1 个答案:

编辑：