jQuery 正则表达式选择器 - 文章教程

jQuery 正则表达式选择器

发布于 2017-08-26 字数 2286 浏览 2269 评论 0

jQuery 的选择器已经足够的强大了,但是还不够智能,也许你有一些特殊的要求,这里有一篇可以拓展 jQuery 选择器功能的文章,让 jQuery 选择器支持正则表达式的写法,让你更加容易的去查找需要的元素。

:regex

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,'')
        },
        regexFlags = 'ig',
        regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
    return regex.test(jQuery(elem)[attr.method](attr.property));
}

使用方法

他的使用方法非常的简单,你需要通过设置一个属性和一个正则表达式,正则表达式必须在非文字符号,所以更换所有反斜杠和两个反斜杠,例如:^\w+$ -> ^\\w+$

// Select all elements with an ID starting a vowel:
$(':regex(id,^[aeiou])');
 
// Select all DIVs with classes that contain numbers:
$('div:regex(class,[0-9])');
 
// Select all SCRIPT tags with a SRC containing jQuery:
$('script:regex(src,jQuery)');
 
// Yes, I know the last example could be achieved with 
// CSS3 attribute selectors; it's just an example...

注意默认情况下,所有的搜寻是不区分大小写的,不过你可以在插件中修改修饰符 /i 来更改搜索范围。

这个插件还允许你使用正则表达式查询CSS样式,例如:

// Select all elements with a width between 100 and 300:
$(':regex(css:width, ^[1-3]\\d{2}px$)');
 
// Select all NON block-level DIVs:
$('div:not(:regex(css:display, ^block$))');

此外,它允许你查询数据的字符串添加到元素通过jQuery的数据的方法:

// Add data property to all images (just an example);
$('img').each(function(){
    $(this).data('extension', $(this)[0].src.match(/.(.{1,4})$/)[1]);
});

// Select all images with PNG or JPG extensions:
$('img:regex(data:extension, png|jpg)');

原文:https://j11y.io/snippets/regex-selector-for-jquery/

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0