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

Question

上的类属性中删除以“蓝色”结尾的类

我想从所有标签示例 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" />

这将为我提供所有以“蓝色”结尾的类的元素，

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

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

Answer 1

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

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

您应该意识到的一件事是 $('[class$="blue"]') 对名为 < 的整个属性进行操作代码>类。我不对单个类名进行操作。因此，它会匹配：

class="happy text_blue"

但是，它不会匹配：

class="text_blue happy"

因为类属性不以 "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]);
    }
});

也可以这样做，这看起来更干净，但事实并非如此t 完美地清除要删除的类名周围的额外空格：

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

Answer 2

如果您要经常这样做，您可能需要更改分配班级的方式。您可以像这样创建 HTML：

<p class="text blue happy">this is blue text</p>

然后在 CSS 中使用 .text.blue 而不是使用 .text_blue 选择器。然后你可以简单地从类中删除“蓝色”。