关于正则表达式:正则表达式完整教程略长

6次阅读

共计 42256 个字符，预计需要花费 106 分钟才能阅读完成。

引言

敬爱的读者敌人，如果你点开了这篇文章，阐明你对正则很感兴趣。

想必你也理解正则的重要性，在我看来正则表达式是掂量程序员程度的一个侧面规范。

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

与之不同的是，本文的目标是心愿所有认真读完的童鞋们，都有实质性的进步。

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

如果感觉文章某块儿没有说明确分明，欢送留言，能力范畴之内，老姚必做具体解答。

具体章节如下：

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

上面简略地说说每一章都探讨了什么？

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

第 1 章和第 2 章以这个角度去解说了正则的根底。

在正则中能够应用括号捕捉数据，要么在 API 中进行分组援用，要么在正则里进行反向援用。

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

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

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

不仅能看懂他人的正则，还要本人会写正则。

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

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

第 7 章解说了正则的用法，和相干 API 须要留神的中央。

如何浏览本文？

我的倡议是浏览两遍。第一遍，不求甚解地疾速浏览一遍。浏览过程中遇到的问题无妨记录下来，兴许浏览结束后就能解决很多。而后有工夫的话，再带着问题去精读第二遍。

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

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

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

然而对于正则如何匹配字符的学习，大部分人都感觉这块比拟芜杂。

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

内容包含：

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

1 两种含糊匹配

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

var regex = /hello/;
console.log(regex.test("hello") ); 
// => true

正则表达式之所以弱小，是因为其能实现含糊匹配。

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

1.1 横向含糊匹配

横向含糊指的是，一个正则可匹配的字符串的长度不是固定的，能够是多种状况的。

其实现的形式是应用量词。譬如{m,n}，示意间断呈现起码 m 次，最多 n 次。

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

var regex = /ab{2,5}c/g;
var string = "abc abbc abbbc abbbbc abbbbbc abbbbbbc";
console.log(string.match(regex) ); 
// => ["abbc", "abbbc", "abbbbc", "abbbbbc"]

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

1.2 纵向含糊匹配

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

其实现的形式是应用字符组。譬如 [abc]，示意该字符是能够字符“a”、“b”、“c” 中的任何一个。

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

var regex = /a[123]b/g;
var string = "a0b a1b a2b a3b a4b";
console.log(string.match(regex) ); 
// => ["a1b", "a2b", "a3b"]

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

接下来的内容就是开展说了，如果对此都比拟相熟的话，能够跳过，间接看本章案例那节。

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 贪心匹配和惰性匹配

看如下的例子：

var regex = /\d{2,5}/g;
var string = "123 1234 12345 123456";
console.log(string.match(regex) ); 
// => ["123", "1234", "12345", "12345"]

其中正则/\d{2,5}/，示意数字间断呈现 2 到 5 次。会匹配 2 位、3 位、4 位、5 位间断数字。

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

咱们晓得有时贪心不是一件坏事（请看文章最初一个例子）。而惰性匹配，就是尽可能少的匹配：

var regex = /\d{2,5}?/g;
var string = "123 1234 12345 123456";
console.log(string.match(regex) ); 
// => ["12", "12", "34", "12", "34", "12", "34", "56"]

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

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

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

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

4. 多选分支

一个模式能够实现横向和纵向含糊匹配。而多选分支能够反对多个子模式任选其一。

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

例如要匹配 "good" 和"nice"能够应用/good|nice/。测试如下：

var regex = /good|nice/g;
var string = "good idea, nice try.";
console.log(string.match(regex) ); 
// => ["good", "nice"]

但有个事实咱们应该留神，比方我用 /good|goodbye/，去匹配"goodbye" 字符串时，后果是"good"：

var regex = /good|goodbye/g;
var string = "goodbye";
console.log(string.match(regex) ); 
// => ["good"]

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

var regex = /goodbye|good/g;
var string = "goodbye";
console.log(string.match(regex) ); 
// => ["goodbye"]

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

5. 案例剖析

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

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

5.1 匹配 16 进制色彩值

要求匹配：

#ffbbad

#Fc01DF

#FFF

#ffE

剖析：

示意一个 16 进制字符，能够用字符组[0-9a-fA-F]。

其中字符能够呈现 3 或 6 次，须要是用量词和分支构造。

应用分支构造时，须要留神程序。

正则如下：

var regex = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g;
var string = "#ffbbad #Fc01DF #FFF #ffE";
console.log(string.match(regex) ); 
// => ["#ffbbad", "#Fc01DF", "#FFF", "#ffE"]

5.2 匹配工夫

以 24 小时制为例。

要求匹配：

23:59

02:07

剖析：

共 4 位数字，第一位数字能够为[0-2]。

当第 1 位为 2 时，第 2 位能够为[0-3]，其余状况时，第 2 位为[0-9]。

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

正则如下：

var regex = /^([01][0-9]|[2][0-3]):[0-5][0-9]$/;
console.log(regex.test("23:59") ); 
console.log(regex.test("02:07") ); 
// => true
// => true

如果也要求匹配 7:9，也就是说时候后面的 0 能够省略。

此时正则变成：

var regex = /^(0?[0-9]|1[0-9]|[2][0-3]):(0?[0-9]|[1-5][0-9])$/;
console.log(regex.test("23:59") ); 
console.log(regex.test("02:07") ); 
console.log(regex.test("7:9") ); 
// => true
// => true
// => 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])。

正则如下：

var regex = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;
console.log(regex.test("2017-06-10") ); 
// => true

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/]+)?。

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

var regex = /^[a-zA-Z]:\\([^\\:*<>|"?\r\n/]+\\)*([^\\:*<>|"?\r\n/]+)?$/;
console.log(regex.test("F:\\study\\javascript\\regex\\regular expression.pdf") ); 
console.log(regex.test("F:\\study\\javascript\\regex\\") ); 
console.log(regex.test("F:\\study\\javascript") ); 
console.log(regex.test("F:\\") ); 
// => true
// => true
// => true
// => true

其中，JS中字符串示意 \ 时，也要本义。

5.5 匹配 id

要求从

<div id=”container” class=”main”></div>

提取出 id=”container”。

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

var regex = /id=".*"/
var string = '<div id="container"class="main"></div>';
console.log(string.match(regex)[0]); 
// => id="container" class="main"

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

解决之道，能够应用惰性匹配：

var regex = /id=".*?"/
var string = '<div id="container"class="main"></div>';
console.log(string.match(regex)[0]); 
// => id="container"

当然，这样也会有个问题。效率比拟低，因为其匹配原理会波及到“回溯”这个概念（这里也只是顺便提一下，第四章会具体阐明）。能够优化如下：

var regex = /id="[^"]*"/
var string = '<div id="container"class="main"></div>';
console.log(string.match(regex)[0]); 
// => id="container"

第 1 章 小结

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

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

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

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

然而大部分人学习正则时，对于匹配地位的器重水平没有那么高。

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

内容包含：

  1. 什么是地位？
  2. 如何匹配地位？
  3. 地位的个性
  4. 几个利用实例剖析

1. 什么是地位呢？

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

2. 如何匹配地位呢？

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

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

2.1 ^ 和 $

^（脱字符）匹配结尾，在多行匹配中匹配行结尾。

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

比方咱们把字符串的结尾和结尾用 ”#” 替换（地位能够替换成字符的！）：

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

多行匹配模式时，二者是行的概念，这个须要咱们的留神：

var result = "I\nlove\njavascript".replace(/^|$/gm, '#');
console.log(result);
/*
#I#
#love#
#javascript#
*/

2.2 \b 和 \B

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

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

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

为什么是这样呢？这须要认真看看。

首先，咱们晓得，\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 替换成 ”#”：

var result = "[JS] Lesson_01.mp4".replace(/\B/g, '#');
console.log(result); 
// => "#[J#S]# L#e#s#s#o#n#_#0#1.m#p#4"

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

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

比方 (?=l)，示意'l' 字符后面的地位，例如：

var result = "hello".replace(/(?=l)/g, '#');
console.log(result); 
// => "he#l#lo"

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

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

console.log(result); 
// => "#h#ell#o#"

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

中文翻译别离是正向后行断言和负向后行断言。

ES6中，还反对 positive lookbehind 和negative lookbehind。

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

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

但个别书上，没有很好强调这四者是个地位。

比方 (?=p)，个别都了解成：要求接下来的字符与p 匹配，但不能包含 p 的那些字符。

而在自己看来 (?=p) 就与 ^ 一样好了解，就是 p 后面的那个地位。

3. 地位的个性

对于地位的了解，咱们能够了解成空字符""。

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

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

也等价于：

"hello" == ""+"" + "hello"

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

var result = /^^hello?$/.test("hello");
console.log(result); 
// => true

甚至能够写成更简单的:

var result = /(?=he)^^he(?=\w)llo$\b\b$/.test("hello");
console.log(result); 
// => true

也就是说字符之间的地位，能够写成多个。

把地位了解空字符，是对地位十分无效的了解形式。

4. 相干案例

4.1 不匹配任何货色的正则

让你写个正则不匹配任何货色

easy，/.^/

因为此正则要求只有一个字符，但该字符前面是结尾。

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

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

