JavaScript 正则表达式入门与应用

131 阅读4分钟

读完下面的文章,您将掌握以下内容。

1.简单分析了 exec、match、test、search、replace方法

2.匹配手机号、身份证号、qq号、车牌号码、ip地址、url地址、邮箱、十六进制颜色、html标签等

下面这篇文章,是自己总结的正则的几个方法,以及看了B站“技术蛋”老师讲解的视频,写的正则的10个应用。 视频链接点击查看

测试网站使用:regexr.com/

1. 方法

exec

用法:匹配是否有目标字符串

语法:正则.exec(目标字符串)

/e/.exec("abce")

打印是一个数组,第一个值是就是要匹配的字符,有index表示索引为3

image-20220919155149715

match

作用:也是用来匹配字符串。

语法:字符串.match(正则)

let str = '123'
let reg = /1/
str.match(reg)

image-20220919155448865

test

作用:匹配一个字符串里面是否有指定的正则。匹配的到就是true 否则就是false

用法:正则.test(字符串)

let reg = /123/
reg.test('123') // true

replace方法

作用:根据正则,替换“字符串”里面的匹配的字符

用法:str.replace(reg, '要替换成什么的字符')

var reg = /abc/
'abc123'.replace(reg, 'ccc')
输出为'ccc123'

search方法

var reg = /hangge/
let str = 'xiaohangge'
str.search(reg)
4

2. 应用

匹配手机号

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

1开头

第二位数字是34578中的一个

后面有9个数字 用 \d

{9}表示就是9个数字

匹配qq号

/^[1-9][0-9]{4,9}$/

qq号码,第一位必须不能是0

后面的数字是任意的,但是qq号码是4-10位的

匹配十六进制颜色

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

开头有#号,

中间是可以是数字,小写字符,大写字母,六位数字

用|表示或的意思,

后面的可能性是,有0-9A-Fa-f是一样的,但是数量只有3个

此外,前面的#号键是可有可无的情况下

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

邮箱的写法

@和.号作为分割

@前后很类似

.号后面是2-6位的英文

进行的是全局匹配 为什么

/^([A-Za-z0-9_-.]+)@([a-zA-Z0-9]+).([A-Za-z]{2,6})/g
/^([A-Za-z0-9_-.]+)@([a-zA-Z0-9]+).([A-Za-z]{2,6})/g

协议的写法

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

协议名可能有http | ftp | file

协议名https可能是有加s的

/记得加转义符

协议名可能是用户不写的,就加问号

([\da-z.-]+)

www.lizhihang

这里的www表示的可以是,a-z的字母,也可以是\d的数字

也可以加. 也可以加上-

([a-z.]{2,6})

www.lizhihang.com 匹配的是后缀

([/\w.-]*)*/?

可能后面还有跟具体的路径

www.lizhihang.work/abc/123 -> 表示后面可以跟很多具体的路径名

/w表示 文字字符 数字,下划线,

*表示0个或者多个

匹配html标签

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

匹配的内容

<div class="xiaohangge">xiaohangge</div>
<div></div>
<img />

0./g表示全局匹配 /gm表示多行匹配

1.^括号打头 <表示最左侧的小括号

2.([a-z]+)表示第一个分组,匹配 <后面的英文字符,到这里为止,能够匹配三行的div

3.如下,表示,匹配除了尖括号以外的内容,能够直接一路匹配到

的尖括号前面;加一个*号表示,可能有多个属性,也可能没有属性

([^>]+)

4.下一个分组,先匹配>右侧尖括号,然后是 (.*)这样的,任意多个字符,匹配中间的内容,然后是小于号<,然后是/要转义斜线,

5.\1表示,匹配第一个()里面的分组,不需要再次写同样的内容;后面跟上>闭合

6.写一个|表示的是,有的标签是单标签,直接 ,所以有可能标签名后面是空格,\s表示空格,加号表示有多个空格,然后是闭合/进行转义,再$符号进行结尾

  1. ?: 这个的意思是,不捕获 > </ 这些内容,但是里面的(.*)这个是不受影响的
^<([a-z]+)([^>]+)*(?:>(.*)</\1>|\s+/>)

注意: .号表示的是任意的1个字符,.*表示的是,0个或者多个任意的字符

匹配ip地址

(([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])$

匹配内容

255.255.255.255
192.1.14.116
5.13.123.24

1.最关键的就是考虑,分为 0-199 200-249 250-255三种情况

2.如果是0-199的情况,有可能有1位数,2位数,3位数,所以[01]后面可以跟问号 [0-9]一个后面跟问号,一个后面不跟问号,表示是1位数至少

3.200-249后面的情况就是,既然都是200了,那么不论哪个位数都不能写问号了,都必须有值了

4.250-255表示的是什么?百位和十位后面都必须是有值的

5.重复3次,因为第四次后面是没有.的

匹配时间

([\d]{4})-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01]])$
2021-10-01
1984-02-30

1.年月日的情况不同

2.年,前面是四个数字即可

3.月,分类,01-09月是一类,10-12月是一类

4.日,分类,01-09是一类,10,29是一类,30-31是一类

匹配车牌号:

dcdv.itsogo.net/12/12907.ht…

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

1.刚开始是行政区划,有A-Z的原因是,一些军车的车牌开头也是字母(汉字的字母)

2.后面[A-Z]表示一个字母

3.[A-Z0-9]表示的是字母或者数字4位

4.最后一位可能是字母数字,也可能是之类的,所以单独写

新能源汽车

^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领]{1})(([A-Z]{1})([DF][A-Z0-9][0-9]{4})|([0-9]{5}[DF]))$

1.新能源汽车车牌规则:有两种,一种小型新能源汽车,是绿色渐变色;一种是大型的,就是黄绿双拼的

2.D表示纯电动;如果是F表示是混合式的

3.省+低级+六位

4.小型,D或者F必须在前面,后面一位可以是数字或者字母,再后面四位必须是数字;大型的D或者F必须在后面(待补充)

[DF][A-Z0-9][0-9]{4})是一种
([0-9]{5}[DF])又是一种
浙BD12345
浙B01234F

匹配身份证号码

/^[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]$/g

身份证号码构成

1.六位区域名(首位不能是0)

[1-9][0-9]{5}

2.出生 年 月 日

(18|19|([23][0-9]))[0-9]{2}
1800
1900
2001
2201
3001
月份
(0[1-9]|1[0-2])
日
(0[1-9]|[12][0-9]|3[01])

3.倒数第三第四表示所在地的派出所的代码

4.倒数第二位表示性别

5.倒数第一位表示某个计算出来的数(权重) 记得包括 X和x

[0-9]{3}[0-9Xx]