通过案例学习正则表达式

我们知道js是支持正则表达式的,用正则表达式来验证文本非常方便,但是初学者却非常难懂,最近碰到几个要用正则的地方,实在是逃不过了就去学了学,发现边写边学其实也并不是太难。下面通过一个案例来学习

ps:安利两个网站正则可视化 正则检测 下面讲用法

先看需求:匹配美国电话号码

1
2
3
4
5
6
7
//正确格式
555-555-5555
(555)555-5555
(555) 555-5555
555 555 5555
5555555555
1 555 555 5555

首先会想到匹配数字,发现正则数字可以用\d表示,那么\d\d\d-\d\d\d-\d\d\d\d是不是可以匹配第一种类型呢,来用这个网站检测一下,可以看到第一个确实被匹配到了,后面/g是全文匹配

但是缺点显而易见,重复的怎么简写呢?原来{n}可以表示重复次数,那么改一下

Bingo!,那么接下来注意到第一个,第四个是不是比较相同呢?空格或者横线,那么怎么表示或者关系呢?来看看这个,框起来的是更改的地方

没错[]表示或者的关系\s表示空格。来用可视化看一下

意思就是3个数字,接着匹配空格或则横线,再3个数字,再空格或则横线,最后4个数字,这样应该很好理解了

可能会注意到222 555 555 5555这样不符合预期的也匹配到了,原来我们是想从头开始验证,那么可以这样做

^表示从头开始匹配,注意到后面加了/gm,因为加了从头匹配的话,回车换行下一行并不会被认为新的开始,所以/m表示多行匹配
然后看5555555555空格和横线也可以不要,那么意思就是空格或横线可以出现或者不出现,那么可以这样改一下

注意我加了一个?,它表示最多出现一次(可以是0次)这样就可以匹配全是数字这样的情况了,举一反三,那么开始的区号1 555 555 5555中的1和空格是不是也可以这样表示呢?

注意我()括起来了,它表示一组
接下来处理括号,既然也是可有可无,也用?表示算了


注意框起来的地方我写的是\(\)这是因为要对特殊字符进行转义,学过js一定对转义不陌生,这里就不细讲了
到这里就完了吗?不不不,还是太年轻,来看看这种情况


我们写的是括号两边都是最多出现一次,并没有要求同时出现或者同时不出现,这就面临着只出现一半也会通过匹配的情况。。再改一下


这好像改的有点多。。

分步讲,先看前面由(1\s)?改成了1?\s?因为没改之前(1\s)是一组至多出现一次,所以1单独出现的时候也会出现匹配失败,所以还是分开写了

再看第二个这一坨,放到可视化里面看

两组之间的或者关系可以用()|()表示

最后一步,我加了$来表示结尾,停止匹配,不然的话555-555-5555555也是会被匹配成功的

大致就是这么多了,最后来完整看一遍代码

1
/^1?\s?((\(\d{3}\))|(\d{3}))[\s-]?\d{3}[\s-]?\d{4}$/gm

放到可视化里面


常用的正则方法还有

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[a-z] //匹配a到z任意字符
. //除回车换行外任意字符
+//最少出现一次
\d//数字
\D//非数字
\s//空格
\S//非空格
\w//单词字符
\W//非单词字符
{n}//出现n次
{n,m}//出现n到m次
{n,}//至少出现n次
\b//单词边界
\B//非单词边界

努力<br><br>希望能成为一名前端工程师<br>加油