为什么需要正则表达式,他虎在哪
想象一下在网页上我们需要用户输入邮政编码,比如我的家乡安徽省马鞍山当涂县
243100
邮政编码是由6个数字组成的。我们如何判断用户输入的是合法的邮政编码呢?如果没有正则表达式,可能会这样写:
//判断邮政编码
var postCode = '243100'
function isValidPostCode( postCode ){
var isValid = true;
for (var i = 0; i < postCode.length; i++) {
if(postCode[i]>='0' && postCode[i]<='9'){
continue;
}else{
isValid = false;
break;
}
}
return isValid;
}
console.log(isValidPostCode(postCode)?"合法的":"不合法");
通过这个例子,我们说说正则表达式的好处:
-
isValidPostCode
这个函数如果用正则表达式就可以用一句话来表示 - 更复杂的验证,手写就很困难了
- 正则表达式还可以进行分组替换
那么我们来改造一下上面的例子,通过正则表达式来验证邮政编码
'243100'.match(/^\d{6}$/)?"合法的":"不合法";
可以看出好处1和2。现在我们知道正则表达式牛逼的地方了,进一步了解一下吧。
正则与字符串不得不说的故事
部分匹配
我们假设需要验证一个人的名字,比如‘沈寅’,像下面这样写。
'shenyin'.match(/shenyin/);
如果需要验证shenyin和xiongzijun,像下面这样写。
'xiongzijun'.match(/shenyin|xiongzijun/);
可是像上面这样写有个问题。比如 'XXXshenyinXXX'.match(/shenyin/);
也会匹配的。这个就叫做partial match ,这么写并不能精确的判断字符串是否是shenyin,如果想要知道如何解决部分匹配的问题,可以看《正则表达式2-实战解析邮箱》
匹配一个或者多个
如果真的要匹配shenyin牛,shenyin牛牛,shenyin牛牛牛,后面有多个‘牛’的情况应该怎么弄?使用+就可以了
'shenyin牛牛'.match(/shenyin牛+/);
在浏览器控制台测试一下,可以看到返回'shenyin牛牛'。
范围
匹配26个英文字母
可以这么写
/a|b|c|d|e|f|g|h|i|j|k|l|m|n|o|p|q|r|s|t|u|v|w|x|y|z/
也可以这么写,表示a到z之间的字符都可以匹配
[a-z]
注意
- [a-z]只是匹配一个字符
- []里面只能放英文字符集里面的字符
字符大小写
我们看到这个例子
`shen`.match(/[a-z]/); //=>返回s
`Shen`.match(/[a-z]/); //=>返回h
如何匹配所有的字符呢,而且大写的怎么处理?上面的文章我们看到可以用+表示一对多,且[]中只是匹配一个字符,所以可以这样写:
`Shen`.match(/[a-zA-Z]+/); //=>返回Shen
这样写可以工作啊,不过还是介绍一下modifiers(修饰符)吧。其实这样写就好了。
`Shen`.match(/[a-z]+/i); //=>返回Shen
i表示不区分大小写
空白字符的处理
需要匹配空格怎么办,这个正则/shen yin/
,中间有空格是不是很不好阅读,谁知道你放了几个空格呢。正确的写法应该像下面这样。
/shen\syin/
\s表示空白字符,可以是:
- Spaces
- Tabs
- New lines
如果要匹配人的名字,比如“shen yin”,正则就可以写成这样了/[a-z\s]+/i
,也可以是这样/[\sa-z]+/i
,[]里面的顺序没啥用处,因为它只是匹配一个字符。
加上数字
如何在范围中加上数字呢, /[a-z0-9\s]+/i
,这下匹配"shen yin 01"也没问题了。等等\s的同伙\w。
\w等于[a-zA-Z0-9]
所以/[a-z0-9\s]+/i
可以写成/[\w\s]+/