阅读 365

正则入门的那点事儿

有很多前端小伙伴们对正则抱有敬畏之心,有的想着用的地方不多,用的时候再查,所以迟迟没有对正则表达式下手,今天,博主助各位道友一臂之力,让各位道友早日渡劫,修得正果。

正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符、及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑。

———出自百度百科

说下正则的两种书写风格:

相信了解一丢丢正则的应该都知道//这两个斜杠分别表示正则表达式的开始和结束,中间才是匹配的规则。 1.JS风格

let re = new RegExp('/\d/g')
复制代码

2.perl风格

let re = /\d/g
复制代码

相信大家见到最多的肯定是第二种,原因很简单,就是简单喽。

先来说下转义字符

转义字符都有个特点,前面要加一个反斜杠\,比如:

\d 等价于 0~9;

\w 等价于 a~z加上0~9加上A-Z;

\s 等价于 空白字符,比如空格,制表符,换页符;

\ . 等价于 任何字符

比如上面的:

let re = /\d/g     //表示匹配一个数字,为什么是一个,下面会讲
复制代码

比较常用的就是这三个,说多了怕大家记不住,想了解更多转义字符戳这里:www.runoob.com/regexp/rege…

稍微提一嘴,他们的大写就表示他们的取反。

再来说下元字符 []

元字符一般有三种情况:

/\a[abc]q/      //表示中间可以是a,b,c中的一个
/\[a-z]/        //表示a到z中的一个
/\[^a-z]/       //表示非小写字母
复制代码

值得注意,当你想匹配数字或字母时,应该这样写

/\[a-z0-9]/     //中间不需要东西隔开
复制代码

发现没有,转义字符其实就是元字符的一种简写,比如

 \d === [0-9]
 \w === [a-zA-Z0-9]
 \D === [^0-9]
复制代码

是不是很简单?

注意,^放在[]里面和外面表达的意思完全不同啊,下面会讲

上面我们提到匹配一个数字,下面为大家揭晓一个新东西,量词

当我们不写量词的时候,默认是一个。 介绍下量词的几种形式:

/\d{11}/        //匹配11个数字
/\d{2,11}/      //匹配2到11个数字
/\d{2,}/        //匹配至少两个数字
/\d+/           //匹配一个或多个数字
/\d?/           //匹配0个或1个数字
复制代码

举个小栗子,大家经常看到webpack的loader里面会写到:

/\.jsx?$/        //意思就是指.js或.jsx结尾
复制代码

借此引出一个新的东西,修饰符

修饰符就两种啦,^表示行首,$表示行尾,就这么简单! 比如:

/1\d{4}/    //这个只要字符串有符合1****就ok
/^1\d{4}$/   //表示1开头,后面跟4个数字
复制代码

再介绍个更简单的东西,或 |

没错就是或运算符 用法也很简单,值得注意的是或运算符优先等级很低,一般搭配()来使用。再举个webpack里的loader的栗子:

/\.(png|jpg|gif)$/  //用过webpack的一定眼熟,这就是匹配以png或jpg或gif结尾的东西啊
复制代码

so easy!

别怕别怕,快完了,一个小东西,叫它选项吧

就介绍两种好吧:

i大小写

g全局匹配

这两个字母一般写在最后一个斜杠的后面!

别怕,最后一个了,就是正则的方法

常用的有:

search:返回字符串匹配第一次出现的位置

match:返回符合要求的东西

replace:字面意思,替换

test:测试,返回布尔值

split:根据你给的东西来切割字符串

没啦?没了,正则真正常用的就这点东西了,关键在于活学活用,当然用的多了,自然就懂套路了。在这里,给各位看官奉献一波常用的正则表达式

腾讯QQ号:/^[1-9]\d{4,12}$/ (腾讯QQ号从10000开始)
0~9999: /[1-9]\d{0,3}/26个英文字母组成的字符串:/^[a-z]+$/i
Email地址:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
域名:/[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
国内电话号码(0511-4405222021-87888822):/\d{3}-\d{8}|\d{4}-\d{7}/
身份证号(15位、18位数字):/^\d{15}|\d{18}$/

日期格式:/^\d{4}-\d{1,2}-\d{1,2}/
13. 一年的12个月(0109112):/^(0?[1-9]|1[0-2])$/
14. 一个月的31天(0109131):/^((0?[1-9])|((1|2)[0-9])|30|31)$/
复制代码

好啦,能看到这里,说明我写的东西对道友还是有点帮助的,写博客不易,顺手点个赞呗。

关注下面的标签,发现更多相似文章
评论