JavaScript正则表达式总结

正则表达式一直是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’情势时,字符串换行后的内容会被当作新的一行。

元字符

正则表达式有两种基础字符范例构成:

  1. 原义字符 – 代表他们自身寄义的字符
  2. 元字符 – 在正则表达式中有特别寄义的非字母字符

比方: . * + ? () [] {} ^ $ | \

字符类

  • . – 婚配恣意单个字符,行结束符除外
  • \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正则表达式

  1. 0-9
  2. A-Za-z0-9_
    原文作者:charsandrew
    原文地址: https://segmentfault.com/a/1190000015491255
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