使用正则表达式检查元素的类答案

【问题标题】：Check the class of an element with regex使用正则表达式检查元素的类
【发布时间】：2014-11-20 17:01:24
【问题描述】：

如何使用 jQuery 检查元素的类？

例如，在这段代码中，我想获取cl_gry50 类。

<span class="rate rate_cl_gry cl_gry50">
  <img src="img.png">
</span>

所以，有时，我需要检查的课程可能是：

cl_gry10
cl_gry20
cl_gry30
cl_gry40
cl_gry50

我需要正则表达式吗？谢谢。

【问题讨论】：

jsfiddle.net/fethnzLh

标签： jquery regex find contains

【解决方案1】：

Sterling Archer 的回答是好的开始，这里有一个改进的版本：

$("span[class*='cl_gry']").filter(function() {
    return this.className.match(/(^|\W)cl_gry/);
});

这将使用选择器来获得更好的性能，并使用正则表达式过滤掉不需要的匹配项。

用这个 HTML 测试过：

<span class="something cl_gry50"></span>
<span class="cl_gry50"></span>
<span class="fake_cl_gry"></span>

将匹配前 2 个跨度，但不匹配第三个。

如果你想要字符串“cl_gry50”，你可以像这样修改检查器：

var found = [];
$("span[class*='cl_gry']").filter(function() {
    var match = this.className.match(/((^|\W)cl_gry[^\W]+)/);
    if (!match) return false;
    found.push(match[0]);
    return true;
});
console.log(found); //Will contain ["cl_gry50", "cl_gry50"]

您可以使用indexOf 过滤掉重复的，但这需要 IE8 的 polyfill。

【讨论】：

【解决方案2】：

给这只猫剥皮的另一种方法

示例 HTML

<span id='span1' class="rate rate_cl_gry cl_gry50">
</span>

<span id='span2' class="cl_gry50">
</span>

<span id='span3' class="rate rate_cl_gry">
</span>

    $.extend($.expr[":"], {
        cl_gryN: function(e)
        {
            var cl_gryN = false;
            $.each($(e).attr('class').split(" "), function(k, v) {

                if (/cl\_gry[\d]+/.test(v))
                {
                    cl_gryN = true;
                }
            });
            return cl_gryN;
        }
    });

console.log($('#span1').is(':cl_gryN')); //true
console.log($('#span2').is(':cl_gryN')); //true
console.log($('#span3').is(':cl_gryN')); //false

【讨论】：