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

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 或temp。

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

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

sn-p 上方将选择以clas 开头的所有类，但我需要更具体的第二个可选下一个值_test、_t 或temp。我怎么能那样做？可能的方法是使用像(_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 ) 来过滤带有正则表达式的选定元素：

$("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>

Answer 2

要匹配所有这三个，选择器会很长：div[class^='clas'][class$='_temp'], div[class^='clas'][class$='_test'], div[class^='clas'][class$='_t']

查看[attribute$=value] 选择器。

var selector = "div[class^='clas'][class$='_temp'], div[class^='clas'][class$='_test'], div[class^='clas'][class$='_t']";

var els = document.querySelectorAll(selector);

console.log(els);

<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>

或者，您可以分两步完成..

var selector = ", div[class^='clas'], div[class^='clas']";

var $els = $("div[class^='clas']").filter("[class$='_temp'], [class$='_test'], [class$='_t']");

$els.each(console.log);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>