现在位置首页 / 前端开发 /正文

jquery 解析正则表达式及常见的Regex规则和表达式

作者: IT小兵 | 2014年8月14日| 热度:℃ | 评论: |参与:

在做项目的时候,往往会遇到需要对页面的上得某个值进行验证,而这个验证并不是常用的,需要用自己定义的规则来验证。这样的话,就可以使用jquery的自定义验证方法了。

今天分享一下什么正则表达式,那些是我们常用的表达式,js中怎么定义正则表达式串,jquery怎么执行表达式??


1、常见的正则表达式

数字

正常的数字(digit)之外,还有可能包括正、负号,科学计数法,小数位,甚至用逗号分隔千分位。

逻辑规则:

起始位后一定是+/-号,也可以没有 ^[+-]?

至少有一位以上的数字 \d+

可能会跟着千分位分隔的逗号,暂时不考虑是否一定是3位分隔,规则可以出现一次或多次 (,\d+)*

如果是小数那么一定是小数点后带有至少一位以上的数字,规则仅能出现一次 (.\d+)

如果是科学计数法,则前面一定是小数,后面跟有e和次幂,规则仅能出现一次 (.\d+(e\d+))

任何数字的结尾必须是数字

满足上述条件检验数字的正则表达式为:^[+-]?\d+(,\d+)*(.\d+(e\d+)?)?$

符合该条件的example包括:

3 (整数)

3.14 (小数)

+3.14 (带有+标识数字)

-2.5 (带有-标识数字)

128,234 (会计计数法)

1.9e10 (科学计数法)

且过滤掉小数点重复出现多次,科学技术法不合规或重复出现多次,非数字如720p的字符串
此处尤其要注意科学的条件,前面必须是合法小数后面是e和次幂,注意次幂必须有。

电话号码(Phone Numbers)

美国的电话号码规则:总计10位数字,但有可能带有国家号码1。可以接受的输入格式包括:

xxx-xxx-xxxx

xxx xxx xxxx

(xxx)xxx-xxxx

xxxxxxxxxx

1 上述格式组合

+1 上述格式组合

满足上述条件检验美国电话的正则表达式为: (+?1[\s-])?(?d{3})?[\s-]?\d{3}[\s-]?\d{4}

进一步可以将国家号的验证修改为(+?\d+[\s-])?,这样就可以支持诸如+86, 86 , 86-这样的格式了。

中国的手机规则:总计11位数字,一般情况下不加上任何特殊符号的分隔。如果仅考虑以下4种格式:

xxxxxxxxxxx

+86-xxxxxxxxxxx

+86 xxxxxxxxxxx

+86xxxxxxxxxxx

满足上述条件检验中国手机号码的正则表达式为:(+86[\s-]?)?\d{11}

邮件(Email)

邮件的格式较为复杂,本处仅考虑@前面使用字符和.的情况,以及@后面可能会有二级域名的情况。另外,作为邮件过滤的一部分,输入邮件地址的时候有可能会加上+字符串这样标识来为特定渠道收到的邮件打标签,这样的情况也需要考虑进去。
满足上述条件检验邮件的正则表达式为:([\w.]+)(+[\w.]+)?@\w+(.\w+){1,2}

密码(Password)

不同强度的密码,
要求至少包含数字或字母:[\da-zA-Z]\d+[a-zA-Z]+[\da-zA-Z]

