find all IDs and CLASSes used in an HTML document in BASH

Question

I have a block of HTML that I need to pull all the IDs and CLASSes out of. Im wanting to make a list of these so that I can start trimming our larger then necessary CSS doc (173k).

Ill isolate the HTML code block and put it in its own file, but having to go through and document all the IDs and CLASSes used is rather time consuming.

Id like to process this using a bash script and writing all of the IDs to one file and then all of the CLASSes to another file, or the same file as long as it differentiates where IDs stop and CLASSes begin.

Can anyone help me?

Thanks in advance.

Answer 1

I needed to find all the classes etc to work out what some CSS selectors were trying to match - I used the following quick thing (works with Fedora 21's version of Bash):

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

^{Replace class with id for IDs}

Which:

• grep -E - Extended regexp (probably not needed), -o - shows only matched, -i case insensitive, -h don't print filenames (for multiple files).
• Inbetween class\=\" and ", match everything thats not a "
• sed - remove " and `class="
• tr - Replace spaces with newlines
• sort - Sort into order and removes dupes

It is very limited though (e.g. is designed for things which use " quotes).

For removing excess CSS, I would suggest using uncss, which removes unused CSS so you don't have to do it manually. You can install it via npm install -g uncss, and use it like this (for more options use uncss --help):

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

Note it prcesses the HTML etc files to find the used javascript, classes and ids, so you need to provide the HTML as input.

Answer 2

While not a bash solution, I think this is a pretty simple solution using 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);
    });
})();

If you copy and paste this into your browser's JavaScript console you'll get a list of classes and ids. It could be improved to remove duplicates and do sorting, but its a good start.