说到?: 就要提一下长得差不多的 ?= 和 ?!

?= 表示后面必须跟着某些东西,并且结果中不包含?=指定的部分，并且不捕获

?! 表示后面必须不跟着某些东西

对比看一下

/a(?:b)/.exec('abc')> ["ab", index: 0, input: "abc"] //注意匹配的是"ab"/a(?=b)/.exec('abc')> ["a", index: 0, input: "abc"] //注意匹配的只是"a"/a(?!b)/.exec('abc')> null //没有匹配的，返回的是null

再看个例子,数字字符串转千分位

function formatNumber(str) {  return str.replace(/B(?=(d{3})+$)/g, ',')}formatNumber("123456789")> 1,234,567,890

解释:

4)exec()、match()与g标记

exec()和match()都是返回数组，结果集中包含捕获的内容

在正则中不包含g时，exec()和match()返回的结果集是一样的，数组中依次是 整个匹配的字符串、依次的()指定的要捕获的部分

在有g的时候，match()返回的数组中的每一项是依次匹配到的整体字符串，不包含每个匹配中捕获到的内容

对比来看

"p123 q123".match(/b[a-z]+(d+)/)> ["p123", "123", index: 0, input: "p123 q123"]"p123 q123".match(/b[a-z]+(d+)/g)> ["p123", "q123"]

可以看到加上g后，返回的数组就只有匹配项了

那么，即想匹配全部，又想获取到捕获怎么办呢？

while与exec()结合

let pattern=/b[a-z]+(d+)/glet str='p123 q123'let matchwhile((match=pattern.exec(str)) !=null){    console.log(match)}> ["p123", "123", index: 0, input: "p123 q123"]  ["q123", "123", index: 5, input: "p123 q123"]

5)replace()

对于字符串的replace方法,重点说一下，其第二个参数，可是一个函数。

对于str.replace(/xxxxx/g,function(){})

函数在每次前面的正则匹配成功时都会执行，函数的参数依次是，完整的匹配文本、依次的捕获部分、当前匹配的索引、原始字符串

"border-bottom-width".replace(/-(w)/g,function(match,capture){    return ";"+capture.toUpperCase()})> "border;Bottom;Width"

注意，有人可能把其中的第二个函数参数改写成箭头函数，如(..)=>{..}则可能会出错,需要当心。

3.应用精要

有了上面的认知和解析，这里再总结一下正则对象(包括两种方式创建的对象)的主要方法。

1.test()

检索字符串中指定的值。返回 true 或 false。这个是我们平时最常用的方法。

 var reg=/hello w{3,12}/; alert(reg.test('hello js'));//false alert(reg.test('hello javascript'));//true

2.exec()

检索字符串中指定的值。匹配成功返回一个数组，匹配失败返回null。

var reg=/hello/;console.log(reg.exec('hellojs'));//['hello']console.log(reg.exec('javascript'));//null

3.compile()

compile() 方法用于改变正则。compile() 既可以改变检索模式，也可以添加或删除第二个参数。

var reg=/hello/;console.log(reg.exec('hellojs'));//['hello']reg.compile('Hello');console.log(reg.exec('hellojs'));//nullreg.compile('Hello','i');console.log(reg.exec('hellojs'));//['hello']

正则表达式拓展

除了RegExp对象提供方法之外，String对象也提供了四个方法来使用正则表达式，在使用JavaScript时，也常用到。

1.match()

在字符串内检索指定的值,匹配成功返回存放匹配结果的数组，否则返回null。这里需要注意的一点事，如果没有设置全局匹配g，返回的数组只存第一个成功匹配的值。

var reg1=/javascript/i;var reg2=/javascript/ig;console.log('hello Javascript Javascript Javascript'.match(reg1));//['Javascript']console.log('hello Javascript Javascript Javascript'.match(reg2));//['Javascript','Javascript','Javascript']

2.search()

在字符串内检索指定的值,匹配成功返回第一个匹配成功的字符串片段开始的位置，否则返回-1。

var reg=/javascript/i;console.log('hello Javascript Javascript Javascript'.search(reg));//6

3.replace()

替换与正则表达式匹配的子串，并返回替换后的字符串。在不设置全局匹配g的时候，只替换第一个匹配成功的字符串片段。

var reg1=/javascript/i;var reg2=/javascript/ig;console.log('hello Javascript Javascript Javascript'.replace(reg1,'js'));//hello js Javascript Javascriptconsole.log('hello Javascript Javascript Javascript'.replace(reg2,'js'));//hello js js js

