Loại bỏ tất cả các lớp bắt đầu bằng một chuỗi nhất định

Tôi có một div có id="a"thể có bất kỳ số lớp nào được gắn vào nó, từ một số nhóm. Mỗi nhóm có một tiền tố cụ thể. Trong javascript, tôi không biết lớp nào từ nhóm nằm trên div. Tôi muốn có thể xóa tất cả các lớp với một tiền tố đã cho và sau đó thêm một tiền tố mới. Nếu tôi muốn xóa tất cả các lớp bắt đầu bằng "bg", làm cách nào để thực hiện điều đó? Một cái gì đó như thế này, nhưng nó thực sự hoạt động:

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

Với jQuery, phần tử DOM thực tế ở chỉ số 0, điều này sẽ hoạt động

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

Sự phân tách regex trên ranh giới từ \bkhông phải là giải pháp tốt nhất cho điều này:

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

hoặc dưới dạng 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;
};

Cập nhật ES6 2018:

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

Tôi đã viết một plugin jQuery đơn giản - alterClass , giúp loại bỏ lớp ký tự đại diện. Tùy chọn cũng sẽ thêm các lớp.

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

Bạn không cần bất kỳ mã jQuery cụ thể nào để xử lý việc này. Chỉ cần sử dụng RegExp để thay thế chúng:

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

Bạn có thể sửa đổi điều này để hỗ trợ bất kỳ tiền tố nào nhưng phương pháp nhanh hơn ở trên vì RegExp sẽ chỉ được biên dịch một lần:

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

Sử dụng chữ ký thứ 2 của $.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 cho biết:

... và .removeClass () sẽ xóa tất cả các lớp ...

Nó phù hợp với tôi;)

hoan hô

Một cách tiếp cận tôi sẽ sử dụng bằng cách sử dụng các cấu trúc jQuery đơn giản và các hàm xử lý mảng, là khai báo một hàm lấy id của điều khiển và tiền tố của lớp và xóa tất cả các lớp. Mã được đính kèm:

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

Bây giờ, chức năng này có thể được gọi từ bất kỳ đâu, khi nhấp vào nút hoặc từ mã:

removeclasses("a","bg");

Tôi đang tìm kiếm giải pháp cho chính xác cùng một vấn đề. Để loại bỏ tất cả các lớp bắt đầu bằng tiền tố "fontid_" Sau khi đọc bài viết này, tôi đã viết một plugin nhỏ mà tôi đang sử dụng bây giờ.

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

Sử dụng:

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

Đối với các trình duyệt hiện đại:

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

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

Tôi biết đó là một câu hỏi cũ, nhưng tôi đã tìm ra giải pháp mới và muốn biết liệu nó có nhược điểm không?

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

Trong một dòng ... Loại bỏ tất cả các lớp khớp với một biểu thức chính quy someRegExp

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

Câu trả lời của Prestaul rất hữu ích, nhưng nó không hoàn toàn phù hợp với tôi. Cách jQuery để chọn một đối tượng theo id không hoạt động. Tôi đã phải sử dụng

document.getElementById("a").className

thay vì

$("#a").className

Tôi cũng sử dụng gạch nối'- 'và các chữ số cho tên lớp. Vì vậy, phiên bản của tôi bao gồm '\ 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");