найти все идентификаторы и классы, используемые в HTML-документе в BASH

Question

У меня есть блок HTML, из которого мне нужно вытащить все идентификаторы и классы. Я хочу составить список из них, чтобы я мог начать обрезку нашего большего, чем необходимо, документа CSS (173 КБ).

Я плохо изолирую блок кода HTML и помещаю его в свой собственный файл, но необходимость пройтись и документировать все используемые идентификаторы и классы довольно трудоемко.

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

Может кто-нибудь мне помочь?

Заранее спасибо.

Answer 1

Хотя это не решение bash, я думаю, что это довольно простое решение с использованием JavaScript:

(function (){
    var all = document.getElementsByTagName("*");
    var ids = [];
    var classes = [];

    for (var i=0, max=all.length; i < max; i++) {
        var elem = all[i];
         if(elem.id) {
            ids.push(elem.id);
         }

         if(elem.className) {
            var classList = elem.className.split(" ");
            Array.prototype.push.apply(classes, classList);
         }
    }


    console.log("Ids:");
    ids.forEach(function(e){
        console.log(e);
    });

    console.log("Classes:");
    classes.forEach(function(e){
        console.log(e);
    });
})();

Если вы скопируете и вставите это в консоль JavaScript вашего браузера, вы получите список классов и идентификаторов. Это может быть улучшено, чтобы удалить дубликаты и сделать сортировку, но это хорошее начало.

Answer 2

Мне нужно было найти все классы и т.д., Чтобы выяснить, что некоторые CSS-селекторы пытались сопоставить - я использовал следующую быструю вещь (работает с версией Bash для Fedora 21):

grep -Eoih class\=\"[^\"]*\" index.html | sed -e 's/"//g' -e 's/class=//g' | tr " " "\n" | sort -u

^{Заменить class с id для идентификаторов}

Который:

• grep -E - расширенное регулярное выражение (вероятно, не нужно), -o - показывает только совпадающие, -i регистра, -h не печатать имена файлов (для нескольких файлов).
• Между class\=\" и " , сопоставьте все, что не является "
• sed - удалить " и` class = "
• tr - заменить пробелы на новые строки
• sort - сортировка по порядку и удаление дубликатов

Хотя он очень ограничен (например, предназначен для вещей, которые используют " кавычки»).

Для удаления лишнего CSS я бы предложил использовать uncss, который удаляет неиспользуемый CSS, поэтому вам не нужно делать это вручную. Вы можете установить его с помощью npm install -g uncss и использовать его следующим образом (для дополнительных параметров используйте uncss --help):

  uncss ./index.html > new-css.css

Обратите внимание, что он обрабатывает файлы HTML и т.д., Чтобы найти используемый javascript, классы и идентификаторы, поэтому вам необходимо предоставить HTML в качестве входных данных.