JS正则表达式完整版

目录

引言

第一章 正则表达式字符匹配攻略

1 两种模糊匹配

2. 字符组

3. 量词

4. 多选分支

5. 案例分析

第1章 小结

第二章 正则表达式位置匹配攻略

1. 什么是位置呢？

2. 如何匹配位置呢？

3. 位置的特性

4. 相关案例

第二章小结

第三章 正则表达式括号的作用

1. 分组和分支结构

2. 引用分组

3. 反向引用

4. 非捕获分组

5. 相关案例

第三章小结

第4章 正则表达式回溯法原理

1. 没有回溯的匹配

2. 有回溯的匹配

3. 常见的回溯形式

第四章小结

第5章 正则表达式的拆分

1. 结构和操作符

2. 注意要点

3. 案例分析

第五章小结

第6章 正则表达式的构建

1. 平衡法则

2. 构建正则前提

3. 准确性

4. 效率

第六章小结

第七章 正则表达式编程

1. 正则表达式的四种操作

2. 相关API注意要点

3. 真实案例

第七章小结

后记

1. 需要注意的地方

2. 参考资料

3. 个人感悟

---

引言

亲爱的读者朋友，如果你点开了这篇文章，说明你对正则很感兴趣。

想必你也了解正则的重要性，在我看来正则表达式是衡量程序员水平的一个侧面标准。

关于正则表达式的教程，网上也有很多，相信你也看了一些。

与之不同的是，本文的目的是希望所有认真读完的童鞋们，都有实质性的提高。

本文内容共有七章，用JavaScript语言完整地讨论了正则表达式的方方面面。

如果觉得文章某块儿没有说明白清楚，欢迎留言，能力范围之内，老姚必做详细解答。

具体章节如下：

• 引言
• 第一章 正则表达式字符匹配攻略
• 第二章 正则表达式位置匹配攻略
• 第三章 正则表达式括号的作用
• 第四章 正则表达式回溯法原理
• 第五章 正则表达式的拆分
• 第六章 正则表达式的构建
• 第七章 正则表达式编程
• 后记

下面简单地说说每一章都讨论了什么？

正则是匹配模式，要么匹配字符，要么匹配位置。

第1章和第2章以这个角度去讲解了正则的基础。

在正则中可以使用括号捕获数据，要么在API中进行分组引用，要么在正则里进行反向引用。

这是第3章的主题，讲解了正则中括号的作用。

学习正则表达式，是需要了解其匹配原理的。

第4章，讲解了正则了正则表达式的回溯法原理。另外在第6章里，也讲解了正则的表达式的整体工作原理。

不仅能看懂别人的正则，还要自己会写正则。

第5章，是从读的角度，去拆分一个正则表达式，而第6章是从写的角度，去构建一个正则表达式。

学习正则，是为了在真实世界里应用的。

第7章讲解了正则的用法，和相关API需要注意的地方。

如何阅读本文？

我的建议是阅读两遍。第一遍，不求甚解地快速阅读一遍。阅读过程中遇到的问题不妨记录下来，也许阅读完毕后就能解决很多。然后有时间的话，再带着问题去精读第二遍。

深呼吸，开始我们的正则表达式旅程吧。我在终点等你。

 

第一章 正则表达式字符匹配攻略

正则表达式是匹配模式，要么匹配字符，要么匹配位置。请记住这句话。

然而关于正则如何匹配字符的学习，大部分人都觉得这块比较杂乱。

毕竟元字符太多了，看起来没有系统性，不好记。本章就解决这个问题。

内容包括：

1. 两种模糊匹配
2. 字符组
3. 量词
4. 分支结构
5.  案例分析

1 两种模糊匹配

如果正则只有精确匹配是没多大意义的，比如/hello/，也只能匹配字符串中的"hello"这个子串。

1. var regex = /hello/;

2. console.log( regex.test("hello") );

3. // => true

4.  

正则表达式之所以强大，是因为其能实现模糊匹配。

而模糊匹配，有两个方向上的“模糊”：横向模糊和纵向模糊。

1.1 横向模糊匹配

横向模糊指的是，一个正则可匹配的字符串的长度不是固定的，可以是多种情况的。

其实现的方式是使用量词。譬如{m,n}，表示连续出现最少m次，最多n次。

比如/ab{2,5}c/表示匹配这样一个字符串：第一个字符是“a”，接下来是2到5个字符“b”，最后是字符“c”。测试如下：

1. var regex = /ab{2,5}c/g;

2. var string = "abc abbc abbbc abbbbc abbbbbc abbbbbbc";

3. console.log( string.match(regex) );

4. // => ["abbc", "abbbc", "abbbbc", "abbbbbc"]

5.  

注意：案例中用的正则是/ab{2,5}c/g，后面多了g，它是正则的一个修饰符。表示全局匹配，即在目标字符串中按顺序找到满足匹配模式的所有子串，强调的是“所有”，而不只是“第一个”。g是单词global的首字母。

1.2 纵向模糊匹配

