ลบคลาสทั้งหมดที่ขึ้นต้นด้วยสตริงที่กำหนด

ฉันมี div id="a"ซึ่งอาจมีจำนวนคลาสที่แนบมาจากหลายกลุ่ม แต่ละกลุ่มมีคำนำหน้าเฉพาะ ในจาวาสคริปต์ฉันไม่รู้ว่าคลาสจากกลุ่มไหนอยู่บน div ฉันต้องการล้างชั้นเรียนทั้งหมดด้วยคำนำหน้าที่กำหนดแล้วเพิ่มใหม่ ถ้าฉันต้องการลบคลาสทั้งหมดที่ขึ้นต้นด้วย "bg" ฉันจะทำอย่างไร อะไรทำนองนี้ แต่ใช้งานได้จริง:

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

ด้วย jQuery องค์ประกอบ DOM จริงจะอยู่ที่ศูนย์ดัชนีสิ่งนี้ควรใช้งานได้

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

regex การแบ่งขอบเขตของคำ\bไม่ใช่ทางออกที่ดีที่สุดสำหรับสิ่งนี้:

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

หรือเป็น 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;
};

อัปเดต ES6 2018:

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

ฉันได้เขียนปลั๊กอิน jQueryง่ายๆ- alterClassซึ่งจะลบคลาสสัญลักษณ์ตัวแทน สามารถเลือกเพิ่มชั้นเรียนได้ด้วย

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

คุณไม่จำเป็นต้องมีรหัสเฉพาะ jQuery เพื่อจัดการสิ่งนี้ เพียงใช้ RegExp เพื่อแทนที่:

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

คุณสามารถแก้ไขสิ่งนี้เพื่อรองรับคำนำหน้าใด ๆ แต่วิธีที่เร็วกว่านั้นอยู่ข้างบนเนื่องจาก RegExp จะถูกคอมไพล์เพียงครั้งเดียว:

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

ใช้ลายเซ็นที่ 2ของ$.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พูดว่า:

... และ. removeClass () จะลบคลาสทั้งหมด ...

มันได้ผลสำหรับฉัน;)

ไชโย

วิธีการที่ฉันจะใช้โดยใช้โครงสร้าง jQuery แบบง่ายและฟังก์ชันการจัดการอาร์เรย์คือการประกาศฟังก์ชันที่ใช้ id ของการควบคุมและคำนำหน้าของคลาสและลบคลาสทั้งหมด แนบรหัส:

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

ตอนนี้สามารถเรียกใช้ฟังก์ชันนี้ได้จากทุกที่ไม่ว่าจะคลิกปุ่มหรือจากรหัส:

removeclasses("a","bg");

สำหรับเบราว์เซอร์สมัยใหม่:

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

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

ฉันกำลังมองหาวิธีแก้ปัญหาเดียวกัน ในการลบคลาสทั้งหมดที่ขึ้นต้นด้วยคำนำหน้า "fontid_" หลังจากอ่านบทความนี้ฉันได้เขียนปลั๊กอินขนาดเล็กที่ฉันใช้อยู่ตอนนี้

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

การใช้งาน:

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

ฉันรู้ว่ามันเป็นคำถามเก่า แต่ฉันพบวิธีแก้ปัญหาใหม่และอยากรู้ว่ามันมีข้อเสียหรือไม่?

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

ในบรรทัดเดียว ... ลบคลาสทั้งหมดที่ตรงกับนิพจน์ทั่วไปsomeRegExp

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

คำตอบของ Prestaul มีประโยชน์ แต่ก็ไม่ได้ผลสำหรับฉัน วิธี jQuery ในการเลือกวัตถุตาม id ไม่ทำงาน ฉันต้องใช้

document.getElementById("a").className

แทน

$("#a").className

ฉันยังใช้ยัติภังค์และตัวเลขสำหรับชื่อคลาส ดังนั้นเวอร์ชันของฉันจึงมี "\ 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");