可见是须要把相应的地位替换成 ”,”。

思路是什么呢？

4.2.1 弄出最初一个逗号

应用 (?=\d{3}$) 就能够做到：

var result = "12345678".replace(/(?=\d{3}$)/g, ',')
console.log(result); 
// => "12345,678"

4.2.2 弄出所有的逗号

因为逗号呈现的地位，要求前面 3 个数字一组，也就是 \d{3} 至多呈现一次。

此时能够应用量词+：

var result = "12345678".replace(/(?=(\d{3})+$)/g, ',')
console.log(result); 
// => "12,345,678"

4.2.3 匹配其余案例

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

var result = "123456789".replace(/(?=(\d{3})+$)/g, ',')
console.log(result); 
// => ",123,456,789"

因为下面的正则，仅仅示意把从结尾向前数，一然而 3 的倍数，就把其后面的地位替换成逗号。因而才会呈现这个问题。

怎么解决呢？咱们要求匹配的到这个地位不能是结尾。

咱们晓得匹配结尾能够应用^，但要求这个地位不是结尾怎么办？

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

var string1 = "12345678",
string2 = "123456789";
reg = /(?!^)(?=(\d{3})+$)/g;

var result = string1.replace(reg, ',')
console.log(result); 
// => "12,345,678"

result = string2.replace(reg, ',');
console.log(result); 
// => "123,456,789"

4.2.4 反对其余模式

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

此时咱们须要批改正则，把外面的结尾 ^ 和结尾$，替换成\b：

var string = "12345678 123456789",
reg = /(?!\b)(?=(\d{3})+\b)/g;

var result = string.replace(reg, ',')
console.log(result); 
// => "12,345,678 123,456,789"

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

要求以后是一个地位，但不是 \b 后面的地位，其实 (?!\b) 说的就是\B。

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

4.3 验证明码问题

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

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

那么，咱们就来挑战一下。看看咱们对地位的了解是否粗浅。

4.3.1 简化

不思考“但必须至多包含 2 种字符”这一条件。咱们能够容易写出：

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

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

假如，要求的必须蕴含数字，怎么办？此时咱们能够应用 (?=.*[0-9]) 来做。

因而正则变成：

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

4.3.3 同时蕴含具体两种字符

比方同时蕴含数字和小写字母，能够用 (?=.*[0-9])(?=.*[a-z]) 来做。

因而正则变成：

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

4.3.4 解答

咱们能够把原题变成下列几种状况之一：

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

以上的 4 种状况是或的关系（实际上，能够不必第 4 条）。

最终答案是：

var reg = /((?=.*[0-9])(?=.*[a-z])|(?=.*[0-9])(?=.*[A-Z])|(?=.*[a-z])(?=.*[A-Z]))^[0-9A-Za-z]{6,12}$/;
console.log(reg.test("1234567") ); // false 全是数字
console.log(reg.test("abcdef") ); // false 全是小写字母
console.log(reg.test("ABCDEFGH") ); // false 全是大写字母
console.log(reg.test("ab23C") ); // false 有余 6 位
console.log(reg.test("ABCDEF234") ); // true 大写字母和数字
console.log(reg.test("abcdEF234") ); // true 三者都有

4.3.5 解惑

下面的正则看起来比较复杂，只有了解了第二步，其余就全副了解了。

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

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

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

示意结尾后面还有个地位（当然也是结尾，即同一个地位，想想之前的空字符类比）。

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

翻译成大白话，就是从结尾算起接下来的字符，必须蕴含个数字。

留神：^肯定是须要的，不然就不是从结尾算起任意个字符后跟个数字，就无法控制整体字符个数，比方背面例子：

// 有 ^
var reg = /(?=.*[0-9])^[0-9A-Za-z]{6,12}$/;
console.log(reg.test("ABCDEFGH1234") ); // ture
console.log(reg.test("ABCDEFGH12345") ); // false

// 没有 ^
var reg = /(?=.*[0-9])^[0-9A-Za-z]{6,12}$/;
console.log(reg.test("ABCDEFGH1234") ); // ture
console.log(reg.test("ABCDEFGH12345") ); // ture

4.3.6 另外一种解法

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

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

对应的正则是：

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

三种“都不能”呢？

最终答案是：

var reg = /(?!^[0-9]{6,12}$)(?!^[a-z]{6,12}$)(?!^[A-Z]{6,12}$)^[0-9A-Za-z]{6,12}$/;
console.log(reg.test("1234567") ); // false 全是数字
console.log(reg.test("abcdef") ); // false 全是小写字母
console.log(reg.test("ABCDEFGH") ); // false 全是大写字母
console.log(reg.test("ab23C") ); // false 有余 6 位
console.log(reg.test("ABCDEF234") ); // true 大写字母和数字
console.log(reg.test("abcdEF234") ); // true 三者都有

第二章小结

地位匹配相干的案例，挺多的，不一而足。

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

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

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

对括号的应用是否得心应手，是掂量对正则的把握程度的一个侧面规范。

括号的作用，其实喋喋不休就能说明确，括号提供了分组，便于咱们援用它。

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

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

内容包含：

  1. 分组和分支构造
  2. 捕捉分组
  3. 反向援用
  4. 非捕捉分组
  5. 相干案例

1. 分组和分支构造

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

1.1 分组

咱们晓得 /a+/ 匹配间断呈现的“a”，而要匹配间断呈现的 “ab” 时，须要应用/(ab)+/。

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

var regex = /(ab)+/g;
var string = "ababa abbb ababab";
console.log(string.match(regex) ); 
// => ["abab", "ab", "ababab"]

1.2 分支构造

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

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

I love JavaScript

I love Regular Expression

能够应用正则：

var regex = /^I love (JavaScript|Regular Expression)$/;
console.log(regex.test("I love JavaScript") );
console.log(regex.test("I love Regular Expression") );
// => true
// => true

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

2. 援用分组

这是括号一个重要的作用，有了它，咱们就能够进行数据提取，以及更弱小的替换操作。

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

以日期为例。假如格局是 yyyy-mm-dd 的，咱们能够先写一个简略的正则：

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

而后再批改成括号版的：

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

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

2.1 提取数据

比方提取出年、月、日，能够这么做：

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
console.log(string.match(regex) ); 
// => ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12"]

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

另外也能够应用正则对象的 exec 办法：

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
console.log(regex.exec(string) ); 
// => ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12"]

同时，也能够应用构造函数的全局属性 $1 至$9来获取：

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";

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

console.log(RegExp.$1); // "2017"
console.log(RegExp.$2); // "06"
console.log(RegExp.$3); // "12"

2.2 替换

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

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
var result = string.replace(regex, "$2/$3/$1");
console.log(result); 
// => "06/12/2017"

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

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
var result = string.replace(regex, function() {return RegExp.$2 + "/" + RegExp.$3 + "/" + RegExp.$1;});
console.log(result); 
// => "06/12/2017"

也等价于：

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
var result = string.replace(regex, function(match, year, month, day) {return month + "/" + day + "/" + year;});
console.log(result); 
// => "06/12/2017"

3. 反向援用

除了应用相应 API 来援用分组，也能够在正则自身里援用分组。但只能援用之前呈现的分组，即反向援用。

还是以日期为例。

比方要写一个正则反对匹配如下三种格局：

2016-06-12

2016/06/12

2016.06.12

最先可能想到的正则是:

var regex = /\d{4}(-|\/|\.)\d{2}(-|\/|\.)\d{2}/;
var string1 = "2017-06-12";
var string2 = "2017/06/12";
var string3 = "2017.06.12";
var string4 = "2016-06/12";
console.log(regex.test(string1) ); // true
console.log(regex.test(string2) ); // true
console.log(regex.test(string3) ); // true
console.log(regex.test(string4) ); // true

其中 / 和.须要本义。尽管匹配了要求的状况，但也匹配 "2016-06/12" 这样的数据。

假如咱们想要求宰割符前后一致怎么办？此时须要应用反向援用：

var regex = /\d{4}(-|\/|\.)\d{2}\1\d{2}/;
var string1 = "2017-06-12";
var string2 = "2017/06/12";
var string3 = "2017.06.12";
var string4 = "2016-06/12";
console.log(regex.test(string1) ); // true
console.log(regex.test(string2) ); // true
console.log(regex.test(string3) ); // true
console.log(regex.test(string4) ); // false

留神外面的 \1，示意的援用之前的那个分组(-|\/|\.)。不论它匹配到什么（比方 -），\1 都匹配那个同样的具体某个字符。

咱们晓得了 \1 的含意后，那么 \2 和\3的概念也就了解了，即别离指代第二个和第三个分组。

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

3.1 括号嵌套怎么办？

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

var regex = /^((\d)(\d(\d)))\1\2\3\4$/;
var string = "1231231233";
console.log(regex.test(string) ); // true
console.log(RegExp.$1); // 123
console.log(RegExp.$2); // 1
console.log(RegExp.$3); // 23
console.log(RegExp.$4); // 3

咱们能够看看这个正则匹配模式：

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

这个问题，预计认真看一下，就该明确了。

3.2 \10 示意什么呢？

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

答案是前者，尽管一个正则里呈现 \10 比拟常见。测试如下：

