http://james.padolsey.com/snippets/regex-selector-for-jquery/

A while ago I published an article explaining the utter awesomeness of extending jQuery’s filter selectors. Building on that here’s something new; a regular expression selector. jQuery’s current attribute selectors (CSS3) do allow basic regex notation but no where near as much as this:

: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));
}

Usage

It’s pretty simple to use, you need to pass an attribute and a regular expression to match against. The regular expression must be in non-literal notation; so replace all backslashes with two backslashes (e.g. ^\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...

Note: All searches are case insensitive; you can change this by removing the ‘i’ flag in the plugin.

This plugin also allows you to query CSS styles with regular expressions, for example:

// 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$))');

Additionally it allows you to query data strings added to elements via jQuery’s ‘data’ method:

// 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)');

Have fun!

jQuery 正则选择器的更多相关文章

  1. jQuery的选择器+实例

    返回目录 jQuery的冒号选择器 表单  :input :text :password :radio :checkbox :submit :image :reset :button :file :h ...

  2. jQuery的选择器总结

    jQuery的选择器 不会返回undefined或null 基本选择器 id选择器:$('#id') element选择器:$('elem') class选择器:$('.class') 通配符选择器: ...

  3. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

  4. HTML 学习笔记 JQuery(选择器)

    学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...

  5. jQuery的选择器中的通配符总结

    1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...

  6. JQuery 层次选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...

  7. jQuery过滤选择器

    //基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...

  8. jquery相对选择器,又叫context选择器,上下文选择器;find()与children()区别

    jquery相对选择器有两个参数,jQuery函数的第二个参数可以指定DOM元素的搜索范围(即以第二个参数指定的内容为容器查找指定元素). 第二个参数的不同的类型,对应的用法如下表所示. 类型 用法 ...

  9. jQuery之选择器

    jQuery元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择和操作,而在 HTML DOM中,选择器可以对DOM元素组或单个DOM 节点进行操作.通俗点说,选择器的作用就 ...

随机推荐

  1. 【java】jackson 中JsonFormat date类型字段的使用

    为了便于date类型字段的序列化和反序列化,需要在数据结构的date类型的字段上用JsonFormat注解进行注解具体格式如下 @JsonFormat(pattern = "yyyy-MM- ...

  2. sublime text2在windows中以命令行启动

    sublime text2在windows中以命令行启动   把执行文件添加到PATH中即可,如图: 如果你和我一样习惯了mac下的简写subl,那么需要在程序目录中新建一个批处理文件subl.bat ...

  3. asp.net下出现其中的组件“访问被拒绝”的解决方法

    一.一般情况下,对该组件重新授权即可.附上ASP,NETWORK SERVICE用户的可修改权限. 二.其中最常见的原因是Indexing service服务引起的.解决方法就是停用Indexing  ...

  4. 在Eclipse中使用JUnit4进行单元测试(初级篇)

    首先,我们来一个傻瓜式速成教程,不要问为什么,Follow Me,先来体验一下单元测试的快感! 首先新建一个项目叫JUnit_Test,我们编写一个Calculator类,这是一个能够简单实现加减乘除 ...

  5. 扁平设备树(FDT)

    组成 扁平设备树主要由4大部分组成:头部(header),预留内存块(memory reservation block),结构块(struct block)和字符串块(strings block).这 ...

  6. [HDU 4336] Card Collector (状态压缩概率dp)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4336 题目大意:有n种卡片,需要吃零食收集,打开零食,出现第i种卡片的概率是p[i],也有可能不出现卡 ...

  7. 黑马程序员_ C语言基础(二)

    ------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- 概览 今天基础知识分为以下几点内容(注意:循环.条件语句在此不再赘述):   1.Hello W ...

  8. SMON: Parallel transaction recovery tried 引发的问题--转载

    SMON: Parallel transaction recovery tried 这个一般是在具有在跑大数据量的 transaction的时候kill掉了进程而导致 smon 去清理 回滚段时导致的 ...

  9. PL/SQL如何导入dmp文件

    -------------创建表空间 create tablespace portal_data datafile'E:\OracleDB\System_TableSpace\portal_data0 ...

  10. HEVC学习之一编码框架

    接触H265时间不是很长,看了一些东西,但是一直没有时间静下心来整理.H265的学习主要是参考万帅.杨付正的<新一代高效视频编码 H265/HEVC 原理.标准与实现>移书,这本书对H26 ...