如何使用Javascript或jQuery在网页上找到最常用的类？

Question

Wondering if there's a way to show the list of classes used on a page with # of times it occurs on the page. Like so:

sublevel | 12
tag | 10
main | 1

Answer 1

Use the CSS Attribute Selector to select all the elements that have the attribute class . Then loop through each element of the set, accessing its className property and counting the occurences of each class:

 var classes = {}; // the classes counter document.querySelectorAll("[class]").forEach(function(el) { // select all the element that have a class attribute el.className.trim().split(/\\s+/).forEach(function(clazz) { // get the className of this element, trim it, and split it into individual classes // for each class, increment or initialize the counter if(classes[clazz]) classes[clazz]++; else classes[clazz] = 1; }); }); console.log(classes); 

 <div class="AB"> <span class="B"></span> </div> <p class="ABC"></p> 

Answer 2

There is no built-in API for something like this. You need to inspect the class names of every element. To get every element you either have to walk the DOM or get a list of all elements and iterate over them. Here is a simple solution that does the latter:

const classes = new Map();

for (let elem of document.querySelectorAll('*')) {
  for (let cls of elem.classList) {
    classes.set(cls, (classes.get(cls) || 0) + 1);
  }
}

const rankedClasses = Array.from(classes).sort((a,b) => b[1] - a[1]);

Can't say whether walking the DOM is more efficient or not.

Answer 3

Same as most of the others: get all elements and loop over them, counting the number of times each className appears. Only difference is it tries to be compatible with browsers back to say ES5. Needs reduce , forEach and Object.create polyfills for IE 8.

 function countClasses(root) { root = root || document; return [].reduce.call(root.getElementsByTagName('*'), function (classes, el) { (el.className.match(/\\S+/g) || []).forEach(function(cls) { classes[cls]? ++classes[cls] : classes[cls] = 1; }); return classes }, Object.create(null)); } console.log(countClasses()); 

 <div class="foo bar"> <span class="foo"></span><span class="bar fum"></span><span></span> </div>