正则表达式是由一些具有特殊含义的字符组成的字符串，多用于查找、替换符合规则的字符串。在表单验证、Url映射等处都会经常用到。

在写正则表达式的时候，我们需要把模式写入一对//正斜杠里面

/正则表达式/匹配模式

网上大部分都是正则表达式的概念，晦涩难懂又难记，咱就是说先不看这些个概念，咱们直接学习10个前端非常常用的正则表达式的案例，在案例讲解中我会用红色加粗字体进行重点标注哪个正则表达式表示的是什么意思，方便大家重点了解，相信学完这10个必能打通你的任督二脉，轻松搞定正则表达式如何书写。最后，我会在文章结尾附上正则表达式的总结，方便大家巩固所学知识。话不多说，我们开干！

---

一、匹配手机号

1、我们知道手机号是有特殊的字符，是由1开头的数字，在正则表达式中： ^表示开头。，所以：

/^1/

2、第二位数字一般是3,4,5,7,8中的一个数字，我们用[]来匹配，[]里的数字表示只匹配一个数字。如下，表示只匹配3,4,5,7,8中的一个数字，作为第二位。

/^1[34578]/

3、接下来后面的都是0到9的数字。

手机号码有11位，我们已经确定了两位，所以还有9位没确定，\d代表数字。

{m}表示匹配m位个符号，{9}在这里就表示匹配9个数字。

为了严谨，我们在结尾加上$，表示：是以9个数字结束。

/^1[34578]\d{9}$/

4、最后再在正斜杠后面加上g来表示全局匹配，也就是查找字符串的全部内容，而不是匹配到第一个就完事。

/^1[34578]\d{9}$/g

---

二、QQ号

qq号也是比较常见的。

1、QQ号第一个数不可能是0，因此为0-9，[1-9]表示从1到数字9中任选一位。

/^[1-9]/g

[xxx-xxx]是一种简写方式，比如匹配26个小写字母，我们可以写[a|b|c|d|e|f|g|h|i....]，表示匹配a或者b或者c或者d......,可是这样写下去非常麻烦， 我们就可以写成[a-z]，这就代表匹配所以的小写字母辣，所有大小写字母就可以这样写：[a-zA-Z]。注意：[]里只匹配一位

2、目前qq最多是10位数字，最少5位，用{4,9}表示匹配4个到9个这样的，这里包括4和9，也就是匹配区间为[4,9]

/^[1-9][1-9]{4,9}/g

这里我们也可以写成：

/^[1-9]/d{4,9}/g

---

三、16进制的方式表示颜色

16进制的方式表示颜色在web开发中也非常常见。

1、首先开头是会有#这个符号，然后是六个字符，可以是0到9，a到f，A到F，也就是[0-9a-fA-F]

/#[0-9a-fA-F]{6}/g

2、还没结束哦，因为有的时候16进制的方式是可以缩写的，当字母俩俩一样的时候，就会省略成一个3位的字母，比如：#ccaaff就会变成#caf，#FFFFFF就会变成#FFF。

既然是有这两种情况，我们就需要用|符号来表示"或者"。

/#[0-9a-fA-F]{6}|[0-9a-fA-F]{3}/g

3、但是这两种情况都需要以#开头，我们不想给两个式子分别加个#，我们只需要为这两种情况加上一个小括号()，就可以只写一个#号辣，（）表示分组的意思。

/#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g

 4、有时用户也未必输入#，我们用？表示可有可无。

/#?([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g

---

四、邮箱

服务器允许用户自定义邮箱名称的格式也不同，以常见的邮箱规则为示范：

1、允许用户输入的邮箱名称包含：所有大小写字母，所有数字，以及_-.三个符号

/^[A-Za-z0-9_-.]/g

2、我们会发现根本没匹配到，这是因为：

-符号在括号中本来就是是用来表示范围的，现在要用于字符，就需要进行转义，转义是需要用到转移符号\，此外，我们还需要为.符号转义，因为英语句号在正则里面表示任何字符除了换行符。