var regex = /(1)(2)(3)(4)(5)(6)(7)(8)(9)(#) \10+/;
var string = "123456789# ######"
console.log(regex.test(string) );
// => true

3.3 援用不存在的分组会怎么？

因为反向援用，是援用后面的分组，但咱们在正则里援用了不存在的分组时，此时正则不会报错，只是匹配反向援用的字符自身。例如\2，就匹配 ”\2″。留神 ”\2″ 示意对 ”2″ 进行了转意。

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

chrome浏览器打印的后果：

4. 非捕捉分组

之前文中呈现的分组，都会捕捉它们匹配到的数据，以便后续援用，因而也称他们是捕捉型分组。

如果只想要括号最原始的性能，但不会援用它，即，既不在 API 里援用，也不在正则里反向援用。此时能够应用非捕捉分组(?:p)，例如本文第一个例子能够批改为：

var regex = /(?:ab)+/g;
var string = "ababa abbb ababab";
console.log(string.match(regex) ); 
// => ["abab", "ab", "ababab"]

5. 相干案例

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

5.1 字符串 trim 办法模仿

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

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

function trim(str) {return str.replace(/^\s+|\s+$/g, '');
}
console.log(trim("foobar") ); 
// => "foobar"

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

function trim(str) {return str.replace(/^\s*(.*?)\s*$/g, "$1");
}
console.log(trim("foobar") ); 
// => "foobar"

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

当然，前者效率高。

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

function titleize(str) {return str.toLowerCase().replace(/(?:^|\s)\w/g, function(c) {return c.toUpperCase();
    });
}
console.log(titleize('my name is epeli') ); 
// => "My Name Is Epeli"

思路是找到每个单词的首字母，当然这里不应用非捕捉匹配也是能够的。

5.3 驼峰化

function camelize(str) {return str.replace(/[-_\s]+(.)?/g, function(match, c) {return c ? c.toUpperCase() : '';
    });
}
console.log(camelize('-moz-transform') ); 
// => "MozTransform"

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

5.4 中划线化

function dasherize(str) {return str.replace(/([A-Z])/g, '-$1').replace(/[-_\s]+/g, '-').toLowerCase();}
console.log(dasherize('MozTransform') ); 
// => "-moz-transform"

驼峰化的逆过程。

5.5 html 本义和反本义

// 将 HTML 特殊字符转换成等值的实体
function escapeHTML(str) {
    var escapeChars = {
      '¢' : 'cent',
      '£' : 'pound',
      '¥' : 'yen',
      '€': 'euro',
      '©' :'copy',
      '®' : 'reg',
      '<' : 'lt',
      '>' : 'gt',
      '"':'quot','&':'amp','\'':'#39'
    };
    return str.replace(new RegExp('[' + Object.keys(escapeChars).join('') +']','g'),         function(match) {return '&' + escapeChars[match] + ';';
        }
    );
}
console.log(escapeHTML('<div>Blah blah blah</div>') );
// => "&lt;div&gt;Blah blah blah&lt;/div&gt";

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

倒是它的逆过程，应用了括号，以便提供援用，也很简略，如下：

// 实体字符转换为等值的 HTML。function unescapeHTML(str) {
    var htmlEntities = {
      nbsp: ' ',
      cent: '¢',
      pound: '£',
      yen: '¥',
      euro: '€',
      copy: '©',
      reg: '®',
      lt: '<',
      gt: '>',
      quot: '"',
      amp: '&',
      apos: '\''
    };
    return str.replace(/\&([^;]+);/g, function(match, key) {if (key in htmlEntities) {return htmlEntities[key];
        }
        return match;
    });
}
console.log(unescapeHTML('&lt;div&gt;Blah blah blah&lt;/div&gt;') );
// => "<div>Blah blah blah</div>"

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

5.6 匹配成对标签

要求匹配：

<title>regular expression</title>

<p>laoyao bye bye</p>

不匹配：

<title>wrong!</p>

匹配一个开标签，能够应用正则<[^>]+>，

匹配一个闭标签，能够应用<\/[^>]+>，

然而要求匹配成对标签，那就须要应用反向援用，如：

var regex = /<([^>]+)>[\d\D]*<\/\1>/;
var string1 = "<title>regular expression</title>";
var string2 = "<p>laoyao bye bye</p>";
var string3 = "<title>wrong!</p>";
console.log(regex.test(string1) ); // true
console.log(regex.test(string2) ); // true
console.log(regex.test(string3) ); // false

其中开标签 <[^>]+> 改成<([^>]+)>，应用括号的目标是为了前面应用反向援用，而提供分组。闭标签应用了反向援用，<\/\1>。

另外 [\d\D] 的意思是，这个字符是数字或者不是数字，因而，也就是匹配任意字符的意思。

第三章小结

正则中应用括号的例子那可是太多了，不一而足。

重点了解括号能够提供分组，咱们能够提取数据，应该就能够了。

例子中的代码，根本没做多少剖析，置信你都能看懂的。

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

学习正则表达式，是须要懂点儿匹配原理的。

而钻研匹配原理时，有两个字呈现的频率比拟高：“回溯”。

听起来挺高大上，的确还有很多人对此不明不白的。

因而，本章就简单扼要地说分明回溯到底是什么货色。

内容包含：

  1. 没有回溯的匹配
  2. 有回溯的匹配
  3. 常见的回溯模式

1. 没有回溯的匹配

假如咱们的正则是/ab{1,3}c/，其可视化模式是：

而当指标字符串是 ”abbbc” 时，就没有所谓的“回溯”。其匹配过程是：

其中子表达式 b{1,3} 示意“b”字符间断呈现 1 到 3 次。

2. 有回溯的匹配

如果指标字符串是 ”abbc”，两头就有回溯。

图中第 5 步有红颜色，示意匹配不胜利。此时 b{1,3} 曾经匹配到了 2 个字符“b”，筹备尝试第三个时，后果发现接下来的字符是“c”。那么就认为 b{1,3} 就曾经匹配结束。而后状态又回到之前的状态（即第 6 步，与第 4 步一样），最初再用子表达式c，去匹配字符“c”。当然，此时整个表达式匹配胜利了。

图中的第 6 步，就是“回溯”。

你可能对此没有感觉，这里咱们再举一个例子。正则是：

指标字符串是 ”abbbc”，匹配过程是：

其中第 7 步和第 10 步是回溯。第 7 步与第 4 步一样，此时 b{1,3} 匹配了两个 ”b”，而第 10 步与第 3 步一样，此时 b{1,3} 只匹配了一个 ”b”，这也是 b{1,3} 的最终匹配后果。

这里再看一个清晰的回溯，正则是：

指标字符串是：”acd”ef，匹配过程是：

图中省略了尝试匹配双引号失败的过程。能够看出 .* 是十分影响效率的。

为了缩小一些不必要的回溯，能够把正则批改为/"[^"]*"/。

3. 常见的回溯模式

正则表达式匹配字符串的这种形式，有个学名，叫回溯法。

回溯法也称试探法，它的根本思维是：从问题的某一种状态（初始状态）登程，搜寻从这种状态登程所能达到的所有“状态”，当一条路走到“止境”的时候（不能再后退），再后退一步或若干步，从另一种可能“状态”登程，持续搜寻，直到所有的“门路”（状态）都试探过。这种一直“后退”、一直“回溯”寻找解的办法，就称作“回溯法”。（copy 于百度百科）。

实质上就是深度优先搜索算法。其中退到之前的某一步这一过程，咱们称为“回溯”。从下面的形容过程中，能够看出，路走不通时，就会产生“回溯”。即，尝试匹配失败时，接下来的一步通常就是回溯。

情理，咱们是懂了。那么 JS 中正则表达式会产生回溯的中央都有哪些呢？

3.1 贪心量词

之前的例子都是贪心量词相干的。比方b{1,3}，因为其是贪心的，尝试可能的程序是从多往少的方向去尝试。首先会尝试 ”bbb”，而后再看整个正则是否能匹配。不能匹配时，吐出一个 ”b”，即在 ”bb” 的根底上，再持续尝试。如果还不行，再吐出一个，再试。如果还不行呢？只能阐明匹配失败了。

尽管部分匹配是贪心的，但也要满足整体能正确匹配。否则，皮之不存，毛将焉附？

此时咱们不禁会问，如果当多个贪心量词挨着存在，并互相有抵触时，此时会是怎么？

答案是，先发制人！因为深度优先搜寻。测试如下：

var string = "12345";
var regex = /(\d{1,3})(\d{1,3})/;
console.log(string.match(regex) );
// => ["12345", "123", "45", index: 0, input: "12345"]

其中，后面的 \d{1,3} 匹配的是 ”123″，前面的 \d{1,3} 匹配的是 ”45″。

3.2 惰性量词

惰性量词就是在贪心量词前面加个问号。示意尽可能少的匹配，比方：

var string = "12345";
var regex = /(\d{1,3}?)(\d{1,3})/;
console.log(string.match(regex) );
// => ["1234", "1", "234", index: 0, input: "12345"]

其中 \d{1,3}? 只匹配到一个字符 ”1″，而前面的 \d{1,3} 匹配了 ”234″。

尽管惰性量词不贪，但也会有回溯的景象。比方正则是：