纵向模糊指的是，一个正则匹配的字符串，具体到某一位字符时，它可以不是某个确定的字符，可以有多种可能。

其实现的方式是使用字符组。譬如[abc]，表示该字符是可以字符“a”、“b”、“c”中的任何一个。

比如/a[123]b/可以匹配如下三种字符串："a1b"、"a2b"、"a3b"。测试如下：

1. var regex = /a[123]b/g;

2. var string = "a0b a1b a2b a3b a4b";

3. console.log( string.match(regex) );

4. // => ["a1b", "a2b", "a3b"]

5.  

以上就是本章讲的主体内容，只要掌握横向和纵向模糊匹配，就能解决很大部分正则匹配问题。

接下来的内容就是展开说了，如果对此都比较熟悉的话，可以跳过，直接看本章案例那节。

2. 字符组

需要强调的是，虽叫字符组（字符类），但只是其中一个字符。例如[abc]，表示匹配一个字符，它可以是“a”、“b”、“c”之一。

2.1 范围表示法

如果字符组里的字符特别多的话，怎么办？可以使用范围表示法。

比如[123456abcdefGHIJKLM]，可以写成[1-6a-fG-M]。用连字符-来省略和简写。

因为连字符有特殊用途，那么要匹配“a”、“-”、“z”这三者中任意一个字符，该怎么做呢？

不能写成[a-z]，因为其表示小写字符中的任何一个字符。

可以写成如下的方式：[-az]或[az-]或[a\-z]。即要么放在开头，要么放在结尾，要么转义。总之不会让引擎认为是范围表示法就行了。

2.2 排除字符组

纵向模糊匹配，还有一种情形就是，某位字符可以是任何东西，但就不能是"a"、"b"、"c"。

此时就是排除字符组（反义字符组）的概念。例如[^abc]，表示是一个除"a"、"b"、"c"之外的任意一个字符。字符组的第一位放^（脱字符），表示求反的概念。

当然，也有相应的范围表示法。

2.3 常见的简写形式

有了字符组的概念后，一些常见的符号我们也就理解了。因为它们都是系统自带的简写形式。

\d就是[0-9]。表示是一位数字。记忆方式：其英文是digit（数字）。

\D就是[^0-9]。表示除数字外的任意字符。

\w就是[0-9a-zA-Z_]。表示数字、大小写字母和下划线。记忆方式：w是word的简写，也称单词字符。

\W是[^0-9a-zA-Z_]。非单词字符。

\s是[ \t\v\n\r\f]。表示空白符，包括空格、水平制表符、垂直制表符、换行符、回车符、换页符。记忆方式：s是space character的首字母。

\S是[^ \t\v\n\r\f]。 非空白符。

.就是[^\n\r\u2028\u2029]。通配符，表示几乎任意字符。换行符、回车符、行分隔符和段分隔符除外。记忆方式：想想省略号...中的每个点，都可以理解成占位符，表示任何类似的东西。

如果要匹配任意字符怎么办？可以使用[\d\D]、[\w\W]、[\s\S]和[^]中任何的一个。

3. 量词

量词也称重复。掌握{m,n}的准确含义后，只需要记住一些简写形式。

3.1 简写形式

{m,} 表示至少出现m次。

{m} 等价于{m,m}，表示出现m次。

? 等价于{0,1}，表示出现或者不出现。记忆方式：问号的意思表示，有吗？

+ 等价于{1,}，表示出现至少一次。记忆方式：加号是追加的意思，得先有一个，然后才考虑追加。

* 等价于{0,}，表示出现任意次，有可能不出现。记忆方式：看看天上的星星，可能一颗没有，可能零散有几颗，可能数也数不过来。

3.2 贪婪匹配和惰性匹配

看如下的例子：

1. var regex = /\d{2,5}/g;

2. var string = "123 1234 12345 123456";

3. console.log( string.match(regex) );

4. // => ["123", "1234", "12345", "12345"]

5.  

其中正则/\d{2,5}/，表示数字连续出现2到5次。会匹配2位、3位、4位、5位连续数字。

但是其是贪婪的，它会尽可能多的匹配。你能给我6个，我就要5个。你能给我3个，我就3要个。反正只要在能力范围内，越多越好。

我们知道有时贪婪不是一件好事（请看文章最后一个例子）。而惰性匹配，就是尽可能少的匹配：

1. var regex = /\d{2,5}?/g;

2. var string = "123 1234 12345 123456";

3. console.log( string.match(regex) );

4. // => ["12", "12", "34", "12", "34", "12", "34", "56"]

5.  

其中/\d{2,5}?/表示，虽然2到5次都行，当2个就够的时候，就不在往下尝试了。

通过在量词后面加个问号就能实现惰性匹配，因此所有惰性匹配情形如下：

{m,n}?
{m,}?
??
+?
*?

对惰性匹配的记忆方式是：量词后面加个问号，问一问你知足了吗，你很贪婪吗？

4. 多选分支