4.split()

把一个字符串分割成字符串数组。

var reg=/1[2,3]8/;console.log('hello128Javascript138Javascript178Javascript'.split(reg));//['hello','Javascript','Javascript178Javascript']

4.两例实战

第一次接触正则表达式同学们，可能被这个正则表达式的规则弄得迷迷糊糊的，根本无从下手。小编我第一次学这个正则表达式的时候，也是稀里糊涂，什么元字符、量词完全不知道什么东西，云里雾里的。后面小编细细研究了一下，总结一套方法，希望可以帮助大家。

关于正则表达式书写规则，可查看w3school，上面说的很清楚了，我就不贴出来了。我就阐述一下我写正则表达式的思路。

其实正则表达式都可以拆成一个或多个(取值范围+量词)这样的组合。针对每个组合我们根据JS正则表达式的规则翻译一遍，然后将每个组合重新拼接一下就好了。下面我们举个例子来试一下，看看这个方法行不行。

验证QQ号的合法性

合法qq号规则：1、5-15位；2、全是数字；3、不以0开头

第一步：拆成(取值范围+量词)这样的组合

根据QQ号的验证规则，我们可以拆成两个(取值范围+量词)的组合。分别是：

1.(1~9的数字，1个)；2.(0~9的数字，4~14个)

第二步：根据正则表达式规则翻译(取值范围+量词)

1.(1~9的数字，1个)     =>   [1-9]{1}或者[1-9]2.(0~9的数字，4~14个)  =>   [0-9]{4,14}

第三步：将翻译好的(取值范围+量词)组合进行拼接

初学者可能在拼接这一步会犯一个错误，可能会组合拼接成这个样子/[1-9]{1}[0-9]{4,14}/或者简写翻译成/[1-9] [0-9]{4,14}/这些都不对的。调用test()方法的时候，你会发现只要一段字符串中有符合正则表达式的字符串片段都会返回true，童鞋们可以试一下。

var reg=/[1-9][0-9]{4,14}/;alert(reg.test('0589563'));//true，虽然有0，但是'589563'片段符合alert(reg.test('168876726736788999'));//true,这个字符串长度超出15位，达到18位，但是有符合的字符串片段

正确的写法应该是这样的：

/^[1-9][0-9]{4,14}$/(用^和$指定起止位置)

下面我们看一个复杂点的例子：

验证国内电话号码

0555-6581752、021-86128488

第一步：拆成(取值范围+量词)这样的组合

这里会拆成两个大组合：

1、(数字0，1个)+(数字0~9，3个)+("-"，1个)+(数字1~9，1个)+(数0~9，6个)2、(数字0，1个)+(数字0~9，2个)+("-"，1个)+(数字1~9，1个)+(数0~9，7个)

第二步：根据正则表达式规则翻译(取值范围+量词)

1、([0-0],{1})+([0-9],{3})+"-"+([1,9],{1})+([0,9],{6})2、([0-0],{1})+([0-9],{2})+"-"+([1,9],{1})+([0,9],{7})

第三步：将翻译好的(取值范围+量词)组合进行拼接

这里我们先拼接一个大组合，然后再将大组合拼接起来

1、0[0-9]{3}-[1-9][0-9]{6}2、0[0-9]{2}-[1-9][0-9]{7}

最后拼接为：

/(^0[0-9]{3}-[1-9][0-9]{6}$)|(^0[0-9]{2}-[1-9][0-9]{7}$)/

最后

正则表达式并不难，懂了其中的道道和套路——所谓的核心和精要之后，一切都会变得简单。

另外，说点题外话——网上不乏一些文章记录一些常用的正则表达式，然后新手前端在使用正则表达式的时候都会直接拿来就用。在这里我想说一下自己的看法，这些所谓记录常用的正则表达式文章并非完全都是正确的，有不少都是错的，也可能是无心的，就像我们经常在网上看到的示例，你怎么也跑不通。所以同学们在日后使用的过程尽量自己写正则表达式，多写写练练和总结，实在不会了可以去参考一下，但真的不要照搬下来。咱不说这种会影响自己成长的话，咱就说你抄的一定都是对的吗？多动手，多思考一下，总没有坏处的。

参考：

正则入门：https://segmentfault.com/a/1190000009324194；
正则要点：https://segmentfault.com/a/1190000012705245