指标字符串是 ”12345″，匹配过程是：

晓得你不贪、很知足，然而为了整体匹配成，没方法，也只能给你多塞点了。因而最初 \d{1,3}? 匹配的字符是 ”12″，是两个数字，而不是一个。

3.3 分支构造

咱们晓得分支也是惰性的，比方/can|candy/，去匹配字符串 ”candy”，失去的后果是 ”can”，因为分支会一个一个尝试，如果后面的满足了，前面就不会再试验了。

分支构造，可能后面的子模式会造成了部分匹配，如果接下来表达式整体不匹配时，仍会持续尝试剩下的分支。这种尝试也能够看成一种回溯。

比方正则：

指标字符串是 ”candy”，匹配过程：

下面第 5 步，尽管没有回到之前的状态，但依然回到了分支构造，尝试下一种可能。所以，能够认为它是一种回溯的。

第四章小结

其实回溯法，很容易把握的。

简略总结就是，正因为有多种可能，所以要一个一个试。直到，要么到某一步时，整体匹配胜利了；要么最初都试完后，发现整体匹配不胜利。

  1. 贪心量词“试”的策略是：买衣服砍价。价格太高了，便宜点，不行，再便宜点。
  2. 惰性量词“试”的策略是：卖东西加价。给少了，再多给点行不，还有点少啊，再给点。
  3. 分支构造“试”的策略是：货比三家。这家不行，换一家吧，还不行，再换。

既然有回溯的过程，那么匹配效率必定低一些。绝对谁呢？绝对那些 DFA 引擎。

而 JS 的正则引擎是 NFA，NFA 是“非确定型无限自动机”的简写。

大部分语言中的正则都是 NFA，为啥它这么风行呢？

答：你别看我匹配慢，然而我编译快啊，而且我还乏味哦。

第 5 章 正则表达式的拆分

对于一门语言的把握水平怎么样，能够有两个角度来掂量：读和写。

不仅要求本人能解决问题，还要看懂他人的解决方案。代码是这样，正则表达式也是这样。

正则这门语言跟其余语言有一点不同，它通常就是一大堆字符，而没有所谓“语句”的概念。

如何能正确地把一大串正则拆分成一块一块的，成为了破解“天书”的要害。

本章就解决这一问题，内容包含：

  1. 构造和操作符
  2. 留神要点
  3. 案例剖析

1. 构造和操作符

编程语言个别都有操作符。只有有操作符，就会呈现一个问题。当一大堆操作在一起时，先操作谁，又后操作谁呢？为了不产生歧义，就须要语言自身定义好操作程序，即所谓的优先级。

而在正则表达式中，操作符都体现在构造中，即由特殊字符和一般字符所代表的一个个非凡整体。

JS 正则表达式中，都有哪些构造呢？

字符字面量、字符组、量词、锚字符、分组、抉择分支、反向援用。

具体含意简要回顾如下（如懂，能够略去不看）：

字面量 ，匹配一个具体字符，包含不必本义的和须要本义的。比方 a 匹配字符 ”a”，又比方\n 匹配换行符，又比方 \. 匹配小数点。

字符组 ，匹配一个字符，能够是多种可能之一，比方[0-9]，示意匹配一个数字。也有\d 的简写模式。另外还有反义字符组，示意能够是除了特定字符之外任何一个字符，比方 [^0-9]，示意一个非数字字符，也有\D 的简写模式。

量词 ，示意一个字符间断呈现，比方a{1,3} 示意“a”字符间断呈现 3 次。另外还有常见的简写模式，比方 a+ 示意“a”字符间断呈现至多一次。

锚点 ，匹配一个地位，而不是字符。比方 ^ 匹配字符串的结尾，又比方\b 匹配单词边界，又比方 (?=\d) 示意数字后面的地位。

分组，用括号示意一个整体，比方(ab)+，示意 ”ab” 两个字符间断呈现屡次，也能够应用非捕捉分组(?:ab)+。

分支，多个子表达式多选一，比方abc|bcd，表达式匹配 ”abc” 或者 ”bcd” 字符子串。

反向援用，比方\2，示意援用第 2 个分组。

其中波及到的操作符有：

1. 本义符 \
2. 括号和方括号 (...)、(?:...)、(?=...)、(?!...)、[...]
3. 量词限定符 {m}、{m,n}、{m,}、?、*、+
4. 地位和序列 ^、$、\ 元字符 、 个别字符
\5. 管道符（竖杠）|

下面操作符的优先级从上至下，由高到低。

这里，咱们来剖析一个正则：

/ab?(c|de*)+|fg/
  1. 因为括号的存在，所以，(c|de*)是一个整体构造。
  2. 在 (c|de*) 中，留神其中的量词 *，因而e* 是一个整体构造。
  3. 又因为分支构造“|”优先级最低，因而 c 是一个整体、而 de* 是另一个整体。
  4. 同理，整个正则分成了 a、b?、(...)+、f、g。而因为分支的起因，又能够分成 ab?(c|de*)+ 和fg这两局部。

心愿你没被我绕晕，下面的剖析可用其可视化模式形容如下：

2. 留神要点

对于构造和操作符，还是有几点须要强调：

2.1 匹配字符串整体问题

因为是要匹配整个字符串，咱们常常会在正则前后中加上锚字符 ^ 和$。

比方要匹配指标字符串 ”abc” 或者 ”bcd” 时，如果一不小心，就会写成/^abc|bcd$/。

而地位字符和字符序列优先级要比竖杠高，故其匹配的构造是：

应该批改成:

2.2 量词连缀问题

假如，要匹配这样的字符串：

\1. 每个字符为 a、b、c 任选其一

\2. 字符串的长度是 3 的倍数

此时正则不能想当然地写成 /^[abc]{3}+$/，这样会报错，说+ 后面没什么可反复的：

此时要批改成：

2.3 元字符本义问题

所谓元字符，就是正则中有非凡含意的字符。

所有构造里，用到的元字符总结如下：

^ $ . * + ? | \ / () [] {} = ! : - ,

当匹配下面的字符自身时，能够一律本义：

var string = "^$.*+?|\\/[]{}=!:-,";
var regex = /\^\$\.\*\+\?\|\\\/\[\]\{\}\=\!\:\-\,/;
console.log(regex.test(string) ); 
// => true

其中 string 中的 \ 字符也要本义的。

另外，在 string 中，也能够把每个字符本义，当然，本义后的后果仍是自身：

var string = "^$.*+?|\\/[]{}=!:-,";
var string2 = "\^\$\.\*\+\?\|\\\/\[\]\{\}\=\!\:\-\,";
console.log(string == string2); 
// => true

当初的问题是，是不是每个字符都须要本义呢？否，看状况。

2.3.1 字符组中的元字符

跟字符组相干的元字符有 []、^、-。因而在会引起歧义的中央进行本义。例如结尾的^ 必须本义，不然会把整个字符组，看成反义字符组。

var string = "^$.*+?|\\/[]{}=!:-,";
var regex = /[\^$.*+?|\\/\[\]{}=!:\-,]/g;
console.log(string.match(regex) );
// => ["^", "$", ".", "*", "+", "?", "|", "\", "/", "[", "]", "{", "}", "=", "!", ":", "-", ","]

2.3.2 匹配“[abc]”和“{3,5}”

咱们晓得[abc]，是个字符组。如果要匹配字符串 ”[abc]” 时，该怎么办？

能够写成/\[abc\]/，也能够写成/\[abc]/，测试如下：

var string = "[abc]";
var regex = /\[abc]/g;
console.log(string.match(regex)[0] ); 
// => "[abc]"

只须要在第一个方括号本义即可，因为前面的方括号构不成字符组，正则不会引发歧义，天然不须要本义。

同理，要匹配字符串 ”{3,5}”，只须要把正则写成 /\{3,5}/ 即可。

另外，咱们晓得量词有简写模式 {m,}，却没有{,n} 的状况。尽管后者不形成量词的模式，但此时并不会报错。当然，匹配的字符串也是 ”{,n}”，测试如下：

var string = "{,3}";
var regex = /{,3}/g;
console.log(string.match(regex)[0] ); 
// => "{,3}"

2.3.3 其余状况

比方 = ! : - , 等符号，只有不在非凡构造中，也不须要本义。

然而，括号须要前后都本义的，如/\(123\)/。

至于剩下的 ^ $ . * + ? | \ / 等字符，只有不在字符组内，都须要本义的。

3. 案例剖析

接下来剖析两个例子，一个简略的，一个简单的。

3.1 身份证

正则表达式是：

/^(\d{15}|\d{17}[\dxX])$/

因为竖杠“|”, 的优先级最低，所以正则分成了两局部 \d{15} 和\d{17}[\dxX]。

  • \d{15}示意 15 位间断数字。
  • \d{17}[\dxX]示意 17 位间断数字，最初一位能够是数字能够大小写字母 ”x”。

可视化如下：

3.2 IPV4 地址

正则表达式是：

/^((0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])\.){3}(0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])$/

这个正则，看起来十分吓人。然而相熟优先级后，会立马得出如下的构造：

((...)\.){3}(...)

下面的两个 (...) 是一样的构造。示意匹配的是 3 位数字。因而整个构造是

