Skip to content

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.

Copy link

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.

Copy link

mfyuce commented Jan 17, 2014

Good work! Very helpful...

@jonathansayag

This comment has been minimized.

Copy link

jonathansayag commented Aug 28, 2014

Thanks for the code, very helpful for me !

@arthurhamon

This comment has been minimized.

Copy link

arthurhamon commented Dec 18, 2014

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

@fadonascimento

This comment has been minimized.

Copy link

fadonascimento commented Mar 5, 2015

Good work!

@bonny

This comment has been minimized.

Copy link

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.

Copy link

benzinkanister79 commented Jul 28, 2015

Great Work! Thanks a lot ;)

@danyj

This comment has been minimized.

Copy link

danyj commented Nov 1, 2015

💯

@cdillon

This comment has been minimized.

Copy link

cdillon commented Dec 14, 2015

Very nice! Thanks a ton!

@cyberfly999

This comment has been minimized.

Copy link

cyberfly999 commented Jan 25, 2016

Wonderful, thank you very much!

@tcomert

This comment has been minimized.

Copy link

tcomert commented Mar 21, 2016

Very useful, thanks

@anandbaskaran

This comment has been minimized.

Copy link

anandbaskaran commented Apr 12, 2016

Good work :)

@anand9

This comment has been minimized.

Copy link

anand9 commented May 19, 2016

thanks a lot.. 👍

@timothyleerussell

This comment has been minimized.

Copy link

timothyleerussell commented Jul 16, 2016

Nice. Very handy. +1

@xD3CODER

This comment has been minimized.

Copy link

xD3CODER commented Jan 22, 2017

Nice ! thanks a lot

@AreCoca25

This comment has been minimized.

Copy link

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
You can’t perform that action at this time.