Instantly share code, notes, and snippets.

Embed
What would you like to do?
jQuery alterClass plugin: Remove element classes with wildcard matching. Optionally add classes.
/**
* jQuery alterClass plugin
*
* Remove element classes with wildcard matching. Optionally add classes:
* $( '#foo' ).alterClass( 'foo-* bar-*', 'foobar' )
*
* Copyright (c) 2011 Pete Boere (the-echoplex.net)
* Free under terms of the MIT license: http://www.opensource.org/licenses/mit-license.php
*
*/
(function ( $ ) {
$.fn.alterClass = function ( removals, additions ) {
var self = this;
if ( removals.indexOf( '*' ) === -1 ) {
// Use native jQuery methods if there is no wildcard matching
self.removeClass( removals );
return !additions ? self : self.addClass( additions );
}
var patt = new RegExp( '\\s' +
removals.
replace( /\*/g, '[A-Za-z0-9-_]+' ).
split( ' ' ).
join( '\\s|\\s' ) +
'\\s', 'g' );
self.each( function ( i, it ) {
var cn = ' ' + it.className + ' ';
while ( patt.test( cn ) ) {
cn = cn.replace( patt, ' ' );
}
it.className = $.trim( cn );
});
return !additions ? self : self.addClass( additions );
};
})( jQuery );
@facultymatt

This comment has been minimized.

facultymatt commented Jan 8, 2013

This is really useful! Is it possible to replace many classes pattern with one call? For example
'alert-* status-* type-*'

Currently this method only seems to work if the classes are in that order. Ideally, it would work regardless of the order.

Thoughts?

@mfyuce

This comment has been minimized.

mfyuce commented Jan 17, 2014

Good work! Very helpful...

@jonathansayag

This comment has been minimized.

jonathansayag commented Aug 28, 2014

Thanks for the code, very helpful for me !

@arthurhamon

This comment has been minimized.

arthurhamon commented Dec 18, 2014

Great plugin it should be implement in jquery 1.12 or 2.2 !

@fadonascimento

This comment has been minimized.

fadonascimento commented Mar 5, 2015

Good work!

@bonny

This comment has been minimized.

bonny commented Apr 9, 2015

Great function – thanks a lot.

It also works with Zepto. Just pass in Zepto instead of jQuery and it just works.

@benzinkanister79

This comment has been minimized.

benzinkanister79 commented Jul 28, 2015

Great Work! Thanks a lot ;)

@danyj

This comment has been minimized.

danyj commented Nov 1, 2015

💯

@cdillon

This comment has been minimized.

cdillon commented Dec 14, 2015

Very nice! Thanks a ton!

@cyberfly999

This comment has been minimized.

cyberfly999 commented Jan 25, 2016

Wonderful, thank you very much!

@tcomert

This comment has been minimized.

tcomert commented Mar 21, 2016

Very useful, thanks

@anandbaskaran

This comment has been minimized.

anandbaskaran commented Apr 12, 2016

Good work :)

@anand9

This comment has been minimized.

anand9 commented May 19, 2016

thanks a lot.. 👍

@timothyleerussell

This comment has been minimized.

timothyleerussell commented Jul 16, 2016

Nice. Very handy. +1

@xD3CODER

This comment has been minimized.

xD3CODER commented Jan 22, 2017

Nice ! thanks a lot

@AreCoca25

This comment has been minimized.

AreCoca25 commented Mar 6, 2018

Nice! Thanks +1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment