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

文章首发于[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"