文章首发于[sau交流学习社区](https://www.mwcxs.top/page/585.html)
一、前言
正则表达式是匹配模式，要么匹配字符，要么匹配位置。
正则里面的元字符太多了，没有系统性，可以分为：
（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'之外的任何字符。
这个时候就需要使用排除字符组（反义字符组），比如[^abc]，表示的是一个除'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") ); //falseconsole.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][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可视化形式：
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"