javascript - 如何选择第一个单词相同而最后一个单词可选的属性？

Question

我有这种元素

<div class="clas"></div>
<div class="clas_temp"></div>
<div class="clastemp"></div>
<div class="clas_test"></div>
<div class="clas_tmp"></div>
<div class="clas_t"></div>

我需要选择属性id是否具有第一个单词clas以及可选的下一个值_test，_t，或临时。

我只知道使用以下语法选择第一个单词。

$( "div[class^='clas']" ).html( "insert!" );

上面的代码片段将选择以 clas 开头的所有类，但我需要更具体的第二个可选下一个值 _test、_t 或 临时。我怎么能那样做呢？可能的方法是使用像 (_test|_t|temp) 这样的正则表达式，但是 jQuery 中有正则表达式分组吗？

我期望的是结果会是这样的。

<div class="clas"></div>
<div class="clas_temp">insert!</div>
<div class="clastemp"></div>
<div class="clas_test">insert!</div>
<div class="clas_tmp"></div>
<div class="clas_t">insert!</div>

Answer 1

您可以使用.filter( function )为了使用正则表达式 expr 过滤选定的元素:

$("div[class^='clas']").filter((idx, ele) => ele.classList.value.match(/(_test|_t|temp)$/) != undefined)

或者您可以创建自己的选择器:

// add the new selector
;(function($){
    $.extend($.expr[':'],{
        classByRegex: function(a, b, c) {
            var cv = a.classList.value;  // get current class list
            var sel = c.pop();  // get the regex
            return cv.match(new RegExp(sel)) != undefined;
        }
    });
})(jQuery);


//use it

$( "div:classByRegex('^clas.*(_test|_t|temp)$')").text((idx, str) => str + ' insert!');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="clas">clas</div>
<div class="clas_temp">clas_temp</div>
<div class="clastemp">clastemp</div>
<div class="clas_test">clas_test</div>
<div class="clas_tmp">clas_tmp</div>
<div class="clas_t">clas_t</div>