/^[A-Za-z0-9_\-\.]/g

3、现在我们可以定义字符数量了，原则上需要限定用户的字符数，但这里就默认不限定，因此需要用+表示至少1次以上，因为毕竟不能设置0个字符，至少得有1次

/^[A-Za-z0-9_\-\.]+/g

4、然后就是@，@符后面是域名，而且域名还可以是多级域名，我们就可以把刚才的那部分直接拿过来

/^[A-Za-z0-9_\-\.]+@[A-Za-z0-9_\-\.]+/g

5、后面部分是我们常见的.com或者.cn，也就是顶级域名，需要用\.来表示这个点，顶级域名只能是大小写的英文字母，一般来说2到4个字母组成。最后以$作为收尾

/^[A-Za-z0-9_\-\.]+@[A-Za-z0-9_\-\.]+\.[A-Za-z]{2,6}$/g

---

五、URL

和邮箱地址有点像的就是URL 

1、URL开头就是协议，也就是http或者https，还可能是ftp或者files，后面会接：冒号和两个/符号

 /^(https?|ftp|file):\/\//g

上面这个？仅作用于它的前面一个字母，即s，这样就能匹配http和https了。

不记得？表示什么意思的往上翻，刚讲过！

2、平时输入网址的时候经常不写协议的，所以我们要为这一组名称加上？符号

 /^((https?|ftp|file):\/\/)?/g

3、然后写权威域名部分，,先用一个小括号来进行分组，权威域名在这里指的就是bilibili，也就是常说的主域名，而主域名前面的www，用户不一定输入而且也不一定是www，也可能是其他符号，那么我们就可以把www.bilibili合在一起看，这部分除了小写字母和数字以外，还有可能有.符号和-符号

 /^((https?|ftp|file):\/\/)?([\da-z\.\-]+)/g

4、后面部分就和我们写邮箱差不多了

 /^((https?|ftp|file):\/\/)?([\da-z\.\-]+)\.[a-z\.]{2,6}/g

5、虽然URL没有区分大小写，但是一般都会规定全部小写。

加点.是为了避免特殊情况，比如com.cn。URL还有最后一个常见部分，比如我们访问主页里面的其中一个部分，都会生成很长或者较短的具体资源地址，因此我们需要尽可能的进行覆盖，可能会出现的是各种字母，/符号，.符号还有-符号。因此我们写上([\/\x\.\-])。\w的意思是包括任何文字字符，包括文字数字和下划线。*表示0到无穷大，所以外围再加一个*，因为这样的资源组可能有多个，也就是我们网页里常见的...../....../....../

 /^((https?|ftp|file):\/\/)?([\da-z\.\-]+)\.[a-z\.]{2,6}([\/\w\.\-]*)*/g

6、最后，用户还可能输入/符号，可能有0个也可能有1个，用？

 /^((https?|ftp|file):\/\/)?([\da-z\.\-]+)\.[a-z\.]{2,6}([\/\w\.\-]*)*\/?$/g

---

六、HTML标签

匹配HTML标签也是非常有用的，比如你要确定一句话从哪里开始，也可用于爬虫。

1、匹配<开头和若干小写字母：

/^<([a-z]+)/g

 这会你要还看不懂，有点懵可说不过去了奥，就赶快翻上去复习复习！

2、然后，我们在最后加一个m表示匹配多行：

/^<([a-z]+)/gm

3、我们知道标签里面可能会有很多属性存在，属性那么长的格式我们不需要写很长的正则表达式来表示，因为我们知道>符号前面的都是一些空格或者属性，比如：

<input  type=“password” class="input"></input>

那么我们就只需要进行排除就好了。也就是排除掉>符号就可以了。排除字符的格式是在中括号里面使用^来表示，即[^]表除了

/^<([a-z]+)([^>])/gm

这就表示除了>符号，这里我也单独设立了一个组，如果还不记得（）括号表示分组，一定先再把前面的案例过一遍。

