【JavaScript系列】javascript正则表达式学习(一)--字符匹配

159 阅读7分钟

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

image

测试一下:

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/

image

测试一下

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

有了字符组的概念后,一些常见的符号我们就可以理解了,因为都是系统自带的简写形式。

image

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

1.3量词

量词也称为重复,掌握{m,n}的准确含义,只需要记住一些简写形式。

1.3.1简写形式

image

正则RegExp:/a{1,2}b{3,}c{4}d?e+f*/

image

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个就够的时候,就不再往下尝试了。

惰性实现:通过在量词后面加个问号就能实现惰性匹配

image

记忆方式:量词后面加个问号,问一问你知足了吗,你很贪婪吗?

RegExp:/a{1,2}?b{3,}?c{4}?d??e+?f*?/

image

1.4多选分支

一个模式可以实现横向和纵向模糊匹配,而多选分支可以支持多个子模式任选其一。

具体形式::(p1|p2|p3),其中 p1、p2 和 p3 是子模式,用 |(管道符)分隔,表示其中任何之一。

比如:要匹配字符串good和nice,可以使用/good|nice/。

可视化形式如下:

RegExp:/good|nice/

image

测试如下

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

image

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])$/

image

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])$/

image

注意:其实并不是很准确的,因为要考虑的还有是否是闰年,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

image

因为 . 是通配符,本身就会匹配双引号的,而量词 * 又是贪婪的,当遇到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"