3 位数.3 位数.3 位数.3 位数

而后再来剖析(...)：

(0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])(0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])

它是一个多选构造，分成 5 个局部：

  • 0{0,2}\d，匹配一位数，包含 0 补齐的。比方，9、09、009；
  • 0?\d{2}，匹配两位数，包含 0 补齐的，也包含一位数；
  • 1\d{2}，匹配 100 到 199;
  • 2[0-4]\d，匹配 200-249；
  • 25[0-5]，匹配 250-255。

最初来看一下其可视化模式：

第五章小结

把握正则表达式中的优先级后，再看任何正则应该都有信念剖析上来了。

至于例子，不一而足，没有写太多。

这里略微总结一下，竖杠的优先级最低，即最初运算。

只有晓得这一点，就能读懂大部分正则。

另外对于元字符本义问题，当本人不确定与否时，只管去本义，总之是不会错的。

第 6 章 正则表达式的构建

对于一门语言的把握水平怎么样，能够有两个角度来掂量：读和写。

不仅要看懂他人的解决方案，也要能独立地解决问题。代码是这样，正则表达式也是这样。

与“读”相比，“写”往往更为重要，这个情理是显而易见的。

对正则的使用，首重就是：如何针对问题，构建一个适合的正则表达式？

本章就解决该问题，内容包含：

  1. 均衡法令
  2. 构建正则前提
  3. 准确性
  4. 效率

1. 均衡法令

构建正则有一点十分重要，须要做到上面几点的均衡：

  1. 匹配预期的字符串
  2. 不匹配非预期的字符串
  3. 可读性和可维护性
  4. 效率

2. 构建正则前提

2.1 是否能应用正则

正则太强大了，以至于咱们轻易遇到一个操作字符串问题时，都会下意识地去想，用正则该怎么做。但咱们始终要揭示本人，正则尽管弱小，但不是万能的，很多看似很简略的事件，还是做不到的。

比方匹配这样的字符串：1010010001….

尽管很有法则，然而只靠正则就是无能为力。

2.2 是否有必要应用正则

要意识到正则的局限，不要去钻研根本无法实现的工作。同时，也不能走入另一个极其：无所不用正则。能用字符串 API 解决的简略问题，就不该正则出马。

  • 比方，从日期中提取出年月日，尽管能够应用正则：
var string = "2017-07-01";
var regex = /^(\d{4})-(\d{2})-(\d{2})/;
console.log(string.match(regex) );
// => ["2017-07-01", "2017", "07", "01", index: 0, input: "2017-07-01"]

其实，能够应用字符串的 split 办法来做，即可：

var string = "2017-07-01";
var result = string.split("-");
console.log(result);
// => ["2017", "07", "01"]
  • 比方，判断是否有问号，尽管能够应用：
var string = "?id=xx&act=search";
console.log(string.search(/\?/) );
// => 0

其实，能够应用字符串的 indexOf 办法：

var string = "?id=xx&act=search";
console.log(string.indexOf("?") );
// => 0
  • 比方获取子串，尽管能够应用正则：
var string = "JavaScript";
console.log(string.match(/.{4}(.+)/)[1] );
// => Script

其实，能够间接应用字符串的 substring 或substr办法来做：

var string = "JavaScript";
console.log(string.substring(4) );
// => Script

2.3 是否有必要构建一个简单的正则

比方明码匹配问题，要求明码长度 6 -12 位，由数字、小写字符和大写字母组成，但必须至多包含 2 种字符。

在第 2 章里，咱们写出了正则是：

/(?!^[0-9]{6,12}$)(?!^[a-z]{6,12}$)(?!^[A-Z]{6,12}$)^[0-9A-Za-z]{6,12}$/

其实能够应用多个小正则来做：

var regex1 = /^[0-9A-Za-z]{6,12}$/;
var regex2 = /^[0-9]{6,12}$/;
var regex3 = /^[A-Z]{6,12}$/;
var regex4 = /^[a-z]{6,12}$/;
function checkPassword(string) {if (!regex1.test(string)) return false;
    if (regex2.test(string)) return false;
    if (regex3.test(string)) return false;
    if (regex4.test(string)) return false;
    return true;
}

3. 准确性

所谓准确性，就是能匹配预期的指标，并且不匹配非预期的指标。

这里提到了“预期”二字，那么咱们就须要晓得指标的组成规定。

不然没法界定什么样的指标字符串是合乎预期的，什么样的又不是合乎预期的。

上面将举例说明，当指标字符串形成比较复杂时，该如何构建正则，并思考到哪些均衡。

3.1 匹配固定电话

比方要匹配如下格局的固定电话号码：

055188888888

0551-88888888

(0551)88888888

第一步，理解各局部的模式规定。

下面的电话，总体上分为区号和号码两局部（不思考分机号和 +86 的情景）。

区号是 0 结尾的 3 到 4 位数字，对应的正则是：0\d{2,3}

号码是非 0 结尾的 7 到 8 位数字，对应的正则是：[1-9]\d{6,7}

因而，匹配 055188888888 的正则是：/^0\d{2,3}[1-9]\d{6,7}$/

匹配 0551-88888888 的正则是：/^0\d{2,3}-[1-9]\d{6,7}$/

匹配(0551)88888888 的正则是：/^\(0\d{2,3}\)[1-9]\d{6,7}$/

第二步，明确模式关系。

这三者情景是或的关系，能够构建分支：

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

提取公共局部：

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

进一步简写：

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

其可视化模式：

下面的正则构建过程略显罗嗦，然而这样做，能保障正则是精确的。

上述三种情景是或的关系，这一点很重要，不然很容易按字符是否呈现的情景把正则写成：

/^\(?0\d{2,3}\)?-?[1-9]\d{6,7}$/

尽管也能匹配上述指标字符串，但也会匹配(0551-88888888 这样的字符串。当然，这不是咱们想要的。

其实这个正则也不是完满的，因为事实中，并不是每个 3 位数和 4 位数都是一个实在的区号。

这就是一个均衡取舍问题，个别够用就行。

3.2 匹配浮点数

要求匹配如下的格局：

1.23、+1.23、-1.23

10、+10、-10

.2、+.2、-.2

能够看出正则分为三局部。

符号局部：[+-]

整数局部：\d+

小数局部：\.\d+

上述三个局部，并不是全副都呈现。如果此时很容易写出如下的正则：

/^[+-]?(\d+)?(\.\d+)?$/

此正则看似没问题，但这个正则也会匹配空字符 ””。

因为指标字符串的模式关系不是要求每局部都是可选的。

要匹配 1.23、+1.23、-1.23，能够用/^[+-]?\d+\.\d+$/

要匹配 10、+10、-10，能够用/^[+-]?\d+$/

要匹配.2、+.2、-.2，能够用/^[+-]?\.\d+$/

因而整个正则是这三者的或的关系，提取公众局部后是：

/^[+-]?(\d+\.\d+|\d+|\.\d+)$/

其可视化模式是：

如果要求不匹配 +.2 和 -.2，此时正则变成：

当然，/^[+-]?(\d+\.\d+|\d+|\.\d+)$/也不是完满的，咱们也是做了些取舍，比方：

  • 它也会匹配 012 这样以 0 结尾的整数。如果要求不匹配的话，须要批改整数局部的正则。
  • 个别进行验证操作之前，都要通过 trim 和判空。那样的话，兴许那个谬误正则也就够用了。
  • 也能够进一步改写成：/^[+-]?(\d+)?(\.)?\d+$/，这样咱们就须要思考可读性和可维护性了。

4. 效率

保障了准确性后，才须要是否要思考要优化。大多数情景是不须要优化的，除非运行的十分慢。什么情景正则表达式运行才慢呢？咱们须要考查正则表达式的运行过程（原理）。

正则表达式的运行分为如下的阶段：

  1. 编译
  2. 设定起始地位
  3. 尝试匹配
  4. 匹配失败的话，从下一位开始持续第 3 步
  5. 最终后果：匹配胜利或失败

上面以代码为例，来看看这几个阶段都做了什么：

var regex = /\d+/g;
console.log(regex.lastIndex, regex.exec("123abc34def") );
console.log(regex.lastIndex, regex.exec("123abc34def") );
console.log(regex.lastIndex, regex.exec("123abc34def") );
console.log(regex.lastIndex, regex.exec("123abc34def") );
// => 0 ["123", index: 0, input: "123abc34def"]
// => 3 ["34", index: 6, input: "123abc34def"]
// => 8 null
// => 0 ["123", index: 0, input: "123abc34def"]

具体分析如下：

var regex = /\d+/g; 复制代码

当生成一个正则时，引擎会对其进行编译。报错与否呈现这这个阶段。

regex.exec("123abc34def")

当尝试匹配时，须要确定从哪一地位开始匹配。个别情景都是字符串的结尾，即第 0 位。

但当应用 test 和exec办法，且正则有 g 时，起始地位是从正则对象的 lastIndex 属性开始。

因而第一次 exec 是从第 0 位开始，而第二次是从 3 开始的。

设定好起始地位后，就开始尝试匹配了。

比方第一次exec，从 0 开始，去尝试匹配，并且胜利地匹配到 3 个数字。此时完结时的下标是 2，因而下一次的起始地位是 3。

而第二次，起始下标是 3，但第 3 个字符是“a”，并不是数字。但此时并不会间接报匹配失败，而是挪动到下一地位，即从第 4 位开始持续尝试匹配，但该字符是 b，也不是数字。再挪动到下一位，是 c 仍不行，再挪动一位是数字 3，此时匹配到了两位数字 34。此时，下一次匹配的地位是 d 的地位，即第 8 位。

第三次，是从第 8 位开始匹配，直到试到最初一位，也没发现匹配的，因而匹配失败，返回 null。同时设置lastIndex 为 0，即，如要再尝试匹配的话，需从头开始。

从下面能够看出，匹配会呈现效率问题，次要呈现在下面的第 3 阶段和第 4 阶段。

因而，次要优化手法也是针对这两阶段的。

4.1 应用具体型字符组来代替通配符，来打消回溯

而在第三阶段，最大的问题就是回溯。

例如，匹配双援用号之间的字符。如，匹配字符串 123″abc”456 中的 ”abc”。

如果正则用的是：/".*"/，，会在第 3 阶段产生 4 次回溯（粉色示意 .* 匹配的内容）：

如果正则用的是：/".*?"/，会产生 2 次回溯（粉色示意 .*? 匹配的内容）：

因为回溯的存在，须要引擎保留多种可能中未尝试过的状态，以便后续回溯时应用。注定要占用肯定的内存。

此时要应用具体化的字符组，来代替通配符.，以便打消不必要的字符，此时应用正则/"[^"]*"/，即可。

