正则表达式学习（一）-- 字符匹配

文章首发于[sau交流学习社区](https://www.mwcxs.top/page/585.html)

1、前言

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

正则里面的元字符太多了，没有系统性，能够分为：

（1）字符匹配攻略

（2）位置匹配攻略

 

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常见的简写形式

有了字符组的概念后，一些常见的符号咱们就能够理解了，由于都是系统自带的简写形式。

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

 

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)，其中 p一、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"