Supprimer toutes les classes qui commencent par une certaine chaîne

J'ai un div avec id="a"qui peut avoir n'importe quel nombre de classes attachées, de plusieurs groupes. Chaque groupe a un préfixe spécifique. Dans le javascript, je ne sais pas quelle classe du groupe est sur le div. Je veux pouvoir effacer toutes les classes avec un préfixe donné, puis en ajouter une nouvelle. Si je souhaite supprimer toutes les classes commençant par "bg", comment puis-je faire? Quelque chose comme ça, mais qui fonctionne réellement:

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

Avec jQuery, l'élément DOM réel est à l'index zéro, cela devrait fonctionner

$('#a')[0].className = $('#a')[0].className.replace(/\bbg.*?\b/g, '');

Une regex fractionnée sur la limite du mot \bn'est pas la meilleure solution pour cela:

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

ou en tant que mixin jQuery:

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

Mise à jour ES6 2018:

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

J'ai écrit un simple plugin jQuery - alterClass , qui supprime les classes génériques. Ajoutera éventuellement des classes aussi.

$( '#foo' ).alterClass( 'foo-* bar-*', 'foobar' ) 

Vous n'avez besoin d'aucun code spécifique à jQuery pour gérer cela. Utilisez simplement un RegExp pour les remplacer:

$("#a").className = $("#a").className.replace(/\bbg.*?\b/g, '');

Vous pouvez le modifier pour prendre en charge n'importe quel préfixe, mais la méthode la plus rapide est ci-dessus car RegExp ne sera compilé qu'une seule fois:

function removeClassByPrefix(el, prefix) {
    var regx = new RegExp('\\b' + prefix + '.*?\\b', 'g');
    el.className = el.className.replace(regx, '');
    return el;
}

En utilisant la 2ème signature de $.fn.removeClass:

// Considering:
var $el = $('<div class="  foo-1 a b foo-2 c foo"/>');

function makeRemoveClassHandler(regex) {
  return function (index, classes) {
    return classes.split(/\s+/).filter(function (el) {return regex.test(el);}).join(' ');
  }
}

$el.removeClass(makeRemoveClassHandler(/^foo-/));
//> [<div class=​"a b c foo">​</div>​]

http://www.mail-archive.com/jquery-en@googlegroups.com/msg03998.html dit:

... et .removeClass () supprimerait toutes les classes ...

Ça marche pour moi ;)

à votre santé

Une approche que j'utiliserais en utilisant des constructions jQuery simples et des fonctions de gestion de tableau consiste à déclarer une fonction qui prend l'identifiant du contrôle et du préfixe de la classe et supprime tout classé. Le code est joint:

function removeclasses(controlIndex,classPrefix){
    var classes = $("#"+controlIndex).attr("class").split(" ");
    $.each(classes,function(index) {
        if(classes[index].indexOf(classPrefix)==0) {
            $("#"+controlIndex).removeClass(classes[index]);
        }
    });
}

Maintenant, cette fonction peut être appelée de n'importe où, en cliquant sur un bouton ou à partir du code:

removeclasses("a","bg");

Je cherchais une solution pour exactement le même problème. Pour supprimer toutes les classes commençant par le préfixe "fontid_" Après avoir lu cet article, j'ai écrit un petit plugin que j'utilise maintenant.

(function ($) {
        $.fn.removePrefixedClasses = function (prefix) {
            var classNames = $(this).attr('class').split(' '),
                className,
                newClassNames = [],
                i;
            //loop class names
            for(i = 0; i < classNames.length; i++) {
                className = classNames[i];
                // if prefix not found at the beggining of class name
                if(className.indexOf(prefix) !== 0) {
                    newClassNames.push(className);
                    continue;
                }
            }
            // write new list excluding filtered classNames
            $(this).attr('class', newClassNames.join(' '));
        };
    }(fQuery));

Usage:

$('#elementId').removePrefixedClasses('prefix-of-classes_');

Pour les navigateurs modernes:

let element = $('#a')[0];
let cls = 'bg';

element.classList.remove.apply(element.classList, Array.from(element.classList).filter(v=>v.startsWith(cls)));

Je sais que c'est une vieille question, mais j'ai trouvé une nouvelle solution et je veux savoir si elle a des inconvénients?

$('#a')[0].className = $('#a')[0].className
                              .replace(/(^|\s)bg.*?(\s|$)/g, ' ')
                              .replace(/\s\s+/g, ' ')
                              .replace(/(^\s|\s$)/g, '');

En une seule ligne ... Supprime toutes les classes qui correspondent à une expression régulière someRegExp

$('#my_element_id').removeClass( function() { return (this.className.match(/someRegExp/g) || []).join(' ').replace(prog.status.toLowerCase(),'');});

La réponse de Prestaul a été utile, mais cela n'a pas vraiment fonctionné pour moi. La méthode jQuery pour sélectionner un objet par identifiant ne fonctionnait pas. Je devais utiliser

document.getElementById("a").className

au lieu de

$("#a").className

J'utilise également un tiret "-" et des chiffres pour le nom de la classe. Donc ma version inclut '\ d-'

$('#a')[0].className = $('#a')[0].className.replace(/\bbg.\d-*?\b/g, '');

(function($)
{
    return this.each(function()
    {
        var classes = $(this).attr('class');

        if(!classes || !regex) return false;

        var classArray = [];

        classes = classes.split(' ');

        for(var i=0, len=classes.length; i<len; i++) if(!classes[i].match(regex)) classArray.push(classes[i]);

        $(this).attr('class', classArray.join(' '));
    });
})(jQuery);

$("#element").removeAttr("class").addClass("yourClass");