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]/

一个常见的误解是，feeling /[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)分组捕捉
以上只介绍了括号内有|时需要注意的几点。在这里，我们将重点讨论括号(英文中的括号())

在正则化中，括号有两种含义，一种用于分组，另一种用于捕获所需的值

分组

()结合*？+{}使用时，它在括号中重复整个。

/(ab)+/ 匹配一个或多个ab/(ab)+|(cd)+/ 匹配一个或多个 ab或cd

捕获

捕捉是一个强大的功能，也是我们经常使用正则化的原因，也用()表示。

示例:查找样式中的透明度值

<div id="opacity" style="opacity:0.5;filter:alpha(opacity=50);">function getOpacity(elem) { var filter = elem.style.filter; if(filter){ return filter.indexOf("opacity=") >= 0 ?(parseFloat(filter.***tch(/opacity=([^)]*)/)[1]) / 100) + "" : "" } return elem.style.opacity}

Capture主要与exec()、***tch()和G标签结合使用，下面会介绍。

需要强调的是，由于分组和捕获一样使用了()，当正则表达式中既有用于分组的()又有用于捕获的()时，可以在分组部分加上?:，这样结果集只包含我们想要捕获的部分。

例子如下:

'<div>hahahahah<div>'.***tch(/(<[^>]+>)([^<]+)/)> [ <div>hahahahah , <div> , hahahahah ] //两个捕获如果我们只对标签内的文本感兴趣'<div>hahahahah<div>'.***tch(/(?:<[^>]+>)([^<]+)/)> [ <div>hahahahah , hahahahah ] //对于<div>,我们不关心，就不要了

说到？:类似的我就不得不提了？=然后呢？！

？=表示必须遵循某件事，并且不包含在结果中？=指定的部分，并且不捕获

？！意思是一定不要跟着做什么。

看一看。

/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 for***tNumber(str) { return str.replace(/B(?=(d{3})+$)/g, ',')}for***tNumber("123456789")> 1,234,567,890

解释:

B表示

除了字符串首字母之前的边界

，比如1和2之间的边界，2和3之间的边界等后面()中的?=(d{3})+$表示上面提到的那些边界后面

必须跟着3N个数字直到字符串尾部

g表示全局匹配，即每个上面说的边界都要检测2，如果符合，replace把边界替换成,

4)exec()、***tch()和G标记

Exec()和***tch()都是返回数组，结果集包含捕获的内容。

当规则中不包含G时，exec()和***tch()返回的结果集是相同的，整个匹配的字符串和()依次指定的要捕获的部分都在数组中。

当有g时，

***tch()返回的数组中的每一项都是依次匹配的整个字符串，不包括每次匹配

中捕获的内容

相比之下。

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

可以看到加了G之后，返回的数组只有匹配。

那么，如果想全部匹配并捕获，应该怎么做呢？

与exec ()

结合使用时

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

5)替换()

对于string的replace方法，重要的是要说第二个参数是函数。

For str.replace (/xxxxx/g，function () {})

该功能将在每次前一次常规匹配成功时执行。该函数的参数依次是完整的匹配文本、被捕获的部分、当前匹配的索引和原始字符串。

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

注意，有人可能会将第二个函数参数重写为一个箭头函数，比如(..) = >;{..}可能会出错，所以要小心。

3.应用要点

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

1.test()

检索字符串中指定的值。真或假。这是最常用的方法。

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.***tch()

检索字符串中的指定值。如果匹配成功，返回包含匹配结果的数组；否则，将返回null。这里需要注意的一点是，如果没有设置全局匹配g，那么返回的数组只存储第一个成功匹配的值。

var reg1=/javascript/i;var reg2=/javascript/ig;console.log('hello Javascript Javascript Javascript'.***tch(reg1));//['Javascript']console.log('hello Javascript Javascript Javascript'.***tch(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。当调用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}$)/

最后

正则表达式并不难，在你知道了方式和套路之后一切都会变得简单——所谓的核心和本质。

另外题外话——网上有一些文章记录了一些常见的正则表达式，然后新手前端在使用正则表达式的时候会直接用到。在此，我想表达一下我的看法。这些常用于记录的所谓正则表达式文章并不都是正确的，有很多是错误的，也可能是无意的。就像我们经常在网上看到的例子一样，你是跑不过的。所以同学们在以后使用正则表达式的过程中要尽量自己写，多写练习和总结。如果他们真的不会，可以参考，但是真的不要抄袭。先不说这样会影响自己的成长。这么说吧，你抄的都一定是对的？多做多想没有坏处。