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 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 mfyuce commented Jan 17, 2014

Good work! Very helpful...

@jonathansayag

This comment has been minimized.

Copy link

@jonathansayag jonathansayag commented Aug 28, 2014

Thanks for the code, very helpful for me !

@arthurhamon

This comment has been minimized.

Copy link

@arthurhamon 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 fadonascimento commented Mar 5, 2015

Good work!

@bonny

This comment has been minimized.

Copy link

@bonny 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 benzinkanister79 commented Jul 28, 2015

Great Work! Thanks a lot ;)

@danyj

This comment has been minimized.

Copy link

@danyj danyj commented Nov 1, 2015

💯

@cdillon

This comment has been minimized.

Copy link

@cdillon cdillon commented Dec 14, 2015

Very nice! Thanks a ton!

@cyberfly999

This comment has been minimized.

Copy link

@cyberfly999 cyberfly999 commented Jan 25, 2016

Wonderful, thank you very much!

@tcomert

This comment has been minimized.

Copy link

@tcomert tcomert commented Mar 21, 2016

Very useful, thanks

@anandbhaskaran

This comment has been minimized.

Copy link

@anandbhaskaran anandbhaskaran commented Apr 12, 2016

Good work :)

@anand9

This comment has been minimized.

Copy link

@anand9 anand9 commented May 19, 2016

thanks a lot.. 👍

@timothyleerussell

This comment has been minimized.

Copy link

@timothyleerussell timothyleerussell commented Jul 16, 2016

Nice. Very handy. +1

@xD3CODER

This comment has been minimized.

Copy link

@xD3CODER xD3CODER commented Jan 22, 2017

Nice ! thanks a lot

@AreCoca25

This comment has been minimized.

Copy link

@AreCoca25 AreCoca25 commented Mar 6, 2018

Nice! Thanks +1

@ponsakthianand

This comment has been minimized.

Copy link

@ponsakthianand ponsakthianand commented Jan 12, 2020

Saved my time... Thank you!

@ztg-zlu

This comment has been minimized.

Copy link

@ztg-zlu ztg-zlu commented May 15, 2020

正是我需要的

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.