一个模式可以实现横向和纵向模糊匹配。而多选分支可以支持多个子模式任选其一。

具体形式如下：(p1|p2|p3)，其中p1、p2和p3是子模式，用|（管道符）分隔，表示其中任何之一。

例如要匹配"good"和"nice"可以使用/good|nice/。测试如下：

1. var regex = /good|nice/g;

2. var string = "good idea, nice try.";

3. console.log( string.match(regex) );

4. // => ["good", "nice"]

5.  

但有个事实我们应该注意，比如我用/good|goodbye/，去匹配"goodbye"字符串时，结果是"good"：

1. var regex = /good|goodbye/g;

2. var string = "goodbye";

3. console.log( string.match(regex) );

4. // => ["good"]

5.  

而把正则改成/goodbye|good/，结果是：

1. var regex = /goodbye|good/g;

2. var string = "goodbye";

3. console.log( string.match(regex) );

4. // => ["goodbye"]

5.  

也就是说，分支结构也是惰性的，即当前面的匹配上了，后面的就不再尝试了。

5. 案例分析

匹配字符，无非就是字符组、量词和分支结构的组合使用罢了。

下面找几个例子演练一下（其中，每个正则并不是只有唯一写法）：

5.1 匹配16进制颜色值

要求匹配：

#ffbbad

#Fc01DF

#FFF

#ffE

分析：

表示一个16进制字符，可以用字符组[0-9a-fA-F]。

其中字符可以出现3或6次，需要是用量词和分支结构。

使用分支结构时，需要注意顺序。

正则如下：

1. var regex = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g;

2. var string = "#ffbbad #Fc01DF #FFF #ffE";

3. console.log( string.match(regex) );

4. // => ["#ffbbad", "#Fc01DF", "#FFF", "#ffE"]

5.  

5.2 匹配时间

以24小时制为例。

要求匹配：

23:59

02:07

分析：

共4位数字，第一位数字可以为[0-2]。

当第1位为2时，第2位可以为[0-3]，其他情况时，第2位为[0-9]。

第3位数字为[0-5]，第4位为[0-9]

正则如下：

1. var regex = /^([01][0-9]|[2][0-3]):[0-5][0-9]$/;

2. console.log( regex.test("23:59") );

3. console.log( regex.test("02:07") );

4. // => true

5. // => true

如果也要求匹配7:9，也就是说时分前面的0可以省略。

此时正则变成：

1. var regex = /^(0?[0-9]|1[0-9]|[2][0-3]):(0?[0-9]|[1-5][0-9])$/;

2. console.log( regex.test("23:59") );

3. console.log( regex.test("02:07") );

4. console.log( regex.test("7:9") );

5. // => true

6. // => true

7. // => true

5.3 匹配日期

比如yyyy-mm-dd格式为例。

要求匹配：

2017-06-10

分析：

年，四位数字即可，可用[0-9]{4}。

月，共12个月，分两种情况01、02、……、09和10、11、12，可用(0[1-9]|1[0-2])。

日，最大31天，可用(0[1-9]|[12][0-9]|3[01])。

正则如下：

1. var regex = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;

2. console.log( regex.test("2017-06-10") );

3. // => true

4.  

5.4 window操作系统文件路径

要求匹配：

F:\study\javascript\regex\regular expression.pdf

F:\study\javascript\regex\

F:\study\javascript

F:\

分析：

整体模式是: 盘符:\文件夹\文件夹\文件夹\

其中匹配F:\，需要使用[a-zA-Z]:\\，其中盘符不区分大小写，注意\字符需要转义。

文件名或者文件夹名，不能包含一些特殊字符，此时我们需要排除字符组[^\\:*<>|"?\r\n/]来表示合法字符。另外不能为空名，至少有一个字符，也就是要使用量词+。因此匹配“文件夹\”，可用[^\\:*<>|"?\r\n/]+\\。