必须数字、字母和特殊字符3种混排的:
(\d+[a-zA-Z]+[-=\\\[\];',./~!@#$%^&*()_+|{}:"<>?]+) #数字开头 |(\d+[-=\[];',./~!@#$%^&()_+|{}:"<>?]+[a-zA-Z]+) #数字开头
|([a-zA-Z]+\d+[-=\\\[\];',./~!@#$%^&*()_+|{}:"<>?]+) #字母开头 |([a-zA-Z]+[-=\[];',./~!@#$%^&()+|{}:"<>?]+\d+) #字母开头
|([-=\\\[\];',./~!@#$%^&*()_+|{}:"<>?]+\d+[a-zA-Z]+) #特殊字符开头 |([-=\[];',./~!@#$%^&*()+|{}:"<>?]+[a-zA-Z]+\d+) #特殊字符开头

HTML

HTML更为推荐使用其他的方式而非正则表达式进行过滤。
获取Tag:<(\w+)
获取Tag内容:>([\w\s])<
获取Attribute的值:='([\w://.])

2、Jquery实现正则表达式


jquery实现数字验证:

//select integers only
var intRegex = /[0-9 -()+]+$/;   
//match any ip address
var ipRegex = 'bd{1,3}.d{1,3}.d{1,3}.d{1,3}b';  
//match number in range 0-255
var num0to255Regex = '^([01][0-9][0-9]|2[0-4][0-9]|25[0-5])$';
//match number in range 0-999 
var num0to999Regex = '^([0-9]|[1-9][0-9]|[1-9][0-9][0-9])$';
//match ints and floats/decimals
var floatRegex = '[-+]?([0-9]*.[0-9]+|[0-9]+)'; 
//Match Any number from 1 to 50 inclusive
var number1to50Regex = /(^[1-9]{1}$|^[1-4]{1}[0-9]{1}$|^50$)/gm;

jquery实现表单的email 银行卡/用户名密码校验:

//match email address
var emailRegex = '^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$'; 
//match credit card numbers
var creditCardRegex = '^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35d{3})d{11})$'; 
//match username
var usernameRegex = '/^[a-z0-9_-]{3,16}$/'; 
//match password
var passwordRegex = '/^[a-z0-9_-]{6,18}$/'; 
//Match 8 to 15 character string with at least one upper case letter, one lower case letter, and one digit (useful for passwords).
var passwordStrengthRegex = /((?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,15})/gm; 
//match elements that could contain a phone number
var phoneNumber = /[0-9-()+]{3,20}/;


jquery实现日期验证:

//MatchDate (e.g. 21/3/2006)
var dateRegex = /(d{1,2}/d{1,2}/d{4})/gm; 
//match date in format MM/DD/YYYY
var dateMMDDYYYRegex = '^(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)dd$'; 
//match date in format DD/MM/YYYY
var dateDDMMYYYRegex = '^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)dd$';


jquery实现url验证:

//match a url
var urlRegex = '/^(https?://)?([da-z.-]+).([a-z.]{2,6})([/w .-]*)*/?$/'; 
//match a url slug (letters/numbers/hypens)
var urlslugRegex = '/^[a-z0-9-]+$/'; 
//match a url string (Fixes spaces and querystrings)
var urlRegex = /(https?://)?([da-z.-]+).([a-z.]{2,6})([/w.-=?]*)*/?/


jquery实现元音字母验证:

//select vowels only
var vowelRegex = /^[aeiou]/;


jquery实现空格验证:

//select whitespace
var whiteSpaceRegex = '^[ t]+'; 
//select whitespace and tabs
var whiteSpaceRegex = '^[ t]+|[ t]+$';  
//select whitespace and linebreaks
var whiteSpaceRegex = '[ trn]';  
//replace newline characters with <br /> tags
newLineToBr = function(str) { return str.replace(/(rn|[rn])/g, '<br />'); }


jquery实现域名验证:

//match domain name (with HTTP)
var domainRegex = /(.*?)[^w{3}.]([a-zA-Z0-9]([a-zA-Z0-9-]{0,65}[a-zA-Z0-9])?.)+[a-zA-Z]{2,6}/igm; 
//match domain name (www. only) 
var domainRegex = /[^w{3}.]([a-zA-Z0-9]([a-zA-Z0-9-]{0,65}[a-zA-Z0-9])?.)+[a-zA-Z]{2,6}/igm; 
//match domain name (alternative)
var domainRegex = /(.*?).(com|net|org|info|coop|int|com.au|co.uk|org.uk|ac.uk|)/igm; 
//match sub domains: www, dev, int, stage, int.travel, stage.travel
var subDomainRegex = /(http://|https://)?(www.|dev.)?(int.|stage.)?(travel.)?(.*)+?/igm;


jquery实现图片标签验证:

//Match jpg, gif or png image   
var imageRegex = /([^s]+(?=.(jpg|gif|png)).2)/gm; 
//match all images
var imgTagsRegex = /<img .+?src="(.*?)".+?/>/ig;  
//match just .png images
<img .+?src="(.*?.png)".+?/>


jquery实现其他验证:

颜色值RGB

颜色hex

html验证

js文件和css文件校验

//match RGB (color) string
var rgbRegex = /^rgb((d+),s*(d+),s*(d+))$/;  
//match hex (color) string
var hexRegex = '/^#?([a-f0-9]{6}|[a-f0-9]{3})$/'; 
//Match Valid hexadecimal colour code
var hexRegex = /(#?([A-Fa-f0-9]){3}(([A-Fa-f0-9]){3})?)/gm; 
//match a HTML tag (v1)
var htmlTagRegex = '/^< ([a-z]+)([^<]+)*(?:>(.*)< /1>|s+/>)$/'; 
//match HTML Tags (v2)
var htmlTagRegex = /(< (/?[^>]+)>)/gm; 
//match /product/123456789
var productUrlRegex = '(/product/)?+[0-9]+';  
//Match Letters, numbers and hyphens
var lnhRegex = /([A-Za-z0-9-]+)/gm;  
//match all .js includes    
var jsTagsRegex = /<script .+?src="(.+?.js(?:?v=d)*).+?script>/ig;  
//match all .css includes
var cssTagsRegex = /<link .+?href="(.+?.css(?:?v=d)*).+?/>/ig;


3 jquery执行正则表达式的方法和测试方法:


调用jquery的.exec();

exec()方法简单地测试一个字符串并返回匹配的匹配文本如果找到一个匹配,否则返回null。

/* match just the href of js includes */
var jsSrcRegex = /src="(.+?)"/igm; 
 
/* html for js include */
var html = '<script type="text/javascript" src="/jquery-1.6.1.min.js"></script>';
 
console.log(jsSrcRegex.exec(html));
 
console.log(html);
console.log(jsSrcRegex);
 
console.log(jsSrcRegex.exec(html));

打印执行结果:发现返回null

regex-compile1

exec有时候是有问题。返回null。所以建议使用:.compile

/* html for js include */
var html = '<script type="text/javascript" src="/jquery-1.6.1.min.js"></script>';
 
console.log(jsSrcRegex.exec(html));
 
/* recompile the regex */
jsSrcRegex.compile(jsSrcRegex);
 
console.log(html);
console.log(jsSrcRegex);
 
console.log(jsSrcRegex.exec(html));


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询