0.导引
在正文开始前,先说说正则表达式是什么,为什么要用正则表达式?正则表达式在我个人看来就是一个程序可以识别的规则,有了这个规则,程序就可以帮我们判断某些字符是否符合我们的要求。但是,我们为什么要使用正则表达式呢?下面来看个正则业务场景,来验证一串字符是否为合法QQ号。示例如下:
/*** 要求:一个合法的QQ号必须满足:1、5-15位;2、全是数字;3、不以0开头*///1.在不使用正则表达式的时候,我们可能会这样判断QQ号的合法性var qq="6666666a6666"; if(qq.length>=5&&qq.length<=15&&!isNaN(qq)&&qq.charCodeAt(0)!=48){ alert("QQ合法"); }else{ alert("QQ不合法") } //2.使用正则表达式 var qq="066336"; var reg=/^[1-9][0-9]{4,14}$/; if(reg.test(qq)){ alert("QQ合法"); }else{ alert("QQ不合法"); }
从上面这个例子可以看出来使用了正则表达式的时候,我们的代码量变少了,而且比较直观。如果遇到非常的复杂的匹配,正则表达式的优势就更加明显了。
那什么是正则表达式呢?
1.正则定义
也就是创建正则表达式对象,可通过字面量形式或RegExp构造函数两种形式来定义,如下所示:
// 字面量定义const pattern=/d/g//或 构造器定义const pattern = new RegExp('d','g')
一般使用字面量形式,构造函数形式用在正则表达式在运行时才能确定下的情况,例如
function hasClass(ele, classname) { const pattern = new RegExp('(^|s)' + classname + '(s|$)') return pattern.test(ele.className)}
注意:字符串中反斜杠有别的含义,要想表示d等要使用两个反斜杠来转义d* 。
第一种通过"/正则表达式/修饰符"这种形式直接写出来;
第二种通过“new RegExp('正则表达式','修饰符')”创建一个RegExp对象。
其中修饰符为可选项,有三个取值分别为:g为全局匹配;i指不区分大小写;m指多行匹配。
通过上述方式,就创建了正则表达式对象。说到RegExp对象,下面要说一下RegExp对象自带的属性,并不复杂,这里我就列一下,不做展开。
2.符号及应用解析
1)反斜杠
在正则表达式中反斜杠有重要的含义
- 是用来转义有特殊含义的字符,比如 [、^、.等。例如,要想只匹配.com 需要
/.com/.test('.com')
- 预定的字符类以开始,比如 d w s
而在字符串中反斜杠同样是一个转义字符,比如结合n r t来表示换行、回车、制表位等
要想在字符串中表示出一个,则表达式中需要两个 ,示例如下:
new RegExp("[w.]").toString()=='/[w.]/'
2)()、[]与|
[]:集合操作符,表示一系列字符的任意一个
例如:/[abc]/ 表示a、b、c中的任意一个能匹配就可以了
关于/[a|b]/
一个常见的误区是感觉/[a|b]/表示要匹配a或者b,其实是a、b或者|中的任意一个
/[a|b]/.test('|') === true/(a|b)/.test('|') ===false
关于括号()
从上面可以看到,圆括号中的|是或的意思,表示要匹配()以|分割的两边的整体(两边其中之一),注意是整体。
例子:
/(abc|abd)/.test('ab') ===false/(abc|abd)/.test('abc') ===true/(abc|abd)/.test('abd') ===true
3)分组与捕获
上面只是介绍了圆括号中存在|时需注意的点,这里重点说一下圆括号(英文状态下的小括号())
在正则中,圆括号有两种含义,一是用来分组,一是用来捕获想要的值
- 分组
()结合* ? + {} 使用时,是对圆括号内的整体进行repeat
/(ab)+/ 匹配一个或多个ab/(ab)+|(cd)+/ 匹配一个或多个 ab或cd
- 捕获
捕获是一个强大的功能,也是很多时候我们使用正则的原因,同样以()来表示
例子:找出样式中的透明度值
function getOpacity(elem) { var