我们知道js是支持正则表达式的，用正则表达式来验证文本非常方便，但是初学者却非常难懂，最近碰到几个要用正则的地方，实在是逃不过了就去学了学，发现边写边学其实也并不是太难。下面通过一个案例来学习
先看需求：匹配美国电话号码
//正确格式
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?\s?((\(\d{3}\))|(\d{3}))[\s-]?\d{3}[\s-]?\d{4}$/gm
放到可视化里面
常用的正则方法还有
[a-z] //匹配a到z任意字符
. //除回车换行外任意字符
+//最少出现一次
\d//数字
\D//非数字
\s//空格
\S//非空格
\w//单词字符
\W//非单词字符
{n}//出现n次
{n,m}//出现n到m次
{n,}//至少出现n次
\b//单词边界
\B//非单词边界
网友评论