4.2 应用非捕捉型分组

因为括号的作用之一是，能够捕捉分组和分支里的数据。那么就须要内存来保留它们。

当咱们不须要应用分组援用和反向援用时，此时能够应用非捕捉分组。例如：

/^[+-]?(\d+\.\d+|\d+|\.\d+)$/

能够批改成：

/^[+-]?(?:\d+\.\d+|\d+|\.\d+)$/

4.3 独立出确定字符

例如/a+/，能够批改成/aa*/。

因为后者能比前者多确定了字符 a。这样会在第四步中，放慢判断是否匹配失败，进而放慢移位的速度。

4.4 提取分支公共局部

比方 /^abc|^def/，批改成/^(?:abc|def)/。

又比方/this|that/，批改成/th(?:is|at)/。

这样做，能够缩小匹配过程中可打消的反复。

4.5 缩小分支的数量，放大它们的范畴

/red|read/，能够批改成/rea?d/。此时分支和量词产生的回溯的老本是不一样的。但这样优化后，可读性会升高的。

第六章小结

本章波及的内容并不多。

个别状况下，针对某问题能写出一个满足需要的正则，基本上就能够了。

至于准确性和效率方面的谋求，纯属看集体要求了。我感觉够用就行了。

对于准确性，本章关怀的是最罕用的解决思路：

针对每种情景，别离写出正则，然用分支把他们合并在一起，再提取分支公共局部，就能失去精确的正则。

至于优化，本章没有为了凑数，去写一大堆。理解了匹配原理，常见的优化手法也就这么几种。

第七章 正则表达式编程

什么叫常识，能领导咱们实际的货色才叫常识。

学习一样货色，如果不能应用，最多只能算作夸夸其谈。正则表达式的学习，也不例外。

把握了正则表达式的语法后，下一步，也是要害的一步，就是在真实世界中应用它。

那么如何应用正则表达式呢？有哪些要害的点呢？本章就解决这个问题。

内容包含：

  1. 正则表达式的四种操作
  2. 相干 API 留神要点
  3. 实在案例

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

正则表达式是匹配模式，不论如何应用正则表达式，万变不离其宗，都须要先“匹配”。

有了匹配这一基本操作后，才有其余的操作：验证、切分、提取、替换。

进行任何相干操作，也须要宿主引擎相干 API 的配合应用。当然，在 JS 中，相干 API 也不多。

1.1 验证

验证是正则表达式最间接的利用，比方表单验证。

在说验证之前，先要说分明匹配是什么概念。

所谓匹配，就是看指标字符串里是否有满足匹配的子串。因而，“匹配”的实质就是“查找”。

有没有匹配，是不是匹配上，判断是否的操作，即称为“验证”。

这里举一个例子，来看看如何应用相干 API 进行验证操作的。

比方，判断一个字符串中是否有数字。

  • 应用search
var regex = /\d/;
var string = "abc123";
console.log(!!~string.search(regex) );
// => true
  • 应用test
var regex = /\d/;
var string = "abc123";
console.log(regex.test(string) );
// => true
  • 应用match
var regex = /\d/;
var string = "abc123";
console.log(!!string.match(regex) );
// => true
  • 应用exec
var regex = /\d/;
var string = "abc123";
console.log(!!regex.exec(string) );
// => true

其中，最罕用的是test。

1.2 切分

匹配上了，咱们就能够进行一些操作，比方切分。

所谓“切分”，就是把指标字符串，切成一段一段的。在 JS 中应用的是split。

比方，指标字符串是"html,css,javascript"，按逗号来切分：

var regex = /,/;
var string = "html,css,javascript";
console.log(string.split(regex) );
// => ["html", "css", "javascript"]
复制代码

又比方，如下的日期格局：

2017/06/26

2017.06.26

2017-06-26

能够应用split“切出”年月日：

var regex = /\D/;
console.log("2017/06/26".split(regex) );
console.log("2017.06.26".split(regex) );
console.log("2017-06-26".split(regex) );
// => ["2017", "06", "26"]
// => ["2017", "06", "26"]
// => ["2017", "06", "26"]

1.3 提取

尽管整体匹配上了，但有时须要提取局部匹配的数据。

此时正则通常要应用分组援用（分组捕捉）性能，还须要配合应用相干API。

这里，还是以日期为例，提取出年月日。留神上面正则中的括号：

  • match
var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2017-06-26";
console.log(string.match(regex) );
// =>["2017-06-26", "2017", "06", "26", index: 0, input: "2017-06-26"]
  • exec
var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2017-06-26";
console.log(regex.exec(string) );
// =>["2017-06-26", "2017", "06", "26", index: 0, input: "2017-06-26"]
  • test
var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2017-06-26";
regex.test(string);
console.log(RegExp.$1, RegExp.$2, RegExp.$3);
// => "2017" "06" "26"
  • search
var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2017-06-26";
string.search(regex);
console.log(RegExp.$1, RegExp.$2, RegExp.$3);
// => "2017" "06" "26"
  • replace
var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2017-06-26";
var date = [];
string.replace(regex, function(match, year, month, day) {date.push(year, month, day);
});
console.log(date);
// => ["2017", "06", "26"]

其中，最罕用的是match。

1.4 替换

找，往往不是目标，通常下一步是为了替换。在 JS 中，应用 replace 进行替换。

比方把日期格局，从 yyyy-mm-dd 替换成yyyy/mm/dd：

var string = "2017-06-26";
var today = new Date(string.replace(/-/g, "/") );
console.log(today);
// => Mon Jun 26 2017 00:00:00 GMT+0800 (中国规范工夫)

这里只是简略地利用了一下 replace。但，replace 办法是弱小的，是须要重点把握的。

2. 相干 API 留神要点

从下面能够看出用于正则操作的办法，共有 6 个，字符串实例 4 个，正则实例 2 个：

String#search

String#split

String#match

String#replace

RegExp#test

RegExp#exec

本文不打算具体地解说它们的方方面面细节，具体能够参考《JavaScript 权威指南》的第三局部。本文重点列出一些容易漠视的中央，以飨读者。

2.1 search 和 match 的参数问题

咱们晓得字符串实例的那 4 个办法参数都反对正则和字符串。

但 search 和match，会把字符串转换为正则的。

var string = "2017.06.27";

console.log(string.search(".") );
// => 0
// 须要批改成下列模式之一
console.log(string.search("\\.") );
console.log(string.search(/\./) );
// => 4
// => 4

console.log(string.match(".") );
// => ["2", index: 0, input: "2017.06.27"]
// 须要批改成下列模式之一
console.log(string.match("\\.") );
console.log(string.match(/\./) );
// => [".", index: 4, input: "2017.06.27"]
// => [".", index: 4, input: "2017.06.27"]

console.log(string.split(".") );
// => ["2017", "06", "27"]

console.log(string.replace(".", "/") );
// => "2017/06.27"

2.2 match 返回后果的格局问题

match返回后果的格局，与正则对象是否有修饰符 g 无关。

var string = "2017.06.27";
var regex1 = /\b(\d+)\b/;
var regex2 = /\b(\d+)\b/g;
console.log(string.match(regex1) );
console.log(string.match(regex2) );
// => ["2017", "2017", index: 0, input: "2017.06.27"]
// => ["2017", "06", "27"]

没有g，返回的是规范匹配格局，即，数组的第一个元素是整体匹配的内容，接下来是分组捕捉的内容，而后是整体匹配的第一个下标，最初是输出的指标字符串。

有g，返回的是所有匹配的内容。

当没有匹配时，不论有无g，都返回null。

2.3 exec 比 match 更弱小

当正则没有 g 时，应用 match 返回的信息比拟多。然而有 g 后，就没有要害的信息 index 了。

