Posted 10 months ago. Visible to the public. Linked content.

jQuery: How to remove classes from elements using a regular expression

jQuery's removeClass removes the given class string from an element collection. If you want to remove multiple/unknown classes matching a given pattern, you can do that.

For example, consider a DOM node for the following HTML. We'll reference it by $element below.

<div class="example is-amazing is-wonderful"></div>

Option A: Selecting classes, then removing them

You can iterate over existing classes, and select matching ones. The example below is ES6, on ES5 could write something similar using jQuery.grep.

let classes = Array.from($element.prop('classList')) let existingModifiers = classes.filter(className => { return className.match(/^is-/) }) $layout.removeClass(existingModifiers.join(' '))

Note that classList is native DOM API and returns a DOMTokenList (not an Array) of element classes.

Option B: Using a matcher function

Since jQuery 1.4 (read: forever) you may pass a function that disects an element's class, and returns a string that will then be removed through the "classic" string approach. It's a bit awkward to use.

If we now want to remove those "is-" modifiers, and we don't know what they will be, we can remove them like so:

function modifierClassMatcher(index, className) { let matchedClasses = className.match(/(^|\s)is-\S+/g) return (matchedClasses || []).join('') } $element.removeClass(modifierClassMatcher)

The modifierClassMatcher function will look for any class names starting with "is-". We use ^ and \s to split the class attribute string and find all class names.
The function then returns the string to remove, in the example above " is-amazing is-wonderful".

By refactoring problematic code and creating automated tests, makandra can vastly improve the maintainability of your Rails application.

Owner of this card:

Arne Hartherz
Last edit:
9 months ago
by Arne Hartherz
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Arne Hartherz to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more