Rimuovi tutte le classi che iniziano con una determinata stringa

Ho un div con id="a"cui possono essere associate qualsiasi numero di classi, da diversi gruppi. Ogni gruppo ha un prefisso specifico. Nel javascript, non so quale classe del gruppo sia sul div. Voglio essere in grado di cancellare tutte le classi con un dato prefisso e quindi aggiungerne uno nuovo. Se desidero rimuovere tutte le classi che iniziano con "bg", come posso farlo? Qualcosa di simile, ma funziona davvero:

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

Con jQuery, l'elemento DOM effettivo è all'indice zero, dovrebbe funzionare

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

Una divisione delle espressioni regolari sul confine di parola \bnon è la soluzione migliore per questo:

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

o come 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;
};

Aggiornamento ES6 2018:

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

Ho scritto un semplice plugin jQuery - alterClass , che fa la rimozione della classe jolly. Opzionalmente aggiungerà anche classi.

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

Non hai bisogno di alcun codice specifico di jQuery per gestirlo. Basta usare una RegExp per sostituirli:

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

Puoi modificarlo per supportare qualsiasi prefisso, ma il metodo più veloce è sopra poiché RegExp verrà compilato solo una volta:

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

Utilizzando la seconda firma di $.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 dice:

... e .removeClass () rimuoverà tutte le classi ...

Per me funziona ;)

Saluti

Un approccio che utilizzerei utilizzando semplici costrutti jQuery e funzioni di gestione degli array, è quello di dichiarare una funzione che prende l'ID del controllo e il prefisso della classe e cancella tutte le classi. Il codice è allegato:

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

Ora questa funzione può essere chiamata da qualsiasi luogo, con un clic del pulsante o dal codice:

removeclasses("a","bg");

Stavo cercando una soluzione esattamente per lo stesso problema. Per rimuovere tutte le classi che iniziano con il prefisso "fontid_" Dopo aver letto questo articolo ho scritto un piccolo plugin che sto usando ora.

(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));

Utilizzo:

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

Per i browser moderni:

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

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

So che è una vecchia domanda, ma ho trovato una nuova soluzione e voglio sapere se ha degli svantaggi?

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

In una riga ... Rimuove tutte le classi che corrispondono a un'espressione regolare someRegExp

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

La risposta di Prestaul è stata utile, ma non ha funzionato per me. Il modo jQuery per selezionare un oggetto per id non ha funzionato. Ho dovuto usare

document.getElementById("a").className

invece di

$("#a").className

Uso anche il trattino "-" e le cifre per il nome della classe. Quindi la mia versione include "\ 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");