jquery - 如何从class属性中删除与模式匹配的类，而保留其他类？

我想从所有标签的class属性中删除以'blue'结尾的类

范例html

<p class="text_blue happy">this is blue text</p>
<p class="text_red nothappy">this is red text</p>
<img class="img_blue nothappy" />

这将为我提供所有以'blue'结尾的类的元素

$('[class$=blue]');

如何从class属性中弹出这些匹配的类名？

最佳答案

您可以使用以下正则表达式提取整个类的名称:

$('[class$="blue"]').each(function() {
    var clsName = this.className.match(/\w*blue\w*/)[0];
});

您应该意识到的一件事是，$('[class$="blue"]')对名为class的整个属性进行操作。我没有对单个类(class)名称进行操作。因此，它将匹配:

class="happy text_blue"

但是，它将不匹配:

class="text_blue happy"

因为class属性不以"blue"结尾。如果希望它获取任何包含"blue"的类名，而不管它在类名属性中的位置，则必须使用:

$('[class*="blue"]').each(function() {
    var clsName = this.className.match(/\w*blue\w*/)[0];
});

如果您还想过滤出不以蓝色结尾的类名，则可以使用JS来做到这一点，如下所示:

$('[class*="blue"]').each(function() {
    var match = this.className.match(/\w*blue(\b|$)/);
    if (match) {
        var clsName = match[0];
    }
});

如果要从对象中删除这些类名，可以这样进行:

$('[class*="blue"]').each(function() {
    var match = this.className.match(/\w*blue(\b|$)/);
    if (match) {
        $(this).removeClass(match[0]);
    }
});

也可以用这种方法完成，这看起来更干净一些，但是它并不能完全清除要删除的类名周围的多余空格:

$('[class*="blue"]').each(function() {
    this.className = this.className.replace(/\w*blue(\b|$)/, "").replace(/\s+/g, ' ');
});