Entfernen Sie alle Klassen, die mit einer bestimmten Zeichenfolge beginnen

Ich habe eine Div mit einer id="a"beliebigen Anzahl von Klassen aus mehreren Gruppen. Jede Gruppe hat ein bestimmtes Präfix. Im Javascript weiß ich nicht, welche Klasse aus der Gruppe auf der Div ist. Ich möchte in der Lage sein, alle Klassen mit einem bestimmten Präfix zu löschen und dann eine neue hinzuzufügen. Wie mache ich das, wenn ich alle Klassen entfernen möchte, die mit "bg" beginnen? So etwas, aber das funktioniert tatsächlich:

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

Bei jQuery befindet sich das eigentliche DOM-Element auf dem Index Null. Dies sollte funktionieren

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

Eine Regex-Aufteilung an der Wortgrenze \bist hierfür nicht die beste Lösung:

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

oder als jQuery-Mixin:

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

2018 ES6 Update:

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

Ich habe ein einfaches jQuery-Plugin geschrieben - alterClass , das Platzhalterklassen entfernt. Fügt optional auch Klassen hinzu.

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

Sie benötigen dafür keinen jQuery-spezifischen Code. Verwenden Sie einfach ein RegExp, um sie zu ersetzen:

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

Sie können dies ändern, um jedes Präfix zu unterstützen. Die schnellere Methode ist jedoch oben aufgeführt, da RegExp nur einmal kompiliert wird:

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

Mit 2. Unterschrift von $.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 sagt:

... und .removeClass () würden alle Klassen entfernen ...

Für mich geht das ;)

Prost

Ein Ansatz, den ich mit einfachen jQuery-Konstrukten und Array-Handling-Funktionen verwenden würde, besteht darin, eine Funktion zu deklarieren, die die ID des Steuerelements und das Präfix der Klasse übernimmt und alle klassifizierten löscht. Der Code ist beigefügt:

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

Jetzt kann diese Funktion von überall, per Knopfdruck oder per Code aufgerufen werden:

removeclasses("a","bg");

Ich suchte nach einer Lösung für genau das gleiche Problem. So entfernen Sie alle Klassen, die mit dem Präfix "fontid_" beginnen Nach dem Lesen dieses Artikels habe ich ein kleines Plugin geschrieben, das ich jetzt verwende.

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

Verwendung:

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

Für moderne Browser:

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

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

Ich weiß, dass es eine alte Frage ist, aber ich habe eine neue Lösung gefunden und möchte wissen, ob sie Nachteile hat.

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

In einer Zeile ... Entfernt alle Klassen, die einem regulären Ausdruck someRegExp entsprechen

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

Prestaul's Antwort war hilfreich, aber es hat bei mir nicht ganz funktioniert. Die jQuery-Methode zum Auswählen eines Objekts anhand der ID hat nicht funktioniert. Ich musste benutzen

document.getElementById("a").className

anstatt

$("#a").className

Ich benutze auch Bindestrich und Ziffern für den Klassennamen. Meine Version enthält also '\ 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");