Comment supprimer efficacement des classes avec un préfixe spécifique en JavaScript ?

Gérer des classes avec des préfixes spécifiques

La manipulation de classes en JavaScript peut être difficile, en particulier lorsqu'il s'agit de plusieurs classes appartenant à différents groupes avec des préfixes uniques . Cet article explore un problème courant : supprimer des classes avec un préfixe spécifique d'un élément DIV et les remplacer par un nouveau.

Le problème

Supposons que vous ayez un DIV élément avec un ID de « a » qui peut avoir plusieurs classes de différents groupes. Chaque groupe a un préfixe spécifique. Cependant, dans votre code JavaScript, vous ne savez peut-être pas quelle classe d'un groupe spécifique est actuellement affectée à l'élément DIV. Votre objectif est de supprimer toutes les classes avec un préfixe tel que "bg" et d'en ajouter une nouvelle. L'extrait de code suivant illustre le problème :

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

Cependant, ce code ne fonctionne pas comme prévu.

Solution

Une approche plus robuste consiste à utiliser une expression régulière qui divise les noms de classe en fonction des limites des mots et filtre les classes qui n'ont pas le préfixe spécifié. Voici un exemple :

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

Vous pouvez également créer un mixin jQuery pour simplifier ce processus :

$.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;
};

Pour utiliser ce mixin, appelez simplement la fonction removeClassPrefix() sur le DIV élément, en spécifiant le préfixe que vous souhaitez supprimer :

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

Mise à jour ES6 (2018)

Dans JavaScript moderne (ES6 et supérieur), vous pouvez utiliser une version plus simple de la solution :

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

Ce code exploite la fonction flèche et démarreAvec() méthode pour filtrer efficacement les classes avec le préfixe spécifié.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!