我们知道js是支持正则表达式的,用正则表达式来验证文本非常方便,但是初学者却非常难懂,最近碰到几个要用正则的地方,实在是逃不过了就去学了学,发现边写边学其实也并不是太难。下面通过一个案例来学习
ps:安利两个网站正则可视化 正则检测 下面讲用法
先看需求:匹配美国电话号码
首先会想到匹配数字,发现正则数字可以用\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
也是会被匹配成功的
大致就是这么多了,最后来完整看一遍代码
放到可视化里面
常用的正则方法还有