而 exec 办法就能解决这个问题，它能接着上一次匹配后持续匹配：

var string = "2017.06.27";
var regex2 = /\b(\d+)\b/g;
console.log(regex2.exec(string) );
console.log(regex2.lastIndex);
console.log(regex2.exec(string) );
console.log(regex2.lastIndex);
console.log(regex2.exec(string) );
console.log(regex2.lastIndex);
console.log(regex2.exec(string) );
console.log(regex2.lastIndex);
// => ["2017", "2017", index: 0, input: "2017.06.27"]
// => 4
// => ["06", "06", index: 5, input: "2017.06.27"]
// => 7
// => ["27", "27", index: 8, input: "2017.06.27"]
// => 10
// => null
// => 0

其中正则实例 lastIndex 属性，示意下一次匹配开始的地位。

比方第一次匹配了“2017”，开始下标是 0，共 4 个字符，因而这次匹配完结的地位是 3，下一次开始匹配的地位是 4。

从上述代码看出，在应用 exec 时，常常须要配合应用 while 循环：

var string = "2017.06.27";
var regex2 = /\b(\d+)\b/g;
var result;
while (result = regex2.exec(string) ) {console.log( result, regex2.lastIndex);
}
// => ["2017", "2017", index: 0, input: "2017.06.27"] 4
// => ["06", "06", index: 5, input: "2017.06.27"] 7
// => ["27", "27", index: 8, input: "2017.06.27"] 10

2.4 修饰符 g，对 exex 和 test 的影响

下面提到了正则实例的 lastIndex 属性，示意尝试匹配时，从字符串的 lastIndex 位开始去匹配。

字符串的四个办法，每次匹配时，都是从 0 开始的，即 lastIndex 属性始终不变。

而正则实例的两个办法 exec、test，当正则是全局匹配时，每一次匹配实现后，都会批改lastIndex。上面让咱们以test 为例，看看你是否会迷糊：

var regex = /a/g;
console.log(regex.test("a"), regex.lastIndex );
console.log(regex.test("aba"), regex.lastIndex );
console.log(regex.test("ababc"), regex.lastIndex );
// => true 1
// => true 3
// => false 0

留神下面代码中的第三次调用 test，因为这一次尝试匹配，开始从下标lastIndex 即 3 地位处开始查找，天然就找不到了。

如果没有g，天然都是从字符串第 0 个字符处开始尝试匹配：

var regex = /a/;
console.log(regex.test("a"), regex.lastIndex );
console.log(regex.test("aba"), regex.lastIndex );
console.log(regex.test("ababc"), regex.lastIndex );
// => true 0
// => true 0
// => true 0

2.5 test 整体匹配时须要应用 ^ 和 $

这个绝对容易了解，因为 test 是看指标字符串中是否有子串匹配正则，即有局部匹配即可。

如果，要整体匹配，正则前后须要增加结尾和结尾：

console.log(/123/.test("a123b") );
// => true
console.log(/^123$/.test("a123b") );
// => false
console.log(/^123$/.test("123") );
// => true

2.6 split 相干注意事项

split办法看起来不起眼，但要留神的中央有两个的。

第一，它能够有第二个参数，示意后果数组的最大长度：

var string = "html,css,javascript";
console.log(string.split(/,/, 2) );
// =>["html", "css"]

第二，正则应用分组时，后果数组中是蕴含分隔符的：

var string = "html,css,javascript";
console.log(string.split(/(,)/) );
// =>["html", ",", "css", ",", "javascript"]

2.7 replace 是很弱小的

《JavaScript 权威指南》认为 exec 是这 6 个 API 中最弱小的，而我始终认为 replace 才是最弱小的。因为它也能拿到该拿到的信息，而后能够假借替换之名，做些其余事件。

总体来说 replace 有两种应用模式，这是因为它的第二个参数，能够是字符串，也能够是函数。

当第二个参数是字符串时，如下的字符有非凡的含意：

$1,$2,…,$99 匹配第 1~99 个分组里捕捉的文本
$& 匹配到的子串文本
$` 匹配到的子串的右边文本
$' 匹配到的子串的左边文本
? 美元符号

例如，把 ”2,3,5″，变成 ”5=2+3″：

var result = "2,3,5".replace(/(\d+),(\d+),(\d+)/, "$3=$1+$2");
console.log(result);
// => "5=2+3"

又例如，把 ”2,3,5″，变成 ”222,333,555″:

var result = "2,3,5".replace(/(\d+)/g, "$&$&$&");
console.log(result);
// => "222,333,555"

再例如，把 ”2+3=5″，变成 ”2+3=2+3=5=5″:

var result = "2+3=5".replace(/=/, "$&$`$&$'$&");
console.log(result);
// => "2+3=2+3=5=5"

当第二个参数是函数时，咱们须要留神该回调函数的参数具体是什么：

"1234 2345 3456".replace(/(\d)\d{2}(\d)/g, function(match, $1, $2, index, input) {console.log([match, $1, $2, index, input]);
});
// => ["1234", "1", "4", 0, "1234 2345 3456"]
// => ["2345", "2", "5", 5, "1234 2345 3456"]
// => ["3456", "3", "6", 10, "1234 2345 3456"]

此时咱们能够看到 replace 拿到的信息，并不比 exec 少。

2.8 应用构造函数须要留神的问题

个别不举荐应用构造函数生成正则，而应该优先应用字面量。因为用构造函数会多写很多\。

var string = "2017-06-27 2017.06.27 2017/06/27";
var regex = /\d{4}(-|\.|\/)\d{2}\1\d{2}/g;
console.log(string.match(regex) );
// => ["2017-06-27", "2017.06.27", "2017/06/27"]

regex = new RegExp("\\d{4}(-|\\.|\\/)\\d{2}\\1\\d{2}", "g");
console.log(string.match(regex) );
// => ["2017-06-27", "2017.06.27", "2017/06/27"]

2.9 修饰符

ES5中修饰符，共 3 个：

g 全局匹配，即找到所有匹配的，单词是global

i 疏忽字母大小写，单词ingoreCase

m 多行匹配，只影响 ^ 和$，二者变成行的概念，即行结尾和行结尾。单词是multiline

当然正则对象也有相应的只读属性：

var regex = /\w/img;
console.log(regex.global);
console.log(regex.ignoreCase);
console.log(regex.multiline);
// => true
// => true
// => true

2.10 source 属性

正则实例对象属性，除了 global、ingnoreCase、multiline、lastIndex 属性之外，还有一个 source 属性。

它什么时候有用呢？

比方，在构建动静的正则表达式时，能够通过查看该属性，来确认构建出的正则到底是什么：

var className = "high";
var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
console.log(regex.source)
// => (^|\s)high(\s|$) 即字符串 "(^|\\s)high(\\s|$)"

2.11 构造函数属性

构造函数的动态属性基于所执行的最近一次正则操作而变动。除了是 $1,…,$9 之外，还有几个不太罕用的属性（有兼容性问题）：

RegExp.input` 最近一次指标字符串，简写成 `RegExp["$_"]`
`RegExp.lastMatch` 最近一次匹配的文本，简写成 `RegExp["$&"]`
`RegExp.lastParen` 最近一次捕捉的文本，简写成 `RegExp["$+"]`
`RegExp.leftContext` 指标字符串中 `lastMatch` 之前的文本，简写成 `RegExp["$`"]`
`RegExp.rightContext ` 指标字符串中 `lastMatch` 之后的文本，简写成 `RegExp["$'"]

测试代码如下：

var regex = /([abc])(\d)/g;
var string = "a1b2c3d4e5";
string.match(regex);

console.log(RegExp.input);
console.log(RegExp["$_"]);
// => "a1b2c3d4e5"

console.log(RegExp.lastMatch);
console.log(RegExp["$&"] );
// => "c3"

console.log(RegExp.lastParen);
console.log(RegExp["$+"] );
// => "3"

console.log(RegExp.leftContext);
console.log(RegExp["$`"] );
// => "a1b2"

console.log(RegExp.rightContext);
console.log(RegExp["$'"] );
// => "d4e5"

3. 实在案例

3.1 应用构造函数生成正则表达式

咱们晓得要优先应用字面量来创立正则，但有时正则表达式的主体是不确定的，此时能够应用构造函数来创立。模仿 getElementsByClassName 办法，就是很能阐明该问题的一个例子。

这里 getElementsByClassName 函数的实现思路是：

  • 比方要获取 className 为"high"的 dom 元素；
  • 首先生成一个正则：/(^|\s)high(\s|$)/；
  • 而后再用其逐个验证页面上的所有 dom 元素的类名，拿到满足匹配的元素即可。

代码如下(能够间接复制到本地查看运行成果)：

<p class="high">1111</p>
<p class="high">2222</p>
<p>3333</p>
<script>
function getElementsByClassName(className) {var elements = document.getElementsByTagName("*");
    var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
    var result = [];
    for (var i = 0; i < elements.length; i++) {var element = elements[i];
        if (regex.test(element.className)) {result.push(element)
        }
    }
    return result;
}
var highs = getElementsByClassName('high');
highs.forEach(function(item) {item.style.color = 'red';});
</script>

3.2 应用字符串保留数据

