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);
        }
    }
}

これにより、すべてのスパンが検索され、スパンの子が 1 つしかないスパンがマージされます。

これは の使用を無視しますが!important、とにかく使用されていないと思います。

また、それらを正規化するため、まったく同じプロパティ値を返すことはありませんgetPropertyValue。

編集：

上記のコード例は、例の 13 スパンを 1 つに減らしますが、Safari はその過程でいくつかのスタイルを破棄します。

もちろん、これはかなり単純化されたものであり、1 つの例に基づいているだけです。どのようなスパン スープに遭遇する可能性があるか、または正確にどのような結果を求めているかはわかりません。

たとえば、次のようにスパンをマージすることもできます<p>foo<span style="font-size: x-large"> <span style="font-size: small">bar</span></span></p>。そのスペースのフォントサイズが失われることになりますが、それはほんのわずかな違いしかありません.

そのようなケースはもっとたくさんあると確信しているので、最終結果をどれだけきれいにしたいか、すべてのコーナーケースの修正にどれだけの時間を費やしたいかによって決まります.

たとえば、 CSSStyleDeclarationおよびelementに関する Mozilla の DOM リファレンスで、私が使用した DOM メソッドに関する詳細情報を見つけることができます。

于 2011-07-15T23:50:04.967 に答える