共计 4527 个字符，预计需要花费 12 分钟才能阅读完成。
文章首发于 sau 交流学习社区
一、前言
正则表达式是匹配模式，要么匹配字符，要么匹配位置。
正则里面的元字符太多了，没有系统性，可以分为：
（1）字符匹配攻略
（2）位置匹配攻略
二、字符匹配
包括：两种模糊匹配，字符数组，量词，分支结构。
1.1 两种模糊匹配
正则精确匹配乜有意义的，比如正则 /saucxs/，只能匹配字符串中的 ”saucxs” 这个子串。
var regex = /saucxs/;
console.log(regex.test(‘saucxs’)); //true
console.log(regex.test(‘123saucxs4560′)); //true
正则很强大的地方就是，实现模糊匹配。
模糊匹配分为：（1）横向模糊匹配；（2）纵向模糊匹配。
1.1.1 横向模糊匹配
横向模糊匹配指的是：一个正则可匹配的字符串的长度不是固定的，可以是很多种情况。
实现方式：使用量词。比如：{m,n}表示的连续出现最少 m 次，最多 n 次。
比如正则：/ab{2,5}c/ 表示匹配这样一个字符串：第一个字符是‘a’，接下来第 2 个到第 5 个字符是‘b’，最后是字符‘c’。
正则可视化形式如下：
RegExp：/ab{2,5}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”]
正则里的 g 是正则的一个修饰符，表示全局匹配，即按照顺序找到满足匹配的所有子串。
1.1.2 纵向模糊匹配
纵向模糊匹配的是，一个正则匹配的字符串，具体到某一个字符时。
实现的方式：使用字符组。比如[abc]，表示该字符可以是‘a’，‘b’，‘c’中的任何一个。
比如正则 /a[123]b/ 可以匹配到如下三种字符串 ’a1b’，’a2b’，’a3b’。
可视化过程：
RegExp：/a[123]b/
测试一下
var regex = /a[123]b/g;
var string = “a0b a1b a2b a3b a4b”;
console.log(string.match(regex) ); // [“a1b”, “a2b”, “a3b”]
横向和纵向匹配，能解决很多的正则匹配问题
1.2 字符组
字符组只是其中一个字符
比如[abc]，表示匹配一个字符，它可以是 ’a’，’b’，’c’ 之一。
1.2.1 范围表示法
如果字符组中字符特别多，怎么处理？可以使用范围表示法。
比如[123456abcdefGHIJKLM]，可以写成[1-6a-fG-M]。用连字符 – 来省略和简写。
如果要匹配 ’a’，’-‘,‘z’这三个字符中任意一个字符，怎么处理？
答：这个时候不能写成 [a-z]，因为这个是表示的是小写字母中的任何一个字符。可以写成[-az] 或[az-]或[a-z]。就是说要不放在开头，要不放在结尾，要么转义。
个人觉得用 [a-z] 最好，使用将连字符 – 转义成普通字符。
1.2.2 排除字符组
纵向模糊匹配，还有一种情形：某一个字符可以是除了 ’a’，’b’，’c’ 之外的任何字符。
这个时候就需要使用排除字符组（反义字符组），比如 1，表示的是一个除 ’a’，’b’，’c’ 之外的任意一个字符。
字符组的第一位放 ^（脱字符），表示求反的意思。
1.2.3 常见的简写形式
有了字符组的概念后，一些常见的符号我们就可以理解了，因为都是系统自带的简写形式。
如果要匹配任意字符怎么办？可以使用 [dD]、[wW]、[sS] 和 [^] 中任何的一个。
1.3 量词
量词也称为重复，掌握 {m,n} 的准确含义，只需要记住一些简写形式。
1.3.1 简写形式
正则 RegExp：/a{1,2}b{3,}c{4}d?e+f*/
1.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 位的连续数字。
但是他是贪婪的，会尽可能多的匹配。
还有一种就是懒惰的匹配（尽可能少的匹配）：
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 个就够的时候，就不再往下尝试了。
惰性实现：通过在量词后面加个问号就能实现惰性匹配
记忆方式：量词后面加个问号，问一问你知足了吗，你很贪婪吗？
RegExp：/a{1,2}?b{3,}?c{4}?d??e+?f*?/
1.4 多选分支
一个模式可以实现横向和纵向模糊匹配，而多选分支可以支持多个子模式任选其一。
具体形式：：(p1|p2|p3)，其中 p1、p2 和 p3 是子模式，用 |（管道符）分隔，表示其中任何之一。
比如：要匹配字符串 good 和 nice，可以使用 /good|nice/。
可视化形式如下：
RegExp：/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”]
也就是说，分支结构也是惰性的，即当前面的匹配上了，后面的就不再尝试了。
1.5 案例分析
匹配字符，无非就是字符组，量词，分支结构的组合使用。
多练习一下：
1.5.1 匹配 16 进制的颜色值
要求匹配：
#ffbbad
#Fc01DF
#FFF
#ffE
分析：
表示一个 16 进制字符，可以使用字符组[0-99a-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”]
可视化形式：
REgExp：/#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g
1.5.2 匹配时间
以 24 小时为例
要求匹配：
23:59
02:07
分析：
一共四位数字，第一位数字可以为[0-2]；
当第 1 位为 ’2’ 时，第 2 位可以是为[0-3]，其他情况，第 2 位为[0-9]；
第三位数字为[0-5]，第四位为[0-9]。
正则如下：
var regex = /^([01][0-9]|[2][0-3]):[0-5][0-9]$/;
console.log(regex.test(“23:59”) ); //true
console.log(regex.test(“02:07”) ); //true
console.log(regex.test(“24:00”) ); //false
console.log(regex.test(“24:01”) ); //false
注意：正则中使用了 ^ 和 $，分别表示字符串开头和结尾。
如果要求可以匹配 ’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”) ); // true
console.log(regex.test(“02:07”) ); //true
console.log(regex.test(“7:9″) ); //true
可视化形式：
RegExp：/^(0?[0-9]|1[0-9]|[2][0-3]):(0?[0-9]|[1-5][0-9])$/
1.5.3 匹配日期
比如要求 yyyy-mm-dd 格式
要求匹配：
2017-06-10 分析：
年，4 位数字即可，可以用[0-9]{4}；
月，共 12 个月，分为两种：”01″,”02″,…,”09″ 和 ”10″,”11”,”12″，可以用(0[1-9]|1[0-2]);
日，最大 31 天，可以用(0[1-9]|12|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
可视化形式：
RegExp：/^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/
注意：其实并不是很准确的，因为要考虑的还有是否是闰年，2 月份特殊情况等情况。
1.5.4 匹配 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”
可视化形式：
RegExp：/id=”.*”/g
因为 . 是通配符，本身就会匹配双引号的，而量词 * 又是贪婪的，当遇到 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”
abc ↩