个别状况下，咱们都违心应用数组来保留数据。但我看到有的框架中，应用的却是字符串。

应用时，仍须要把字符串切分成数组。尽管不肯定用到正则，但总感觉酷酷的，这里分享如下：

var utils = {};
"Boolean|Number|String|Function|Array|Date|RegExp|Object|Error".split("|").forEach(function(item) {utils["is" + item] = function(obj) {return {}.toString.call(obj) == "[object" + item + "]";
    };
});
console.log(utils.isArray([1, 2, 3]) );
// => true

3.3 if 语句中应用正则代替 &&

比方，模仿 ready 函数，即加载结束后再执行回调（不兼容 ie 的）：

var readyRE = /complete|loaded|interactive/;

function ready(callback) {if (readyRE.test(document.readyState) && document.body) {callback()
    } 
    else {
        document.addEventListener(
            'DOMContentLoaded', 
            function () {callback()
            },
            false
        );
    }
};
ready(function() {alert("加载结束！")
});

3.4 应用弱小的 replace

因为 replace 办法比拟弱小，有时用它基本不是为了替换，只是拿其匹配到的信息来做文章。

这里以查问字符串（querystring）压缩技术为例，留神上面 replace 办法中，回调函数基本没有返回任何货色。

function compress(source) {var keys = {};
    source.replace(/([^=&]+)=([^&]*)/g, function(full, key, value) {keys[key] = (keys[key] ? keys[key] + ',' : '') + value;
    });
    var result = [];
    for (var key in keys) {result.push(key + '=' + keys[key]);
    }
    return result.join('&');
}

console.log(compress("a=1&b=2&a=3&b=4") );
// => "a=1,3&b=2,4"

3.5 综合使用

最初这里再做个简略实用的正则测试器。

具体成果如下：

代码，间接贴了，置信你能看得懂：

<section>
    <div id="err"></div>
    <input id="regex" placeholder="请输出正则表达式">
    <input id="text" placeholder="请输出测试文本">
    <button id="run"> 测试一下 </button>
    <div id="result"></div>
</section>
<style>
section{
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    height:300px;
    padding:0 200px;
}
section *{min-height:30px;}
#err {color:red;}
#result{line-height:30px;}
.info {
    background:#00c5ff;
    padding:2px;
    margin:2px;
    display:inline-block;
}
</style>
<script>
(function() {
    // 获取相应 dom 元素
    var regexInput = document.getElementById("regex");
    var textInput = document.getElementById("text");
    var runBtn = document.getElementById("run");
    var errBox = document.getElementById("err");
    var resultBox = document.getElementById("result");
    
    // 绑定点击事件
    runBtn.onclick = function() {
        // 革除谬误和后果
        errBox.innerHTML = "";
        resultBox.innerHTML = "";
        
        // 获取正则和文本
        var text = textInput.value;
        var regex = regexInput.value;
        
        if (regex == "") {errBox.innerHTML = "请输出正则表达式";} else if (text == "") {errBox.innerHTML = "请输出测试文本";} else {regex = createRegex(regex);
            if (!regex) return;
            var result, results = [];
            
            // 没有修饰符 g 的话，会死循环
            if (regex.global) {while(result = regex.exec(text)) {results.push(result);
                }
            } else {results.push(regex.exec(text));
            }
                        
            if (results[0] == null) {
                resultBox.innerHTML = "匹配到 0 个后果";
                return;
            }
            
            // 倒序是有必要的
            for (var i = results.length - 1; i >= 0; i--) {var result = results[i];
                var match = result[0];
                var prefix = text.substr(0, result.index);
                var suffix = text.substr(result.index + match.length);
                text = prefix 
                    + '<span class="info">'
                    + match
                    + '</span>'
                    + suffix;
            }
            resultBox.innerHTML = "匹配到" + results.length + "个后果:<br>" + text;
        }
    };
    
    // 生成正则表达式，外围函数
    function createRegex(regex) {
        try {if (regex[0] == "/") {regex = regex.split("/");
                regex.shift();
                var flags = regex.pop();
                regex = regex.join("/");
                regex = new RegExp(regex, flags);
            } else {regex = new RegExp(regex, "g");
            }
            return regex;
        } catch(e) {
            errBox.innerHTML = "有效的正则表达式";
            return false;
        }
    }
})();
</script> 复制代码

第七章小结

相干 API 的留神点，本章基本上算是一网打尽了。

至于文中的例子，都是点睛之笔，没有具体解析。如有了解不透的，倡议本人敲一敲。

后记

其实本文首发于：正则表达式系列总结 – 知乎专栏

原文是一个系列。始终等到老姚成为掘金的专栏作者，通过认真思考，在掘金平台没有采纳系列模式，而是合成为了一篇文章。这样既便于读者浏览，最起码能零打碎敲地浏览。同时也便于作者对立回复留言。

文章要完结了，最初还要有几点阐明。

1. 须要留神的中央

本文次要探讨的是 JavaScript 的正则表达式，更准确地说是 ES5 的正则表达式。

JavaScript 的正则表达式引擎是传统型 NFA 的，因而本系列的探讨是适宜任何一门正则引擎是传统型 NFA 的编程语言。当然，市面上大部分语言的正则引擎都是这种的。而 JS 里正则波及到的所有语法要点，是这种引擎反对的外围子集。也就是说，要学正则表达式，无妨以 JS 正则为出发点。

2. 参考资料

当然本文不是无本之末。次要参考的是几本书籍。

以下书籍中外围章节都认真浏览过，甚至浏览多遍。

《JavaScript 权威指南》，看完本系列，再去看书中的第 10 章，你就晓得了什么叫字字珠玑。

《精通正则表达式》，权威且比拟芜杂，我浏览的第一本正则表达式书籍。

《正则表达式必知必会》，这是我看的第二本正则，看完后，确定本人算是入门了。

《正则指引》，《精通正则表达式》的译者写的，绝对清晰。

《正则表达式入门》，我看的是英文版的，对于曾经入门的我，根本没多少播种了。

《正则表达式经典实例》，除了第 3 章，比拟杂外，也有播种，以实例为主导的一本书。

《JavaScript Regular Expressions》，为数不多转讲 JS 正则的。页数不多，也有播种。

《高性能 JavaScript》第 5 章，我看的是英文版的。第 5 章，讲了回溯和优化。

《JavaScript 忍者秘籍》第 7 章，大略讲了一下正则的用法，几个例子还不错。

《JavaScript 高级程序设计》第 5.4 节，比拟简短的介绍。

应用的工具：

**Regulex，一款可视化工具
ProcessOn – 收费在线作图，实时合作
LICEcap – 灵便好用，GIF 屏幕录制工具

**

3. 集体感悟

要多写文章的

首先，我非常感激读者。读者能在信息泛滥的网络里，点击我的文章进来瞧两眼，这都是对其注意力的生产。更何况，还有很多童鞋都认真读了，甚至给我挑毛病，这都是对我的帮忙。不知有多少童鞋是从头读到这里的，无妨留言打卡，让我晓得你是用心的读者，而并非简简单单地珍藏一下，而后就再也未曾看过了。

说到要写文章，其目标是以教为学。看似为了教，其实是为了学 。 能教会他人才算本人真正学会了，最起码造成了文字，通过了本人的语言逻辑这一关。如果还能有人指出你的谬误认知，那样播种就更大了，何乐而不为呢？

很多书中都提到相似的观点，例如《晓得做到》《好好学习》《与工夫做敌人》《暗工夫》等。

以教为学的其余伎俩

当然，以教为学的伎俩还有很多，比方 翻译一本书。我私下曾经翻译了好几本（窃喜 ^_^）。

能够从薄点的书籍开始，比方 100 页左右的。基本上应用有道就能够了，也不必要求本人一词一句的翻译，能用本人的话说明确就行了。说到这里，不得不提起，咱们的阮一峰大神，在我看来，他就是胜利地利用这种模式的。看完外文的文章，了解明确了，用本人的话说一说，再造成本人的简练格调。

恐怕你可能说本人的英文程度不够，没信念尝试。置信我，相熟了罕用词汇（比方 literal 翻译成字面量）后，配合有道翻译，薄点的书，一天翻译一章是没问题的。当然前提是你懂相干畛域，不然是没方法意译的。

最初一种以教为学的伎俩是，写一本书。写文章是根底，文章多了，天然而言就能够写成一本书。当然，写书强调的是整体架构，所以文章最好成体系。

你看看那些国内专业书籍的作者，个别都当时翻译过几本书的。最起码在前端畛域，我就看到了好几位是这么干的。翻译明确了，学会了，用本人的角度去弄出一本书还是绝对很容易的。

尽管，自己并未曾写过书，但上述办法，我始终置信是可行的。

最初，咱们该想到，陆游诗人对前端界做出的最大奉献是：

纸上得来终觉浅，绝知此事要躬行。

本文完。

能够珍藏 PDF 版本：《JavaScript 正则迷你书》

正文完
正则表达式
发表至： 正则表达式
2021-11-19
 0
关于正则表达式:正则表达式正向匹配与反向匹配
关于正则表达式:在线正则表达式可视化测试工具
关于正则表达式:初识正则表达式
关于正则表达式:正则学习

站内搜索

-「」