另外“文件夹\”，可以出现任意次。也就是([^\\:*<>|"?\r\n/]+\\)*。其中括号提供子表达式。

路径的最后一部分可以是“文件夹”，没有\，因此需要添加([^\\:*<>|"?\r\n/]+)?。

最后拼接成了一个看起来比较复杂的正则：

1. var regex = /^[a-zA-Z]:\\([^\\:*<>|"?\r\n/]+\\)*([^\\:*<>|"?\r\n/]+)?$/;

2. console.log( regex.test("F:\\study\\javascript\\regex\\regular expression.pdf") );

3. console.log( regex.test("F:\\study\\javascript\\regex\\") );

4. console.log( regex.test("F:\\study\\javascript") );

5. console.log( regex.test("F:\\") );

6. // => true

7. // => true

8. // => true

9. // => true

其中，JS中字符串表示\时，也要转义。

5.5 匹配id

要求从

提取出id="container"。

可能最开始想到的正则是：

1. var regex = /id=".*"/

2. var string = '

   ';

3. console.log(string.match(regex)[0]);

4. // => id="container" class="main"

5.  

因为.是通配符，本身就匹配双引号的，而量词*又是贪婪的，当遇到container后面双引号时，不会停下来，会继续匹配，直到遇到最后一个双引号为止。

解决之道，可以使用惰性匹配：

1. var regex = /id=".*?"/

2. var string = '

   ';

3. console.log(string.match(regex)[0]);

4. // => id="container"

5.  

当然，这样也会有个问题。效率比较低，因为其匹配原理会涉及到“回溯”这个概念（这里也只是顺便提一下，第四章会详细说明）。可以优化如下：

1. var regex = /id="[^"]*"/

2. var string = '

   ';

3. console.log(string.match(regex)[0]);

4. // => id="container"

第1章 小结

字符匹配相关的案例，挺多的，不一而足。

掌握字符组和量词就能解决大部分常见的情形，也就是说，当你会了这二者，JS正则算是入门了。

 

第二章 正则表达式位置匹配攻略

正则表达式是匹配模式，要么匹配字符，要么匹配位置。请记住这句话。

然而大部分人学习正则时，对于匹配位置的重视程度没有那么高。

本章讲讲正则匹配位置的总总。

内容包括：

1. 什么是位置？
2. 如何匹配位置？
3. 位置的特性
4. 几个应用实例分析

1. 什么是位置呢？

位置是相邻字符之间的位置。比如，下图中箭头所指的地方：

2. 如何匹配位置呢？

在ES5中，共有6个锚字符：

^ $ \b \B (?=p) (?!p)

2.1 ^和$

^（脱字符）匹配开头，在多行匹配中匹配行开头。

$（美元符号）匹配结尾，在多行匹配中匹配行结尾。

比如我们把字符串的开头和结尾用"#"替换（位置可以替换成字符的！）：

1. var result = "hello".replace(/^|$/g, '#');

2. console.log(result);

3. // => "#hello#"

4.  

多行匹配模式时，二者是行的概念，这个需要我们的注意：

1. var result = "I\nlove\njavascript".replace(/^|$/gm, '#');

2. console.log(result);

3. /*

4. #I#

5. #love#

6. #javascript#

7. */

8.  

2.2 \b和\B

\b是单词边界，具体就是\w和\W之间的位置，也包括\w和^之间的位置，也包括\w和$之间的位置。

比如一个文件名是"[JS] Lesson_01.mp4"中的\b，如下：

1. var result = "[JS] Lesson_01.mp4".replace(/\b/g, '#');

2. console.log(result);

3. // => "[#JS#] #Lesson_01#.#mp4#"

4.  

为什么是这样呢？这需要仔细看看。

首先，我们知道，\w是字符组[0-9a-zA-Z_]的简写形式，即\w是字母数字或者下划线的中任何一个字符。而\W是排除字符组[^0-9a-zA-Z_]的简写形式，即\W是\w以外的任何一个字符。

此时我们可以看看"[#JS#] #Lesson_01#.#mp4#"中的每一个"#"，是怎么来的。

• 第一个"#"，两边是"["与"J"，是\W和\w之间的位置。
• 第二个"#"，两边是"S"与"]"，也就是\w和\W之间的位置。
• 第三个"#"，两边是空格与"L"，也就是\W和\w之间的位置。
• 第四个"#"，两边是"1"与"."，也就是\w和\W之间的位置。
• 第五个"#"，两边是"."与"m"，也就是\W和\w之间的位置。
• 第六个"#"，其对应的位置是结尾，但其前面的字符"4"是\w，即\w和$之间的位置。

知道了\b的概念后，那么\B也就相对好理解了。

\B就是\b的反面的意思，非单词边界。例如在字符串中所有位置中，扣掉\b，剩下的都是\B的。

具体说来就是\w与\w、\W与\W、^与\W，\W与$之间的位置。

比如上面的例子，把所有\B替换成"#"：

1. var result = "[JS] Lesson_01.mp4".replace(/\B/g, '#');

2. console.log(result);

3. // => "#[J#S]# L#e#s#s#o#n#_#0#1.m#p#4"

4.  

2.3 (?=p)和(?!p)

(?=p)，其中p是一个子模式，即p前面的位置。

比如(?=l)，表示'l'字符前面的位置，例如：

1. var result = "hello".replace(/(?=l)/g, '#');

2. console.log(result);

3. // => "he#l#lo"

4.  

而(?!p)就是(?=p)的反面意思，比如：

1. var result = "hello".replace(/(?!l)/g, '#');

2.  

3. console.log(result);

4. // => "#h#ell#o#"

5.  

二者的学名分别是positive lookahead和negative lookahead。

中文翻译分别是正向先行断言和负向先行断言。

ES6中，还支持positive lookbehind和negative lookbehind。

具体是(?<=p)和(?。

也有书上把这四个东西，翻译成环视，即看看右边或看看左边。

但一般书上，没有很好强调这四者是个位置。

比如(?=p)，一般都理解成：要求接下来的字符与p匹配，但不能包括p的那些字符。

而在本人看来(?=p)就与^一样好理解，就是p前面的那个位置。

3. 位置的特性

对于位置的理解，我们可以理解成空字符""。

比如"hello"字符串等价于如下的形式：

1. "hello" == "" + "h" + "" + "e" + "" + "l" + "" + "l" + "o" + "";

2.  

也等价于：

1. "hello" == "" + "" + "hello"

2.  

因此，把/^hello$/写成/^^hello$$$/，是没有任何问题的：

1. var result = /^^hello$$$/.test("hello");

2. console.log(result);

3. // => true

4.  

甚至可以写成更复杂的:

1. var result = /(?=he)^^he(?=\w)llo$\b\b$/.test("hello");

2. console.log(result);

3. // => true

4.  

也就是说字符之间的位置，可以写成多个。

把位置理解空字符，是对位置非常有效的理解方式。

4. 相关案例

4.1 不匹配任何东西的正则

让你写个正则不匹配任何东西

easy，/.^/

因为此正则要求只有一个字符，但该字符后面是开头。

4.2 数字的千位分隔符表示法

比如把"12345678"，变成"12,345,678"。

可见是需要把相应的位置替换成","。

思路是什么呢？

4.2.1 弄出最后一个逗号

使用(?=\d{3}$)就可以做到：

1. var result = "12345678".replace(/(?=\d{3}$)/g, ',')

2. console.log(result);

3. // => "12345,678"

4.  

4.2.2 弄出所有的逗号

因为逗号出现的位置，要求后面3个数字一组，也就是\d{3}至少出现一次。

此时可以使用量词+：

1. var result = "12345678".replace(/(?=(\d{3})+$)/g, ',')

2. console.log(result);

3. // => "12,345,678"

4.  

4.2.3 匹配其余案例

写完正则后，要多验证几个案例，此时我们会发现问题：

1. var result = "123456789".replace(/(?=(\d{3})+$)/g, ',')

2. console.log(result);

3. // => ",123,456,789"

4.  

因为上面的正则，仅仅表示把从结尾向前数，一但是3的倍数，就把其前面的位置替换成逗号。因此才会出现这个问题。

怎么解决呢？我们要求匹配的到这个位置不能是开头。

我们知道匹配开头可以使用^，但要求这个位置不是开头怎么办？

easy，(?!^)，你想到了吗？测试如下：

1. var string1 = "12345678",

2. string2 = "123456789";

3. reg = /(?!^)(?=(\d{3})+$)/g;

4.  

5. var result = string1.replace(reg, ',')

6. console.log(result);

7. // => "12,345,678"

8.  

9. result = string2.replace(reg, ',');

10. console.log(result);

11. // => "123,456,789"

12.  

4.2.4 支持其他形式

如果要把"12345678 123456789"替换成"12,345,678 123,456,789"。

此时我们需要修改正则，把里面的开头^和结尾$，替换成\b：

1. var string = "12345678 123456789",

2. reg = /(?!\b)(?=(\d{3})+\b)/g;

3.  

4. var result = string.replace(reg, ',')

5. console.log(result);

6. // => "12,345,678 123,456,789"

7.  

其中(?!\b)怎么理解呢？

要求当前是一个位置，但不是\b前面的位置，其实(?!\b)说的就是\B。

因此最终正则变成了：/\B(?=(\d{3})+\b)/g。

4.3 验证密码问题

密码长度6-12位，由数字、小写字符和大写字母组成，但必须至少包括2种字符。

此题，如果写成多个正则来判断，比较容易。但要写成一个正则就比较困难。

那么，我们就来挑战一下。看看我们对位置的理解是否深刻。

4.3.1 简化

不考虑“但必须至少包括2种字符”这一条件。我们可以容易写出：

1. var reg = /^[0-9A-Za-z]{6,12}$/;

2.  

4.3.2 判断是否包含有某一种字符

假设，要求的必须包含数字，怎么办？此时我们可以使用(?=.*[0-9])来做。

因此正则变成：

1. var reg = /(?=.*[0-9])^[0-9A-Za-z]{6,12}$/;

2.  

4.3.3 同时包含具体两种字符

比如同时包含数字和小写字母，可以用(?=.*[0-9])(?=.*[a-z])来做。

因此正则变成：

1. var reg = /(?=.*[0-9])(?=.*[a-z])^[0-9A-Za-z]{6,12}$/;

2.  

4.3.4 解答

我们可以把原题变成下列几种情况之一：

1. 同时包含数字和小写字母
2. 同时包含数字和大写字母
3. 同时包含小写字母和大写字母
4. 同时包含数字、小写字母和大写字母

以上的4种情况是或的关系（实际上，可以不用第4条）。

最终答案是：

1. var reg = /((?=.*[0-9])(?=.*[a-z])|(?=.*[0-9])(?=.*[A-Z])|(?=.*[a-z])(?=.*[A-Z]))^[0-9A-Za-z]{6,12}$/;

2. console.log( reg.test("1234567") ); // false 全是数字

3. console.log( reg.test("abcdef") ); // false 全是小写字母

4. console.log( reg.test("ABCDEFGH") ); // false 全是大写字母

5. console.log( reg.test("ab23C") ); // false 不足6位

6. console.log( reg.test("ABCDEF234") ); // true 大写字母和数字

7. console.log( reg.test("abcdEF234") ); // true 三者都有

8.  

4.3.5 解惑

上面的正则看起来比较复杂，只要理解了第二步，其余就全部理解了。

/(?=.*[0-9])^[0-9A-Za-z]{6,12}$/

对于这个正则，我们只需要弄明白(?=.*[0-9])^即可。

分开来看就是(?=.*[0-9])和^。

表示开头前面还有个位置（当然也是开头，即同一个位置，想想之前的空字符类比）。

(?=.*[0-9])表示该位置后面的字符匹配.*[0-9]，即，有任何多个任意字符，后面再跟个数字。

翻译成大白话，就是接下来的字符，必须包含个数字。

4.3.6 另外一种解法

“至少包含两种字符”的意思就是说，不能全部都是数字，也不能全部都是小写字母，也不能全部都是大写字母。

那么要求“不能全部都是数字”，怎么做呢？(?!p)出马！

对应的正则是：

1. var reg = /(?!^[0-9]{6,12}$)^[0-9A-Za-z]{6,12}$/;

2.  

三种“都不能”呢？

最终答案是：

1. var reg = /(?!^[0-9]{6,12}$)(?!^[a-z]{6,12}$)(?!^[A-Z]{6,12}$)^[0-9A-Za-z]{6,12}$/;

2. console.log( reg.test("1234567") ); // false 全是数字

3. console.log( reg.test("abcdef") ); // false 全是小写字母

4. console.log( reg.test("ABCDEFGH") ); // false 全是大写字母

5. console.log( reg.test("ab23C") ); // false 不足6位

6. console.log( reg.test("ABCDEF234") ); // true 大写字母和数字

7. console.log( reg.test("abcdEF234") ); // true 三者都有

8.  

第二章小结

位置匹配相关的案例，挺多的，不一而足。

掌握匹配位置的这6个锚字符，给我们解决正则问题一个新工具。

 

第三章 正则表达式括号的作用

不管哪门语言中都有括号。正则表达式也是一门语言，而括号的存在使这门语言更为强大。

对括号的使用是否得心应手，是衡量对正则的掌握水平的一个侧面标准。

括号的作用，其实三言两语就能说明白，括号提供了分组，便于我们引用它。

引用某个分组，会有两种情形：在JavaScript里引用它，在正则表达式里引用它。

本章内容虽相对简单，但我也要写长点。

内容包括：

1. 分组和分支结构
2. 捕获分组
3. 反向引用
4. 非捕获分组
5. 相关案例

1. 分组和分支结构

这二者是括号最直觉的作用，也是最原始的功能。

1.1 分组

我们知道/a+/匹配连续出现的“a”，而要匹配连续出现的“ab”时，需要使用/(ab)+/。

其中括号是提供分组功能，使量词+作用于“ab”这个整体，测试如下：

1. var regex = /(ab)+/g;

2. var string = "ababa abbb ababab";

3. console.log( string.match(regex) );

4. // => ["abab", "ab", "ababab"]

5.  

1.2 分支结构

而在多选分支结构(p1|p2)中，此处括号的作用也是不言而喻的，提供了子表达式的所有可能。

比如，要匹配如下的字符串：

I love JavaScript

I love Regular Expression

可以使用正则：

1. var regex = /^I love (JavaScript|Regular Expression)$/;

2. console.log( regex.test("I love JavaScript") );

3. console.log( regex.test("I love Regular Expression") );

4. // => true

5. // => true

如果去掉正则中的括号，即/^I love JavaScript|Regular Expression$/，匹配字符串是"I love JavaScript"和"Regular Expression"，当然这不是我们想要的。

2. 引用分组

这是括号一个重要的作用，有了它，我们就可以进行数据提取，以及更强大的替换操作。

而要使用它带来的好处，必须配合使用实现环境的API。

以日期为例。假设格式是yyyy-mm-dd的，我们可以先写一个简单的正则：

1. var regex = /\d{4}-\d{2}-\d{2}/;

2.  

然后再修改成括号版的：

1. var regex = /(\d{4})-(\d{2})-(\d{2})/;

2.  

为什么要使用这个正则呢？

2.1 提取数据

比如提取出年、月、日，可以这么做：

1. var regex = /(\d{4})-(\d{2})-(\d{2})/;

2. var string = "2017-06-12";

3. console.log( string.match(regex) );

4. // => ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12"]

5.  

match返回的一个数组，第一个元素是整体匹配结果，然后是各个分组（括号里）匹配的内容，然后是匹配下标，最后是输入的文本。（注意：如果正则是否有修饰符g，match返回的数组格式是不一样的）。

另外也可以使用正则对象的exec方法：

1. var regex = /(\d{4})-(\d{2})-(\d{2})/;

2. var string = "2017-06-12";

3. console.log( regex.exec(string) );

4. // => ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12"]

5.  

同时，也可以使用构造函数的全局属性$1至$9来获取：

1. var regex = /(\d{4})-(\d{2})-(\d{2})/;

2. var string = "2017-06-12";

3.  

4. regex.test(string); // 正则操作即可，例如

5. //regex.exec(string);

6. //string.match(regex);

7.  

8. console.log(RegExp.$1); // "2017"

9. console.log(RegExp.$2); // "06"

10. console.log(RegExp.$3); // "12"

11.  

2.2 替换

比如，想把yyyy-mm-dd格式，替换成mm/dd/yyyy怎么做？

1. var regex = /(\d{4})-(\d{2})-(\d{2})/;

2. var string = "2017-06-12";

3. var result = string.replace(regex, "$2/$3/$1");

4. console.log(result);

5. // => "06/12/2017"

6.  

其中replace中的，第二个参数里用$1、$2、$3指代相应的分组。等价于如下的形式：

1. var regex = /(\d{4})-(\d{2})-(\d{2})/;

2. var string = "2017-06-12";

3. var result = string.replace(regex, function() {

4. return RegExp.$2 + "/" + RegExp.$3 + "/" + RegExp.$1;

5. });

6. console.log(result);

7. // => "06/12/2017"

8.  

也等价于：

1. var regex = /(\d{4})-(\d{2})-(\d{2})/;

2. var string = "2017-06-12";

3. var result = string.replace(regex, function(match, year, month, day) {

4. return month + "/" + day + "/" + year;

5. });

6. console.log(result);

7. // => "06/12/2017"

8.  

3. 反向引用

除了使用相应API来引用分组，也可以在正则本身里引用分组。但只能引用之前出现的分组，即反向引用。

还是以日期为例。

比如要写一个正则支持匹配如下三种格式：

2016-06-12

2016/06/12

2016.06.12

最先可能想到的正则是:

1. var regex = /\d{4}(-|\/|\.)\d{2}(-|\/|\.)\d{2}/;

2. var string1 = "2017-06-12";

3. var string2 = "2017/06/12";

4. var string3 = "2017.06.12";

5. var string4 = "2016-06/12";

6. console.log( regex.test(string1) ); // true

7. console.log( regex.test(string2) ); // true

8. console.log( regex.test(string3) ); // true

9. console.log( regex.test(string4) ); // true

10.  

其中/和.需要转义。虽然匹配了要求的情况，但也匹配"2016-06/12"这样的数据。

假设我们想要求分割符前后一致怎么办？此时需要使用反向引用：

1. var regex = /\d{4}(-|\/|\.)\d{2}\1\d{2}/;

2. var string1 = "2017-06-12";

3. var string2 = "2017/06/12";

4. var string3 = "2017.06.12";

5. var string4 = "2016-06/12";

6. console.log( regex.test(string1) ); // true

7. console.log( regex.test(string2) ); // true

8. console.log( regex.test(string3) ); // true

9. console.log( regex.test(string4) ); // false

10.  

注意里面的\1，表示的引用之前的那个分组(-|\/|\.)。不管它匹配到什么（比如-），\1都匹配那个同样的具体某个字符。

我们知道了\1的含义后，那么\2和\3的概念也就理解了，即分别指代第二个和第三个分组。

看到这里，此时，恐怕你会有三个问题。

3.1 括号嵌套怎么办？

以左括号（开括号）为准。比如：

1. var regex = /^((\d)(\d(\d)))\1\2\3\4$/;

2. var string = "1231231233";

3. console.log( regex.test(string) ); // true

4. console.log( RegExp.$1 ); // 123

5. console.log( RegExp.$2 ); // 1

6. console.log( RegExp.$3 ); // 23

7. console.log( RegExp.$4 ); // 3

8.  

我们可以看看这个正则匹配模式：

• 第一个字符是数字，比如说1，
• 第二个字符是数字，比如说2，
• 第三个字符是数字，比如说3，
• 接下来的是\1，是第一个分组内容，那么看第一个开括号对应的分组是什么，是123，
• 接下来的是\2，找到第2个开括号，对应的分组，匹配的内容是1，
• 接下来的是\3，找到第3个开括号，对应的分组，匹配的内容是23，
• 最后的是\4，找到第3个开括号，对应的分组，匹配的内容是3。

这个问题，估计仔细看一下，就该明白了。

3.2 \10表示什么呢？

另外一个疑问可能是，即\10是表示第10个分组，还是\1和0呢？

答案是前者，虽然一个正则里出现\10比较罕见。测试如下：

1. var regex = /(1)(2)(3)(4)(5)(6)(7)(8)(9)(#) \10+/;

2. var string = "123456789# ######"

3. console.log( regex.test(string) );

4. // => true

3.3 引用不存在的分组会怎样？

因为反向引用，是引用前面的分组，但我们在正则里引用了不存在的分组时，此时正则不会报错，只是匹配反向引用的字符本身。例如\2，就匹配"\2"。注意"\2"表示对"2"进行了转意。

1. var regex = /\1\2\3\4\5\6\7\8\9/;

2. console.log( regex.test("\1\2\3\4\5\6\7\8\9") );

3. console.log( "\1\2\3\4\5\6\7\8\9".split("") );

4.  

chrome浏览器打印的结果：

4. 非捕获分组

之前文中出现的分组，都会捕获它们匹配到的数据，以便后续引用，因此也称他们是捕获型分组。

如果只想要括号最原始的功能，但不会引用它，即，既不在API里引用，也不在正则里反向引用。此时可以使用非捕获分组(?:p)，例如本文第一个例子可以修改为：

1. var regex = /(?:ab)+/g;

2. var string = "ababa abbb ababab";

3. console.log( string.match(regex) );

4. // => ["abab", "ab", "ababab"]

5.  

5. 相关案例

至此括号的作用已经讲完了，总结一句话，就是提供了可供我们使用的分组，如何用就看我们的了。

5.1 字符串trim方法模拟

trim方法是去掉字符串的开头和结尾的空白符。有两种思路去做。

第一种，匹配到开头和结尾的空白符，然后替换成空字符。如：

1. function trim(str) {

2. return str.replace(/^\s+|\s+$/g, '');

3. }

4. console.log( trim(" foobar ") );

5. // => "foobar"

6.  

第二种，匹配整个字符串，然后用引用来提取出相应的数据：

1. function trim(str) {

2. return str.replace(/^\s*(.*?)\s*$/g, "$1");

3. }

4. console.log( trim(" foobar ") );

5. // => "foobar"

6.  

这里使用了惰性匹配*?，不然也会匹配最后一个空格之前的所有空格的。

当然，前者效率高。

5.2 将每个单词的首字母转换为大写

1. function titleize(str) {

2. return str.toLowerCase().replace(/(?:^|\s)\w/g, function(c) {

3. return c.toUpperCase();

4. });

5. }

6. console.log( titleize('my name is epeli') );

7. // => "My Name Is Epeli"

8.  

思路是找到每个单词的首字母，当然这里不使用非捕获匹配也是可以的。

5.3 驼峰化

1. function camelize(str) {

2. return str.replace(/[-_\s]+(.)?/g, function(match, c) {

3. return c ? c.toUpperCase() : '';

4. });

5. }

6. console.log( camelize('-moz-transform') );

7. // => "MozTransform"

8.  

其中分组(.)表示首字母。单词的界定是，前面的字符可以是多个连字符、下划线以及空白符。正则后面的?的目的，是为了应对str尾部的字符可能不是单词字符，比如str是'-moz-transform    '。

5.4 中划线化

1. function dasherize(str) {

2. return str.replace(/([A-Z])/g, '-$1').replace(/[-_\s]+/g, '-').toLowerCase();

3. }

4. console.log( dasherize('MozTransform') );

5. // => "-moz-transform"

6.  

驼峰化的逆过程。

5.5 html转义和反转义

1. // 将HTML特殊字符转换成等值的实体

2. function escapeHTML(str) {

3. var escapeChars = {

4. '¢' : 'cent',

5. '£' : 'pound',

6. '¥' : 'yen',

7. '€': 'euro',

8. '©' :'copy',

9. '®' : 'reg',

10. '<' : 'lt',

11. '>' : 'gt',

12. '"' : 'quot',

13. '&' : 'amp',

14. '\'' : '#39'

15. };

16. return str.replace(new RegExp('[' + Object.keys(escapeChars).join('') +']', 'g'), function(match) {

17. return '&' + escapeChars[match] + ';';

18. });

19. }

20. console.log( escapeHTML('

    Blah blah blah
    ') );

21. // => "<div>Blah blah blah</div>";

22.  

其中使用了用构造函数生成的正则，然后替换相应的格式就行了，这个跟本章没多大关系。

倒是它的逆过程，使用了括号，以便提供引用，也很简单，如下：

1. // 实体字符转换为等值的HTML。

2. function unescapeHTML(str) {

3. var htmlEntities = {

4. nbsp: ' ',

5. cent: '¢',

6. pound: '£',

7. yen: '¥',

8. euro: '€',

9. copy: '©',

10. reg: '®',

11. lt: '<',

12. gt: '>',

13. quot: '"',

14. amp: '&',

15. apos: '\''

16. };

17. return str.replace(/\&([^;]+);/g, function(match, key) {

18. if (key in htmlEntities) {

19. return htmlEntities[key];

20. }

21. return match;

22. });

23. }

24. console.log( unescapeHTML('<div>Blah blah blah</div>') );

25. // => "

    Blah blah blah
    "

26.  

通过key获取相应的分组引用，然后作为对象的键。

5.6 匹配成对标签

要求匹配：

laoyao bye bye

不匹配：

";

var string2 = "

laoyao bye bye

";

var string3 = "