How to get list of Css class use in the HTML file?

Question

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?

Answer 1

this should work and it doesn't need jquery.

var used = [];
var elements = null;

//get all elements
if (typeof document.getElementsByTagName != 'undefined') {
    elements = document.getElementsByTagName('*');
}

if (!elements || !elements.length) {
    elements = document.all; // ie5
}

//loop over all element
for (var i = 0; i < elements.length; i++){

    //loop over element's classes
    var classes = elements[i].className.split(' ');
    for (var j = 0; j < classes.length; j++) {

        var name = classes[j];

        //add if not exists
        if (name.length > 0 && used.indexOf(name) === -1) {
            used.push(name);
        }
    }
}

alert(used.join(' '));

es6 version

let used = new Set();
let elements = document.getElementsByTagName('*');
for (let { className = '' } of elements) {
    for (let name of className.split(' ')) {
        if (name) {
            used.add(name);
        }
    }
}
console.log(used.values());

more functional approach

var elements = document.getElementsByTagName('*');

var unique = function (list, x) {
    if (x != "" && list.indexOf(x) === -1) {
        list.push(x);
    }
    return list;
};

var trim = function (x) { return x.trim(); };

var classes = [].reduce.call(elements, function (acc, e) {
    return e.className.split(' ').map(trim).reduce(unique, acc);
}, []);