正则表达式一直是js里比较难以掌握的点。 看不懂,学不会,记不住。 每次需要用到正则的时候,都需要再去查找资料。 今天花时间把正则的知识点总结下,希望能在理解的基础上熟练掌握。
正则表达式的作用
正则表达式在字符串处理方面发挥着巨大的作用,掌握了它,就能针对某一特定模式的字符串或者批量对字符串进行处理。 虽然各个编程语言对正则的支持不同,但是差异并不大。 这里只介绍js语言中正则的使用方法。
javascript对正则表达式的支持
先看一段代码:
var formatPrice = function(price){
return price.toString().replace(/\B(?=(\d{3})+$)/g, ',');
}
这个formatPrice函数将商品总价转化为每三位以','分割的字符串,这是业务中常遇到的情况。 可以看到,通过使用正则,代码变得相当的简洁。
在js中创建正则的两种方式
- 使用字面量
/pattern/flags
, 这就是正则表达式的字面量语法,pattern表示正则表达式的模式,flags为正则表达式的标志。比如: /a[bc]\d{2}$/gi
。
其中模式和标志的知识将会在后面详细介绍。
字面量形式的正则表达式一般使用较多,也推荐大家尽可能使用这种形式,简洁易读,符合正常的使用习惯。
- 使用构造函数
除了使用字面量外,还可以使用构造函数生成正则表达式。 new RegExp(pattern [, flags])
, 比如:var reg= new RegExp('[a-zA-Z]+\\d$', 'gi')
这里构造函数的两个参数,第一个参数可以是字符串(es5及以前)或正则表达式(es6),第二个可选参数为字符串。
当我们事前不能确定正则表达式的值时,或者正则依赖第三方输入来动态生成正则时,需要使用这种方式。
这里要注意的一点是:第一个参数为一个字符串时,当我们使用正则里的特殊字符,比如\d
或\b
等时,需要对\
进行转义,也就是写成\\d
或\\b
的形式,因为\
在字符串里有特殊含义。
正则表达式的使用
由于正则的使用场景主要是字符串处理,所以字符串类提供了很多方法使用正则表达式。比如:
str.replace(regexp|substr, newSubStr|function)
str.search(regexp)
str.match(regexp)
str.split([separator[, limit]])
另外,正则表达式本身也提供了处理字符串的方法,比如:regexObj.exec(str)
regexObj.test(str)
这些方法将再后面介绍
正则表达式的语法
flags - 标识符
- g - global,全局匹配,找到所有的匹配,而不是在第一个匹配后停止
- i - ignoreCase 忽略大小写
- m - multiline 多行搜索,不使用'm'模式时,整个字符串会被当做一行,换行符也被当做正则里的一个字符,使用'm'模式时,字符串换行后的内容会被当做新的一行。
元字符
正则表达式有两种基本字符类型组成:
- 原义字符 - 代表他们本身含义的字符
- 元字符 - 在正则表达式中有特殊含义的非字母字符
比如: . * + ? () [] {} ^ $ | \
字符类
-
.
- 匹配任意单个字符,行结束符除外 -
\d
- 匹配任意阿拉伯数字,相当于[0-9] -
\D
- 匹配任意一个不是阿拉伯数字的字符,相当于1, 这里^
用在[]中表示取反的意思。 -
\w
- 匹配任意阿拉伯字母,数字和下划线, 相当于[0-9a-zA-Z_] -
\W
- 与w相反, 相当于2 -
\s
- 匹配一个空白符,包括空格符,制表符,换行符,换页符和其他空格字符。 -
\S
- 匹配一个非空白符,与上面相反 -
\t
- 匹配一个水平制表符 -
\r
- 匹配一个回车符 -
\n
- 匹配一个换行符 -
\v
- 匹配一个垂直制表符 - 还有其他一些不常用的字符类,具体可查阅MDN文档
字符集合
-
[abc]
- 又叫字符组,表示匹配集合中的任意一个字符,可以用-
来指定范围 -
[^abc]
- 反义字符组,匹配不是集合中字符的一个字符,可以用-
来指定范围
边界
-
^
- 不使用在[]中时,表示匹配输入开始 -
$
- 匹配输入结尾 -
\b
- 匹配零宽单词边界 -
\B
- 匹配零宽非单词边界,与上面b含义相反。
量词
-
?
- 匹配0次或1次 -
+
- 匹配一次或多次 -
*
- 匹配0次或多次 -
{n}
- 匹配n次 -
{m,n}
- 匹配最少m次,最多n次 -
{m,}
- 匹配最少m次
贪婪模式和非贪婪模式
举个例子, /\d{3,6}/g
,这样一个正则表达式如果匹配字符串'234955033',是匹配3或4,5,6个数字呢?
js中正则表达式会默认尽可能多的匹配,也就是匹配6个数字,即贪婪模式。
非贪婪模式则是让正则表达式尽可能少的匹配,也就是只匹配3个数字,正则要使用非贪婪模式,只需要在量词后面加上?
即可。
下面一个例子:
'123456789'.replace(/\d{3,6}/g, 'X') //贪婪模式,结果为'XX'
'123456789'.replace(/\d{3,6}?/g, 'X') //非贪婪模式,结果为'XXX'
分组
-
()
- 将正则表达式分组,以控制量词的作用范围,比如:baron{3}
和(baron){3}
,二者是有区别的。 -
|
- 表示 或,也可以配合()进行使用,比如: foo|bar 和 fo(o|b)ar
反向引用和忽略分组
有时,我们在匹配到正则对应的字符串时,还想要使用匹配到的部分内容,这时候可以使用$1,$2,$3等符号引用分组捕获的内容。
比如:
'12/03/2017'.replace(/(\d{2})\/(\d{2})\/(\d{4})/, '$3-$1-$2') //输出2017-12-03
这里为了获得年月日的引用,使用()给正则添加了三个分组,然后就可以从前往后分别用$1 $2 $3
代替分组捕获的内容。
所有()里匹配到的内容默认都会被捕获到,有时候,我们只是想要使用()简单的分组功能,而不需要让正则表达式捕获分组内容,此时,只需要在分组内添加?:
即可,比如:
'12/03/2017'.replace(/(\d{2})\/(?:\d{2})\/(\d{4})/, '$2-$1')
//输出2017-12月,第二个分组的内容被忽略。
前瞻,后顾和断言
这里出现了三个新的概念,但其实他们也很简单。
首先,我们要分清何为前,何为后。
正则匹配字符串是从前往后解析,所以,往字符串尾部方向叫前瞻,往字符串头部方向叫后顾。
js中的正则表达式支持前瞻不支持后顾,所以这里只介绍前瞻。
前瞻一般结合断言使用,其实断言(assert)就相当于给正则加的一个限制条件 -- 表示匹配项不仅要符合正则表达式,而且要符合断言给出的条件。
- 正向前瞻 - exp(?=assert),比如
/\d{2}(?=a)/
表示匹配两个数字且后面必须有字母a跟随 - 负向前瞻 - exp(?!assert),比如
/\d{2}(?!a)/
表示匹配两个数字且后面没有字母a跟随
注意: 断言只是相当于正则的条件,并不会真正的匹配相应的字符。
我们再来分析开头给出的那段代码:
price.toString().replace(/\B(?=(\d{3})+$)/g, ',');
正则 /\B(?=(\d{3})+$)/g中,
\d{3}+$表示以一个或多个三个数字结尾,
?=表示这部分是断言,是正则的条件,即匹配一个零宽的非单词边界,且后面有(3,6,9...)个数字字符的情况
js中正则表达式api
正则的实例属性
一个正则表达式的实例具有以下一些实例属性
- multiline - 布尔值,表示正则是否多行匹配,对应于标志中的'm'
- global - 布尔值,表示是否全局匹配,对应于标志中的'g'
- ignoreCase - 布尔值,表示是否忽略大小写,对应于标志中的'i'
- source - 字符串,是正则表达式模式的字符串表示,比如
/\d{2}ac/gi
的source属性就是'\d{2}ac'
, 该值不会包含正则两边的//
和标志gi
,也不会像构造函数参数那样对\
进行转义。 - lastIndex - 整数,表示下一次匹配的起始位置,该值只有在'g'模式下才有用,在不全局匹配时始终是0
正则的实例方法
正则表达式主要有两个实例方法test和exec。
假设regexp表示一个正则的实例,str表示一个字符串,那么
- regexp.test(str) - 返回一个布尔值,如果找到匹配项,返回true,否则false。
- reg.exex(str) - 返回一个数组, 数组第一项为匹配到的字符串,后面项依次为分组捕获到的信息,该数组还具有input和index两个属性,input表示进行匹配的字符串 - 即参数str,index表示匹配到的字符串的起始位置。
这里要注意的是:应用了全局'g'标志和没有全局'g'标志的同一个模式的正则,对于同一个字符串,两种方法的表现可能是不同的。 因为如果没有全局标识,每次都会从字符串起始位置0开始匹配,而应用了'g',会从上次匹配的结束位的下一位开始匹配。
正则的静态属性
正则的构造函数RegExp具有一些静态属性,这些属性中保存着最新一次正则匹配的信息。
比如RegExp.$1-$9中,保存着最近一次匹配中分组捕获到的信息。
还有一些其他的静态属性,但平时使用较少,不再介绍,具体可查阅MDN文档。
字符串中使用正则的一些方法
- String.prototype.search(regexp) - 返回匹配到的子字符串的索引或者-1, 会忽略正则中的'g'标志
- String.prototype.match(regexp) - 返回一个数组,这里是否有'g'标识会对返回值产生影响,如果正则没有'g'标志,那么返回的数组的上面正则的exec返回的数组形式相同。 如果有'g'标志,返回的是一个包含所有匹配子字符串的数组,且该数组也不再有input和index属性。
- String.prototype.split(regexp) - split的参数除了是一个字符串外,还可以是一个正则表达式。
- String.prototype.replace(str|regexp, replaceStr|function)
字符串的replace是一个非常强大的方法,来看一个例子:
//我们想把'a1b2c3d4e5'这个字符串替换成字母后数字都加1,变成'a2b3c4d5e6'
'a1b2c3d4e5'.replace(/\d/g, function(match, index, origin){
return parseInt(match) + 1
})
以上就是关于正则的全部总结,精力有限,写的比较乱,见谅。
这里推荐一个非常好的介绍js正则表达式的课程慕课网-javaScript正则表达式
参考
《javascript高级程序设计》
Regexper正则图形化工具
MDN正则表达式
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。