正则入门的那点事儿

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

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

———出自百度百科

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

相信了解一丢丢正则的应该都知道//这两个斜杠分别表示正则表达式的开始和结束，中间才是匹配的规则。 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-4405222、021-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个月(01～09和1～12)：/^(0?[1-9]|1[0-2])$/
14. 一个月的31天(01～09和1～31)：/^((0?[1-9])|((1|2)[0-9])|30|31)$/
复制代码

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