当前位置：首页 > jquery

jquery模糊匹配

2026-04-08 16:05:02jquery

jQuery模糊匹配的实现方法

使用`:contains()`选择器

jQuery的:contains()选择器可以实现简单的文本内容模糊匹配，查找包含指定文本的元素：

$("p:contains('关键字')").css("background-color", "yellow");

此方法区分大小写，且匹配的是元素的文本内容（包括子元素）。

使用属性选择器进行部分匹配

jQuery支持多种属性选择器进行模糊匹配：

[attribute*="value"]：属性值包含指定字符串
[attribute^="value"]：属性值以指定字符串开头
[attribute$="value"]：属性值以指定字符串结尾

$("input[name*='search']").addClass("highlight");

使用filter()方法自定义匹配

当需要更复杂的匹配逻辑时，可以使用filter()方法：

$("li").filter(function() {
    return $(this).text().toLowerCase().indexOf("keyword") !== -1;
}).addClass("matched");

使用正则表达式匹配

通过filter()结合正则表达式实现更灵活的匹配：

var regex = /pattern/i;
$("div").filter(function() {
    return regex.test($(this).text());
}).css("border", "1px solid red");

扩展jQuery选择器

可以扩展jQuery选择器实现自定义的模糊匹配逻辑：

jquery模糊匹配

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

// 使用方式
$("input:regex(data:value,^[0-9]{5}$)").css("background", "yellow");