Looking for all the classes matching a pattern in an HTML document?

Question

Today I thought: what is the best way to get a separate (i.e. non-repeating) list of classes used in a document that (preferably) match a template pattern (regular expression) or (alternatively) start with a specific sequence of characters? JQuery can be used for this or just direct Javascript.

Now it should obviously serve all classes of the legal class, for example:

<div class="class1 class2 class3"> </div> 

And I do not want to parse the document with regular expressions. It is just too error prone. I'm interested in a Jaavascript solution that runs the DOM or uses something like jQuery to do this.

Oh, this should also include any classes that have been dynamically added / removed using the previous Javascript code.

Suggestions?

Answer 1

Using jQuery:

 var listClasses = function( pattern ){ var allClassesTmp = {}, allClasses = []; var rx = pattern ? (new RegExp(pattern)) : (new RegExp(".*")); $('*[class]').each( function(){ var cn = this.className.split(/\s+/); for(var i=cn.length;--i>-1;){ if(rx.test(cn[i]))allClassesTmp[ cn[i] ] = 1 } }); for(var i in allClassesTmp)allClasses.push(i); return allClasses; } 

Answer 2

Could this help you?

http://httpcode.com/blogs/PermaLink,guid,77f17d9c-cdc0-4fcb-a392-3cc70ef6ac23.aspx

 <input type="radio" class="star star_id_45 star_group_5" /> $("input[class*='star_id_45']") 

Answer 3

 function gatherClasses() { var tags = document.getElementsByTagName('*'); var cls, clct = {}, i, j, l = tags.length; for( i = 0; i < l; i++ ) { cls = tags[i].className.split(' '); for( j = 0; j < cls.length; j++ ) { if( !cls[j] ) continue; clct[cls[j]] = 'dummy'; //so we only get a class once } } cls = []; for( i in clct ) { cls.push( i ); } return cls; } alert(gatherClasses()) 

Here is the regex version

 function gatherClasses( matchString ) { if( matchString ) { var rxp = new RegExp( matchString ); } else { var rxp = /.*/; } var tags = document.getElementsByTagName('*'); var cls, clct = {}, i, j, l = tags.length; for( i = 0; i < l; i++ ) { cls = tags[i].className.split(' '); for( j = 0; j < cls.length; j++ ) { if( !cls[j] || !rxp.test( cls[j] ) ) { continue; } clct[cls[j]] = 'dummy'; //so we only get a class once } } cls = []; for( i in clct ) { cls.push( i ); } return cls; } //find classes that match 'stack' alert(gatherClasses('stack'))