Remova todas as classes que começam com uma certa string

Eu tenho um div com id="a"que pode ter qualquer número de classes anexadas a ele, de vários grupos. Cada grupo possui um prefixo específico. No javascript, não sei qual turma do grupo está no div. Quero ser capaz de limpar todas as classes com um determinado prefixo e, em seguida, adicionar um novo. Se eu quiser remover todas as classes que começam com "bg", como faço isso? Algo assim, mas realmente funciona:

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

Com jQuery, o elemento DOM real está no índice zero, isso deve funcionar

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

Uma divisão regex no limite de palavra \bnão é a melhor solução para isso:

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

ou como um 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;
};

Atualização ES6 2018:

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

Eu escrevi um plugin jQuery simples - alterClass , que remove a classe curinga. Opcionalmente, adicionará classes também.

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

Você não precisa de nenhum código específico do jQuery para lidar com isso. Basta usar um RegExp para substituí-los:

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

Você pode modificar isso para suportar qualquer prefixo, mas o método mais rápido está acima, pois o RegExp será compilado apenas uma vez:

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

Usando a 2ª assinatura 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 diz:

... e .removeClass () removeria todas as classes ...

Funciona para mim ;)

Felicidades

Uma abordagem que eu usaria usando construções jQuery simples e funções de manipulação de array é declarar uma função que leva id do controle e prefixo da classe e excluiu todas as classes. O código está anexado:

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

Agora, esta função pode ser chamada de qualquer lugar, ao clicar no botão ou a partir do código:

removeclasses("a","bg");

Eu estava procurando uma solução exatamente para o mesmo problema. Para remover todas as classes começando com o prefixo "fontid_" Depois de ler este artigo, escrevi um pequeno plugin que estou usando agora.

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

Sei que é uma pergunta antiga, mas descobri uma nova solução e quero saber se ela tem desvantagens?

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

Em uma linha ... Remove todas as classes que correspondem a uma expressão regular someRegExp

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

A resposta de Prestaul foi útil, mas não funcionou muito bem para mim. A maneira jQuery de selecionar um objeto por id não funcionou. Eu tive que usar

document.getElementById("a").className

ao invés de

$("#a").className

Eu também uso hífen'- 'e dígitos para o nome da classe. Portanto, minha versão inclui '\ 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");