Очистка и объединение встроенных стилей 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 интервалов в вашем примере до одного для меня, однако Safari отбрасывает некоторые стили в процессе.

Конечно, это довольно упрощенно и основано только на одном примере, поскольку я понятия не имею, к какому типу супа вы можете прибегнуть, или какие именно результаты вы можете ожидать.

Например, вы можете также объединить отрезки так: <p>foo<span style="font-size: x-large"> <span style="font-size: small">bar</span></span></p>? В конечном итоге вы потеряете размер шрифта в этом месте, но это будет иметь лишь небольшое значение.

Я уверен, что таких случаев гораздо больше, поэтому все зависит от того, насколько чистым вы хотите, чтобы конечный результат был, и сколько времени вы хотите потратить на исправление всех угловых случаев.

Вы можете найти больше информации о методах DOM, которые я использовал, например, в DOM-справке Mozilla для CSSStyleDeclaration и element.