4、这里这么写其实不对，这是因为这个写法我们只设定了排除>符号后的一个字符，所以我们要加上+号，来匹配多个。在这一组的外面我们需要用*符号来表示0到无穷大，这是因为可能有很多属性字符或者一个都没有，这些情况我们都要包含。

/^<([a-z]+)([^>]+)*/gm

5、接下来是>符号作为闭合标签，内容我们单独设立一个组，并且用(.*)来表示任意0到多个字符

/^<([a-z]+)([^>]+)*(>(.*))/gm

6、然后是有一对标签的另一组标签的起始，就是开始匹配<span></span>中的</这部分。

/^<([a-z]+)([^>]+)*(>(.*))<\//gm

7、然后就是标签的名字，这时候我们不需要再[a-z]+这样的代码了，我们可以就地取材，调用第一个带括号 的表达式，我们就可以使用\1来表示。\几：就表示调用第几个带括号的正则表达式。最后用>符号来闭合标签就可以了

/^<([a-z]+)([^>]+)*(>(.*))<\/\1>/gm

8、你以为这样就结束了吗？nonono。有些标签是单独的，比如img标签<img  src = "..."/>，所以我们就要用符号|来考虑另外一种情况。正规的情况就是空格加上/符号，空格我们需要用\s来表示。后面用\s\/>收尾即可。

/^<([a-z]+)([^>]+)*(>(.*)<\/\1>|\s+\/>)$/gm

\s+表示多个空格。

---

七、IP地址

IP地址的正则表达式也是有一定难度的，难度在于如何表示数字的范围。我们这里做IPv4的地址。

1、地址是由4组从0到255的数字组成。每一组0到255我们就需要进行数字范围拆分，毕竟正则表达式没有直接表示数字范围的代码。那么我们可以分为0-199,200-249,250-255。我们先来写0-199的范围

/^([01]?[0-9][0-9]?)/gm

 如上，就可以匹配0-199里面的所有1位，2位，或者3位的数字了。

2、200-249,250-255这三个数之间我们用|或连接

/^([01]?[0-9][0-9]?|2[0-4][0-9]|25[0-5])/gm

3、因为IP地址都是用.衔接的，我们加上\.，然后给这三组设置为1组用{3}重复三次，重复3次而不重复4次是因为最后的一组0-255的后面是没有英语句号.的

/^(([01]?[0-9][0-9]?|2[0-4][0-9]|25[0-5])\.){3}/gm

4、我们再加上最后的0-255来来结尾就ok辣

/^(([01]?[0-9][0-9]?|2[0-4][0-9]|25[0-5])\.){3}([01]?[0-9][0-9]?|2[0-4][0-9]|25[0-5])$/gm

---

八、日期

日期有很多表现形式，治理只以《年-月-日》这种格式作为示例

 

1、年就是0-9的数字重复4次，月份会有两种情况：0-9和10-12。

0-9范围就用0[1-9]来表示，10-12就用1[0-2]来表示

/^[0-9]{4}-(0[1-9]|1[0-2])/gm

2、天数也需要分为三个情况，0-9,10-29和30-31

/^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/gm

---

九、车牌号

 

1、首先开始为各个省，直辖市和自治区的简称。特别注意这里涵盖了大写字母，那是新军车牌

/^[京津沪冀晋辽吉黑苏浙皖闽赣鲁豫鄂湘粤桂琼川黔云渝藏陕陇青宁新闽粤晋琼使领A_Z]{1}/gm

2、接着下一位就是其下的地级行政区，由大写字母组成。后面的五位我们相见的就是大写字母和数字，不过我们这里只能重复4次，因为有特殊情况，比如警就是公安局的车辆

