清理和合并内联CSS样式

Question

清理和合并内联CSS样式

3

我正在尝试清理用户输入的HTML代码，这些代码中有很多内联CSS，特别是具有样式的span元素，但我不知道从哪里开始。有人知道如何使用JavaScript合并这些span元素和样式吗？我已经找到了将所有样式移动到样式表中以转换内联样式的方法，但目前在我们的系统中存储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>

- jncw

亲爱的上帝，那可能是我见过的最丑陋的东西了。 - Greg Guida

我同意，但不幸的是，我们的用户输入更糟糕。这就是为什么我正在尝试找到一种方法，至少可以将其清理一下，直到有时间重构并将CSS拆分到样式表中。 - jncw

这是从某种所见即所得编辑器中生成的吗？ - Greg Guida

是的。InnovaStudio所提供的所见即所得编辑器。我并不是他们的一员，我们只是在我们的CMS中使用它。试图改进我们从中获得的代码。 - jncw

你能否切换到其他编辑器，比如tinyMCE或aloha？ - Greg Guida

在切换到tinyMCE的过程中（目前非常喜欢它），计划使用任何清理工具来补充tinyMCE的清理功能，因为它也不能清理示例代码。虽然它可以创建更好的起始代码，但我正在尝试处理已经存在的代码。我想添加一个按钮，让我们可以清理这段代码。 - jncw

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mercator · Accepted Answer

这个怎么样？

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的DOM参考文档中找到我使用的更多DOM方法，例如CSSStyleDeclaration和element。