jQuery选择器正则表达式

小开

最佳答案

James Padolsey创建了美妙的过滤器，允许regex用于选择。

假设你有以下div:

<div class="asdf">

Padolsey的:regex过滤器可以这样选择它:

$("div:regex(class, .*sd.*)")

另外，检查关于选择器的官方文档。

更新:`:`语法弃用JQuery 3.0

因为在Padolsey的实现中使用的jQuery.expr[':']已经被弃用，并且会在最新版本的jQuery中呈现语法错误，下面是他的代码适应jQuery 3+语法:

jQuery.expr.pseudos.regex = jQuery.expr.createPseudo(function (expression) {
return function (elem) {
var matchParams = expression.split(','),
validLabels = /^(data|css):/,
attr = {
method: matchParams[0].match(validLabels) ?
matchParams[0].split(':')[0] : 'attr',
property: matchParams.shift().replace(validLabels, '')
},
regexFlags = 'ig',
regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g, ''), regexFlags);
return regex.test(jQuery(elem)[attr.method](attr.property));
}
});

小开

您可以使用filter函数来应用更复杂的正则表达式匹配。

下面是一个只匹配前三个div的例子:

$('div')
.filter(function() {
return this.id.match(/abc+d/);
})
.html("Matched!");

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


<div id="abcd">Not matched</div>
<div id="abccd">Not matched</div>
<div id="abcccd">Not matched</div>
<div id="abd">Not matched</div>

小开

$("input[name='option[colour]'] :checked ")

小开

id和类仍然是属性，因此如果进行相应的选择，可以对它们应用regexp属性筛选器。点击此处阅读更多信息: # EYZ0 < / p >

小开

var test = $('#id').attr('value').match(/[^a-z0-9 ]+/);

给你!

小开

如果正则表达式的使用仅限于测试属性是否以某个字符串开头，则可以使用^ JQuery选择器。

例如，如果你只想选择id以“abc”开头的div，你可以使用:

$("div[id^='abc']")

可以在这里找到很多非常有用的选择器来避免使用regex: http://api.jquery.com/category/selectors/attribute-selectors/

小开

这些都是有帮助的。

如果你通过包含找到它，那么它会像这样

    $("input[id*='DiscountType']").each(function (i, el) {
//It'll be an array of elements
});

如果你通过开始于找到它，那么它会像这样

    $("input[id^='DiscountType']").each(function (i, el) {
//It'll be an array of elements
});

如果你通过结尾找到它，那么它会像这样

     $("input[id$='DiscountType']").each(function (i, el) {
//It'll be an array of elements
});

如果你想选择Id不是一个给定的字符串 . #的元素

    $("input[id!='DiscountType']").each(function (i, el) {
//It'll be an array of elements
});

如果你想选择名称包含一个给定的单词，由空格分隔 . #的元素

     $("input[name~='DiscountType']").each(function (i, el) {
//It'll be an array of elements
});

如果你想选择Id等于一个给定的字符串，或者以该字符串开头，后跟一个连字符 . #的元素

     $("input[id|='DiscountType']").each(function (i, el) {
//It'll be an array of elements
});

小开

添加jQuery函数，

(function($){
$.fn.regex = function(pattern, fn, fn_a){
var fn = fn || $.fn.text;
return this.filter(function() {
return pattern.test(fn.apply($(this), fn_a));
});
};
})(jQuery);

然后,

$('span').regex(/Sent/)

将选择所有文本匹配/Sent/的span元素。

$('span').regex(/tooltip.year/, $.fn.attr, ['class'])

将选择类匹配/tooltip.year/的所有span元素。

小开

如果你只是想选择包含给定字符串的元素，那么你可以使用以下选择器:

# EYZ0

小开

我只是举了一个实时的例子:

在原生javascript中，我使用下面的代码片段来查找id以“select2-qownerName_select-result”开头的元素。

# EYZ0

当我们从javascript转换到jQuery时，我们用下面的代码片段取代了上面的代码片段，它涉及较少的代码更改，而不影响逻辑。

# EYZ0

jQuery选择器正则表达式

更新::语法弃用JQuery 3.0

更新:`:`语法弃用JQuery 3.0