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

IT技术 javascript jquery css
2021-01-23 00:58:51

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

$("#a").removeClass("bg*");
6个回答

在字边界上拆分正则表达式\b并不是解决此问题的最佳解决方案：

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

或作为 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;
};

2018 ES6 更新：

const prefix = "prefix";
const classes = el.className.split(" ").filter(c => !c.startsWith(prefix));
el.className = classes.join(" ").trim();
更有效的解决方案使用 map： $e.attr('class', $.map($e.attr('class').split(' '), function (klass) { return klass.indexOf(prefix) != 0 ? klass : undefined; }).join(' '));
2021-03-14 00:58:51
这种方法效果最好。我使用了@JakubP 的插件。如果可以的话，一个建议是：它的作用是什么，当它现在返回类时，它会占用大量空间。例如class="blackRow blackText orangeFace blackHead"将返回class=" orangeFace "如果运行removeClassPrefix("black");。我解决了这个由微调，像这样的结果：el.className = $.trim(classes.join(" "));。
2021-03-20 00:58:51
我喜欢它虽然这实际上不是有效的代码，因为匿名函数filter必须返回一个布尔值。这将起作用：var classes = $(e).attr("class").split(" "); $(classes).each(function(i, item) { classes[i] = item.indexOf("prefix") === -1 ? item : "prefix-new"); }); $(e).attr("class", classes.join(" "));
2021-03-26 00:58:51
这比使用带有 \b（词边界检查）的 RegExp 更好，因为它可以防止“僵尸类”弹出。如果您有“前缀-后缀”之类的类，则此线程中的“最佳答案”将离开类“-suffix”，因为 \b 将在 '-' 字符之前拆分。您的 split-map-join 解决方案可以解决这个问题:) 我围绕您的解决方案 Kabir 创建了一个小型 jQuery 插件：（gist.github.com/2881585）
2021-04-02 00:58:51
+1 我也同意，所有其他答案似乎只是一个简单的正则表达式，会在非空格单词边界上中断。如果我明天有时间，我将提供一个单元测试来证明这一点。
2021-04-02 00:58:51

使用 jQuery，实际 DOM 元素的索引为零，这应该可以工作

$('#a')[0].className = $('#a')[0].className.replace(/\bbg.*?\b/g, '');
小心这个。单词边界在破折号字符 ('-') 和点等处拆分，因此类名如 "bg.a"、"bg-a" 等不会被删除，而是替换为 ".a"、"-a" 等. 因此，如果您的类名带有标点符号，您可能会因为运行简单的正则表达式替换而遇到麻烦。这是一个关于词边界定义的 SO 线程
2021-04-05 00:58:51
Kabir Sarin 在下面的 split(' ') 和 indexOf 答案是更好的 IMO，因为它不会导致那些特殊字符的“僵尸”类弹出。
2021-04-06 00:58:51
这种方法仍然可以与更好的正则表达式一起使用，例如在这里找到的那​​个：stackoverflow.com/a/2644364/1333402
2021-04-09 00:58:51

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

$( '#foo' ).alterClass( 'foo-* bar-*', 'foobar' )
谢谢皮特！刚刚使用了您的插件，效果很好……为我节省了一些时间！
2021-03-22 00:58:51

您不需要任何 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;
}
如果前缀以破折号结尾，则需要更改正则表达式。 new RegExp('\\b' + prefix + '[\\S]*\\b', 'g')
2021-03-25 00:58:51

使用第二个签名的$.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>​]
从 jQuery v1.4 开始，这是最好的方法。
2021-03-27 00:58:51
其它你可能感兴趣的问题
上一篇访问具有空格的 JSON 对象键 下一篇Puppeteer 等待页面完全加载