11

I need list of classes used in an html file. Is there any tool where i can get list of classes in the HTML file?

Milan
  • 969
  • 2
  • 16
  • 34
KuldipMCA
  • 3,079
  • 7
  • 28
  • 48

6 Answers6

16

This should work and it doesn't need jquery:

const used = new Set();
const elements = document.getElementsByTagName('*');
for (let { className = '' } of elements) {
    for (let name of className.split(' ')) {
        if (name) {
            used.add(name);
        }
    }
}
console.log(used.values());
Ilia Choly
  • 18,070
  • 14
  • 92
  • 160
  • had to update it a bit - because it fails with "elements[i].className.split(' ')" - is not a function. here is the updated code - https://jsfiddle.net/dqad4n90/ – shershen Apr 12 '16 at 21:07
  • updated to fix the es6 solution. Had a reference to an undefined variable seen `seen.add(name)`. It was supposed to be `used.add(name)`. Elegant solution though, really good stuff. – Matthew Wolman May 05 '20 at 21:55
8

If you've got jQuery on the page, run this code:

var classArray = [];
$('*').each(function(){if(this.className!=""){classArray.push(this.className)}})

The variable classArray will contain all the classes specified on that HTML page.

MisterGreen
  • 141
  • 4
2

Pure Javascript Code will list all the unique classes.

var lst=[];
document.querySelectorAll("[class]").forEach( (e)=>{  
e.getAttribute("class").split(" ").forEach( (cls)=>{if( cls.length>0 && lst.indexOf(cls)<0) lst.push(cls);}
);
 });
console.log(lst.sort());
garish
  • 637
  • 12
  • 14
0

I know this is an old question, but got here through google so I suspect more people can get here too.

The shortest way, using querySelectorAll and classList (which means, browser support could be an issue: IE10 for classList and IE8 for querySelectorAll ), and with duplicates, would be:

var classes = 0, 
elements = document.querySelectorAll('*');

for (var i = 0; i < elements.length; i++) {
    classes = classes + elements[i].classList.length;        
}

I made a jsFiddle with a fallback for classList (which has the "lowest" browser support) that also counts all elements, all classes and all elements with classes if you're not using classList.

I didn't add a unique detection though, might get to it some day.

LasagnaAndroid
  • 2,815
  • 1
  • 16
  • 20
0

Quickly list classes from console (ignoring 'ng-*' angular classes) 

(global => {
    // get all elements
    const elements = document.getElementsByTagName('*');
    // add only unique classes
    const unique = (list, x) => {
        x != '' && list.indexOf(x) === -1 && x.indexOf('ng-') !== 0 && list.push(x);                    
        return list;
    };
    // trim
    const trim = (x) => x.trim();
    // add to variable
    global.allClasses = [].reduce.call(elements, (acc, e) => e.className.split(' ').map(trim).reduce(unique, acc), []).sort();
    console.log(window.allClasses);
})(window);
Ferenc Takacs
  • 597
  • 7
  • 8
0

Take a look at Dust Me Selectors.

It's not exactly what you are looking for, it shows a list of UNused selectors. However, I imagine you could use the inverse of the list it provides.

Here is the link: http://www.sitepoint.com/dustmeselectors/

nikmd23
  • 9,095
  • 4
  • 42
  • 57
  • Looks like a good extension, however it's only talking about FF3.5 support! We're now at Firefox "6.0" (4.0 with 2 bugfix releases). – Bojangles Sep 24 '11 at 13:17