删除所有以某个字符串开头的类

Question

我有一个div id="a",可以从几个组中附加任意数量的类.每个组都有一个特定的前缀.在javascript中,我不知道该组中的哪个类在div上.我希望能够清除具有给定前缀的所有类,然后添加一个新类.如果我想删除所有以"bg"开头的类,我该怎么做？像这样的东西,但实际上有效:

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

Answer 1

字边界上的正则表达式分裂\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;
};

2018年ES6更新:

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

Answer 2

使用jQuery,实际的DOM元素在索引为零,这应该工作

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

Answer 3

我写了一个简单的jQuery插件 - alterClass,它可以删除通配符类.也可以选择添加类.

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

Answer 4

您不需要任何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;
}

Answer 5

使用第二个签名的$.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>?]

Answer 6

对于现代浏览器：

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

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