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.

  • 1
    "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." Welcome to SU! We're not a script-writing service, but can help you if you're stuck. What have you got/tried so far? Where exactly are you getting stuck implementing your script? Oct 22, 2014 at 18:10
  • Im not exactly sure how to isolate the ID or CLASS name from the code block. Im guessing it would be a RegEx pattern to look for id="<foo>" or class="<bar>" but RegEx is something that has stumped me time and time again
    – DBunting
    Oct 22, 2014 at 18:13
  • There's a butt-load of RegEx how-tos/references online... What have you actually tried so far? Oct 22, 2014 at 18:14
  • 2
    Html is not a regular language. If you try to apply regexes to it you will get hurt
    – miniBill
    Oct 22, 2014 at 18:34

2 Answers 2


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


  • 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.


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) {

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



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.

  • 1
    – slhck
    Oct 22, 2014 at 18:39
  • Yes, or Underscore
    – heavyd
    Oct 22, 2014 at 18:41
  • @heavyd while its not bash it does do exactly what I ask. Thank you kindly.
    – DBunting
    Oct 22, 2014 at 19:53
  • 1
    To those of you down voting and then pointing to a javascript solution please read that i was looking for something in bash, and as such wasnt searching answers tagged with Javascript. @heavyd thank you again for your code. It does what I need it to do. If it were in bash id be able to streamline the rest of the operation. Never-the-less its gotten me further then my attempts.
    – DBunting
    Oct 22, 2014 at 19:55
  • Yes, I'd much rather let the browser worry about parsing the markup and just use the DOM API to query it rather than trying to parse it myself.
    – heavyd
    Oct 22, 2014 at 19:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.