Разобрать HTML-файл, чтобы получить все идентификаторы и классы для CSS-файла.

Question

Некоторое время назад я был вполне уверен, что натолкнулся на приложение (или, возможно, плагин для Coda - IDE, который я использую), которое быстро анализирует HTML-документ, а затем выплевывает все элементы с идентификаторами и классами для мне использовать в файле CSS.

Полностью «погрузившись» в дзен-кодирование - используя замечательный плагин TEA для Coda, я снова в восторге от этого приложения / плагина.

Я с треском провалился и с треском провалил поиск в Google, но пришел с пустыми руками.

Кто-нибудь знает что-нибудь, что может сделать это?

Всех с новым годом!

Answer 1

Я знаю, что это с 2011 года и это почти конец 2013 года, но я пытался найти ответ на эту проблему в Google, и ссылка на этот пост появилась на первой странице результатов.Я не мог быстро найти способ получить все имена классов или идентификаторы.Поэтому я написал следующий фрагмент JavaScript.

function printAllElements() {
    var all = document.getElementsByTagName("*");
    var st = "";
    for (var i = 0, max = all.length; i < max; i++) {
        if(all[i].className !== ''){
            st += all[i].className + "<br>";
        }
        if(all[i].id !== ''){
            st += all[i].id + "<br>";
        }
    }
    document.write(st);
}

Надеюсь, это кому-нибудь поможет и сделает эту страницу более полезной.

Answer 2

Полагаю, вы ищете что-то вроде http://lab.xms.pl/css-generator/

Но я должен предупредить вас - подобные инструменты выводят очень грубую картину DOM, без каких-либо оптимизаций. Ни один автоматизированный инструмент не сделает это лучше, чем вы, особенно если вы находитесь на пути дзен.

Пусть CSS3 будет с вами.

Answer 3

http://unused -css.com /

Это почти то, что я искал ... но как раз наоборот:)

Answer 4

Опираясь на ответ Джона Петерсена, он получает все идентификаторы и классы, фильтрует их по уникальным и подготавливает вывод, чтобы его можно было вставить в ваш файл CSS.

    function getAllCSS() {
        var all = document.getElementsByTagName("*");
        var st = [];
        var trailing = " {<br /><br />}<br />";
        for (var i = 0, max = all.length; i < max; i++) {
            if (all[i].className !== '') {
                st.push('.' + all[i].className + trailing);
            }
            if (all[i].id !== '') {
                st.push('#' + all[i].id + trailing);
            }
        }
        var unique = st.filter(function (item, i, ar) { return ar.indexOf(item) === i; });

        document.write(unique.join("<br />"));
    }
    getAllCSS();

Answer 5

Я не знаю инструмент, о котором вы говорите, но вы можете очень легко создать такой инструмент, например, с SAX.Просто используйте обратный вызов startElement для поиска атрибутов «class» и «id».