jQuery 选择器正则表达式

IT技术 javascript jquery regex jquery-selectors
2021-01-20 07:42:10

我正在寻找有关使用 jQuery 选择器使用通配符或正则表达式(不确定确切的术语)的文档。

我自己寻找过这个,但一直无法找到有关语法和如何使用它的信息。有谁知道语法的文档在哪里?

编辑:属性过滤器允许您根据属性值的模式进行选择。

6个回答

您可以使用该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>

如何使用变量代替match(/abc+d/); ?
2021-03-23 07:42:10
@Sasivarnakumar 这个问题的答案在这里
2021-04-01 07:42:10

James Padolsey 创建了一个很棒的过滤器,允许使用正则表达式进行选择。

假设您有以下内容div

<div class="asdf">

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

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

另外,请查看有关选择器官方文档

更新::语法弃用 JQuery 3.0

由于jQuery.expr[':']在 Padolsey 的实现中使用已经被弃用并且会在最新版本的 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));
    }
});
行。我去过那里,但我真的不知道我要找的东西的名字。我又看了一眼,使用属性过滤器正是我所追求的。
2021-03-12 07:42:10
@padolsey 的正则表达式选择器效果很好。这是一个示例,您可以使用它迭代文本、文件和复选框输入字段或文本区域: $j('input:regex(type, text|file|checkbox),textarea').each(function(index){ // ... });
2021-03-15 07:42:10
-1. 实现这一点的代码不包含在答案中,并且容易受到链接失效的影响。此外,我在测试代码时发现了两个错误 - 它会从包含它们的正则表达式中删除逗号(通过替换matchParams.join('')with解决matchParams.join(',')),以及匹配'undefined''null'将匹配undefinedand 的任何模式null,分别。第二个错误可以通过检查测试值!== undefined!== null第一个来解决无论哪种方式,将函数传递.filter()给我都更容易,并且感觉更清晰/更具可读性。
2021-03-19 07:42:10
我收到错误:语法错误,无法识别的表达式:不受支持的伪:正则表达式
2021-03-26 07:42:10
下面来自 nickf 的答案应该是公认的。如果您正在阅读此答案,请务必阅读该答案!
2021-04-06 07:42:10

这些可能会有所帮助。

如果你是通过Contains找到的,那么它会是这样的

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

如果你是通过Starts With找到的,那么它会是这样的

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

如果你通过Ends With找到,那么它会是这样的

     $("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
     });
很好的答案,但是id作为标识符的 s不能包含空格,该~=示例应该更改为其他内容,例如class,这是一个以空格分隔的标识符列表。诸如此类class的东西就是~=属性选择器的用途。
2021-04-03 07:42:10

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

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

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

可以在这里找到许多非常有用的选择器,以避免使用正则表达式:http : //api.jquery.com/category/selectors/attribute-selectors/

这不适用于不区分大小写的匹配要求。.filter 函数更适合这些需求。
2021-03-24 07:42:10
这对我有好处,我只是想看看输入 id 末尾是否有“__destroy”,所以我这样使用*=$("input[id*='__destroy'][value='true']")
2021-04-06 07:42:10
var test = $('#id').attr('value').match(/[^a-z0-9 ]+/);

干得好!