详解如何在jQuery选择器中使用正则表达式和属性过滤器

这一次，我们来学习使用正则表达式和属性过滤器来指定 jQuery 选择器的方法！

比正则表达式更简单的属性过滤器是什么？

让我们从学习属性过滤器开始，它比正则表达式更容易指定选择器！

首先，jQuery 选择器具有多种规范方法，但利用 HTML 属性的规范方法是我们接下来要介绍的属性过滤器。

例如，假设您有这样的 HTML：

<ul>
    <li id="sample1">示例1</li>
    <li id="sample2">示例2</li>
    <li id="sample3">示例3</li>
    <li id="sample4">示例4</li>
</ul>

指定 jQuery 属性的一般语法是：

HTML元素[属性=属性名]

通过使用上述语法，可以使用任何属性指定选择器。

例如，如果要获取“id=sample2”的元素，将如下所示。

var result = $('li[id="sample2"]');
 
console.log( result );

执行结果

[li#sample2......]

要注意的一点是指定选择器的方法。由于我们要指定id属性名称为“sample2”的元素，我们可以按照前面的语法写成“li[id="sample2"]”。

而本章的主题“属性过滤器”，是指“属性=属性名”的写法，一般有4种模式。

用“前缀匹配”指定

让我们从第一个模式“前缀匹配”开始！在前面的示例中，通过编写“属性=属性名”，我们获得了任意属性名称一致的HTML元素。

“前缀匹配”可以检索所有匹配属性名开头的字符串的元素，只需添加“^”，如“属性^=属性名”。请参阅下面的示例！

<body>
<ul>
    <li id="sample1">示例1</li>
    <li id="test1">测试1</li>
    <li id="sample2">示例2</li>
    <li id="test2">测试2</li>
</ul>
 
<script>
    var result = $('li[id^="sample"]');
 
    console.log( result );
</script>
</body>

执行结果

[li#sample1, li#sample2......]

在这个例子中，放置了不同id属性名的“li元素”，通过写“id^=”sample”，将所有属性名以“sample”开头的元素都提取出来。

从执行结果可以看出，“sample1,sample2”的每个元素都被提取出来了。前缀匹配是一个函数，如果属性名称开头的字符串部分匹配，则可以提取所有内容。

用“后缀匹配”指定

接下来，我们来谈谈反向匹配。如果你认为这与前面提到的前缀匹配相反的话很容易理解，但它是一个提取所有与属性名称末尾的字符串部分匹配的元素的函数。

写法是添加“$”，如“属性$=属性名”。请看下面的样本案例!

<body>
<ul>
    <li id="sample-text">示例1</li>
    <li id="test-sample">测试1</li>
    <li id="title-text">示例12</li>
    <li id="list-text">测试2</li>
</ul>
 
<script>
    var result = $('li[id$="text"]');
 
    console.log( result );
</script>
</body>

执行结果

[li#sample-text, li#title-text, li#list-text......]

在这个例子中，放置了几个属性名称以“text”结尾的元素，并通过编写“id $=”text“”来提取所有匹配的元素。查看执行结果，可以看到“sample-text、title-text、list-text”这三个被成功提取。

换句话说，后缀匹配通过检索与属性名称结尾部分匹配的所有元素。

用“部分匹配”指定

现在让我们了解部分匹配！与之前的“前缀/后缀匹配”不同，它是一种灵活的规范方法，可以提取指定的字符串是否包含在属性名称中的某处。符号方法通过添加 '*' 来实现，例如 '属性 *= 属性名'。

请参阅下面的示例！

<body>
<ul>
    <li id="sample-text">示例文本</li>
    <li id="test-sample">测试样本</li>
    <li id="title-text">标题文字</li>
    <li id="list-text">列表文本</li>
    <li id="list-sample-text">列出示例文本</li>
</ul>
 
<script>
    var result = $('li[id*="sample"]');
 
    console.log( result );
</script>
</body>

执行结果

[li#sample-text, li#test-sample, li#list-sample-text......]

此示例提取在其属性名称中的任何位置具有字符串“sample”的所有元素。

查看执行结果，可以看到“sample-text、test-sample、list-sample-text”这三个已经被成功提取。

“部分匹配”可能是最简单、最灵活和最方便使用的功能，因为它只需要指定的字符串位于属性名称中的某个位置。

用“不等于”指定

我们来看看“不等于”。请注意，这意味着将提取除指定属性名称之外的所有元素，并且不会像以前那样定位指定的属性名称。描述方法只是添加“！”，如“属性 != 属性名”。

请参阅下面的示例！

<body>
<ul>
    <li class="test">测试样本</li>
    <li class="title">标题文本</li>
    <li class="list">列表文本</li>
    <li class="list">列出示例文本</li>
</ul>
 
<script>
    var result = $('li[class!="list"]');
 
    console.log( result );
</script>
</body>

执行结果

[li.test, li.title......]

在这个例子中，它的意思是提取除类名“list”之外的所有元素，所以可以看到我们提取的是“test,title”这两个元素。

不等于一般适用于排除具有相同属性名称的元素的情况，所以class、name等属性居多。

详解如何在jQuery选择器中使用正则表达式和属性过滤器

如何使用正则表达式指定多个选择器？

通过使用正则表达式，可以指定比“属性过滤器”更详细的条件。

正则表达式不能在 jQuery 选择器中直接指定，但可以通过指定 HTML 父元素后的方法组合来实现。

使用each()方法

首先，让我们使用 jQuery 中经常使用的each()方法来指定选择器吧。步骤是指定所有的HTML元素，使用“each”判断各元素是否符合正则表达式并提取。

请参阅下面的示例！

<body>
<ul>
    <li class="test-sample">测试样本</li>
    <li class="title-123">标题文本</li>
    <li class="list-text">列表文本</li>
    <li class="list-sample-102">>列出示例文本</li>
</ul>
 
<script>
    var result = [];
 
    $('li').each(function( index, element ) {
 
        var value = element.className.match(/-d+/); //提取字符串-数字的class
 
        if( value ) result.push( $(this) );
 
    })
 
    console.log( result );
</script>
</body>

执行结果

0: [li.title-123]
1: [li.list-sample-102]

在这个例子中，使用“each”指定“element”作为函数的第二个参数，其中包含每个 HTML 元素。并且可以看到每个HTML元素的类名都使用了正则表达式“/-d+/”，并提取带有以“-”开始的数字类名的元素。

如果使用“match()”，不满足条件会返回“null”，所以可以使用IF语句进行条件分支。

如何使用filter

现在，让我们尝试使用“filter”指定一个正则表达式！顾名思义，“filter”是一种专门用于条件提取的方法，因此可以用比“each”更简单的描述来实现。

请参阅以下示例。

<body>
<ul>
    <li class="test-sample">测试样本</li>
    <li class="title-123">标题文本</li>
    <li class="list-text">列表文本</li>
    <li class="list-sample-102">列出示例文本</li>
</ul>
 
<script>
    var result = $('li').filter(function( index, element ) {
 
        return element.className.match(/-d+/); //提取字符串-数字的class
 
    })
 
    console.log( result );
</script>
</body>

执行结果