How to Efficiently Remove Classes with a Specific Prefix in JavaScript?

Managing Classes with Specific Prefixes

Manipulating classes in JavaScript can be challenging, especially when dealing with multiple classes belonging to different groups with unique prefixes. This article explores a common issue: removing classes with a specific prefix from a DIV element and replacing them with a new one.

The Problem

Suppose you have a DIV element with an ID of "a" that can have multiple classes from various groups. Each group has a specific prefix. However, in your JavaScript code, you may not know which class from a specific group is currently assigned to the DIV element. Your goal is to remove all classes with a prefix like "bg" and add a new one. The following code snippet illustrates the issue:

$("#a").removeClass("bg*");

However, this code does not work as intended.

Solution

A more robust approach is to use a regular expression that splits the class names on word boundaries and filters out the classes that don't have the specified prefix. Here's an example:

var prefix = "bg";
var classes = el.className.split(" ").filter(function(c) {
    return c.lastIndexOf(prefix, 0) !== 0;
});
el.className = classes.join(" ").trim();

Alternatively, you can create a jQuery mixin to simplify this process:

$.fn.removeClassPrefix = function(prefix) {
    this.each(function(i, el) {
        var classes = el.className.split(" ").filter(function(c) {
            return c.lastIndexOf(prefix, 0) !== 0;
        });
        el.className = $.trim(classes.join(" "));
    });
    return this;
};

To use this mixin, simply call the removeClassPrefix() function on the DIV element, specifying the prefix you want to remove:

$("#a").removeClassPrefix("bg");

ES6 Update (2018)

In modern JavaScript (ES6 and above), you can use a simpler version of the solution:

const prefix = "bg";
const classes = el.className.split(" ").filter(c => !c.startsWith(prefix));
el.className = classes.join(" ").trim();

This code leverages the arrow function and startsWith() method to effectively filter out classes with the specified prefix.

The above is the detailed content of How to Efficiently Remove Classes with a Specific Prefix in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!