/^[京津沪冀晋辽吉黑苏浙皖闽赣鲁豫鄂湘粤桂琼川黔云渝藏陕陇青宁新闽粤晋琼使领A_Z]{1}[A_Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/gm

这里，我们这里的车牌号指的是蓝牌车，并没有考虑新能源车辆。

---

十、身份证

呼呼呼，终于到最后一个辣！不晓得你们学到这里累没累，反正我码字挺累的呜呜。加油，咱们一鼓作气！

 

这里就以常用的18位作为示范。

1、首先前6位是地址码，但是第一个数字不能是0

/^[1-9][0-9]{5}/gm

2、7到14位就是出身年月日，聪明的小伙伴可能回想直接把前面写的日期拿过来用，但是注意这里的年份我们不用考虑古代人的出生年份，我们不用考虑17几几年以前包括17几几年的人。

/^[1-9][0-9]{5}(18|19|([23][0-9]))[0-9]{2}/gm

3、然后是月和日，和前面讲的日期是一样的，拿过来就行。

绿色字体表示月，黄色字体表示日

/^[1-9][0-9]{5}(18|19|([23][0-9]))[0-9]{2}(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])/gm

4、接下来15-17位是顺序码，直接重复三次的数字就可以表示了。第18位就是校验码了

/^[1-9][0-9]{5}(18|19|([23][0-9]))[0-9]{2}(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])[0-9]{3}[0-9Xx]$/gm

---

十个案例终于写完辣~你学会了吗，我们再来总结一波正则表达式的语法规则：

大家一看到密密麻麻的规则就头痛，我也一样，下面这些根本不需要全记住，他们就是我前面讲的内容的，只不过加了一点多的内容，其实把前面学的10个案例能自己写出来就完全够了。这里只是帮大家总结一波正则表达式的语法规则。前面重要和常用的都会了，正常情况下正则表达式都能写出来的，下面的这些有个大概影响就可以了。重要的是前面的10个案例！！！

• [abc]：查找方括号内任意一个字符。
• [^abc]：查找不在方括号内的字符。
• [0-9]：查找从 0 至 9 范围内的数字，即查找数字。
• [a-z]：查找从小写 a 到小写 z 范围内的字符，即查找小写字母。
• [A-Z]：查找从大写 A 到大写 Z 范围内的字符，即查找大写字母。
• [A-z]：查找从大写 A 到小写 z 范围内的字符，即所有大小写的字母。
• . :表示任意一个字符,没有范围限制
• ?:表示前面的内容出现0-1次
• +:表示前面的内容最少出现1次
• *:表示前面的内容出现任意次(0-多次)—匹配内容与+一致，只是可以一次都不写
• {n}:表示前面的内容出现n次
• {n,m}:表示前面的内容出现最少n次最多m次
• {n,}:表示前面的内容出现n次以上(含n次)

• ()用于分组,是将括号内的内容看做是一个整体

元字符

元字符	描述
.	查找单个字符，除了换行和行结束符
\w	查找单词字符
\W	查找非单词字符
\d	查找数字
\D	查找非数字字符
\s	查找空白字符
\S	查找非空白字符
\b	匹配单词边界
\B	匹配非单词边界
\0	查找 NUL字符
\n	查找换行符
\f	查找换页符
\r	查找回车符
\t	查找制表符
\v	查找垂直制表符
\xxx	查找以八进制数 xxxx 规定的字符
\xdd	查找以十六进制数 dd 规定的字符
\uxxxx	查找以十六进制 xxxx规定的 Unicode 字符

重复类量词列表

量词	描述
n+	匹配任何包含至少一个 n 的字符串
n*	匹配任何包含零个或多个 n 的字符串
n?	匹配任何包含零个或一个 n 的字符串
n{x}	匹配包含 x 个 n 的序列的字符串
n{x,y}	匹配包含最少 x 个、最多 y 个 n 的序列的字符串
n{x,}	匹配包含至少 x 个 n 的序列的字符串

JavaScript 正则表达式支持的边界量词

量词	说明
^	匹配开头，在多行检测中，会匹配一行的开头
$	匹配结尾，在多行检测中，会匹配一行的结尾

---

终于码完辣！你学会了吗？码字不易，大家多多点赞支持！！你们的鼓励是我前进的动力，今天就到这辣，拜拜~~~