Eliminar todas las clases que comienzan con una determinada cadena

Tengo un div con id="a"que puede tener cualquier cantidad de clases adjuntas, de varios grupos. Cada grupo tiene un prefijo específico. En javascript, no sé qué clase del grupo está en el div. Quiero poder borrar todas las clases con un prefijo dado y luego agregar una nueva. Si quiero eliminar todas las clases que comienzan con "bg", ¿cómo lo hago? Algo como esto, pero que realmente funciona:

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

Con jQuery, el elemento DOM real está en el índice cero, esto debería funcionar

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

Una expresión regular dividida en el límite de la palabra \bno es la mejor solución para esto:

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

o como una mezcla de 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;
};

Actualización de 2018 ES6:

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

Escribí un complemento jQuery simple : alterClass , que elimina la clase comodín. Opcionalmente también agregará clases.

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

No necesita ningún código específico de jQuery para manejar esto. Simplemente use una expresión regular para reemplazarlos:

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

Puede modificar esto para admitir cualquier prefijo, pero el método más rápido está arriba, ya que la expresión regular se compilará solo una vez:

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

Usando la segunda firma 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/[email protected]/msg03998.html dice:

... y .removeClass () eliminaría todas las clases ...

Esto funciona para mi ;)

salud

Un enfoque que usaría usando construcciones jQuery simples y funciones de manejo de matrices, es declarar una función que toma la identificación del control y el prefijo de la clase y borra todas las clasificadas. Se adjunta el código:

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

Ahora, esta función se puede llamar desde cualquier lugar, al hacer clic en el botón o desde el código:

removeclasses("a","bg");

Estaba buscando una solución para exactamente el mismo problema. Para eliminar todas las clases que comienzan con el prefijo "fontid_" Después de leer este artículo, escribí un pequeño complemento que estoy usando ahora.

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

Uso:

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

Para navegadores modernos:

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

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

Sé que es una pregunta antigua, pero encontré una nueva solución y quiero saber si tiene desventajas.

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

En una línea ... Elimina todas las clases que coinciden con una expresión regular someRegExp

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

La respuesta de Prestaul fue útil, pero no funcionó para mí. La forma jQuery de seleccionar un objeto por id no funcionó. Tuve que usar

document.getElementById("a").className

en vez de

$("#a").className

También utilizo guiones'- 'y dígitos para el nombre de la clase. Entonces mi versión incluye '\ 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");