正则表达式

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

字符匹配

两种模糊匹配

横向模糊匹配

/ab{2,5}c/匹配：第一个字符是a，接下来是2到5个字符b，最后是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' ]

纵向模糊匹配

纵向模糊，一个正则匹配的字符串，具体到某一位字符时，它可以不是某个确定的字符，可以有多种可能

var regex = /a[123]b/g;
var string = "a0b a1b a2b a3b a4b";
console.log(string.match(regex));
//[ 'a1b', 'a2b', 'a3b' ]

字符组

虽然叫字符组（字符类），但只是匹配其中一个字符。[abc]表示匹配一个字符，它可以是a、b、c。

范围表示法

字符组里的字符比较多，可以使用范围表示法。

排除字符组

常见的简写形式

匹配任意字符，可以使用[\d\D]、[\w\W]、[\s\S]、[^]中任意一个。

量词

量词也称重复。{m,n}

简写形式

贪婪匹配和惰性匹配

var regex = /\d{2,5}/g;
var string = "123 1234 12345 123456";
console.log(string.match(regex));
//[ '123', '1234', '12345', '12345' ]

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}?/g 表示2到5次都行，当2个就够的时候，不再往下匹配。

多选分支

var regex = /good|nice/g;
var string = "good idea, nice try.";
console.log(string.match(regex));
//[ 'good', 'nice' ]

var regex = /good|goodbye/g;
var string = "goodbye";
console.log( string.match(regex) ); 
// => ["good"]

var regex = /goodbye|good/g;
var string = "goodbye";
console.log( string.match(regex) ); 
// => ["goodbye"]

以上得到的结果各不相同，分支结构也是惰性的，即当前面的匹配好了，后面的不再尝试。

案例分析

匹配16进制颜色值

要求匹配

#ffbbad
#Fc01DF
#FFF
#ffE

分析

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' ]

匹配时间

要求匹配

23:59
02:07

分析

var regex = /^([01][0-9]|[2][0-3]):[0-5][0-9]$/g;

要求匹配7:9，时分前面的0可以省略。

var regex = /^(0?[0-9]|1[0-9]|2[0-3]):(0?[0-9]|[1-5][0-9])$/g;
var string = "7:9";
console.log(regex.test(string));
//true

匹配日期

要求匹配 2017-06-10

分析

var regex = /^[0-9]{4}-(0[0-9]|1[0-2])-(0[0-9]|[12][0-9]|3[01])$/g;
console.log(regex.test("2017-10-20"));
//true

window操作系统文件路径

F:\study\javascript\regex\regular expression.pdf
F:\study\javascript\regex\
F:\study\javascript
F:\

分析

var regex = /^[a-zA-Z]:\\([^\\:*<>|"?\r\n/]+\\)*([^\\:*<>|"?\r\n/]+)?$/g;

匹配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"

位置匹配

在ES5中共有6个锚字符

^$\b\B(?=p)(?!p)

$和^

把字符串的开头和结尾用#替换

var result = "hello".replace(/^|$/g, '#');
console.log(result);
//#hello#

多行匹配模式

var result = "I\nlove\njavascript".replace(/^|$/gm, '#');
console.log(result);
//#I#
// #love#
// #javascript#

\b和\B

\b是单词边界，具体就是\w和\W之间的位置，也包括\w和\W之间的位置，也包括\w和$之间的位置

var result = "[JS] Lesson_01.mp4".replace(/\b/g, '#');
console.log(result);
//[#JS#] #Lesson_01#.#mp4#

(?=p)和(?!p)

var result = "hello".replace(/(?=l)/g, '#');
console.log(result);
//he#l#lo

(?!p)是(?=p)的反向操作

var result = "hello".replace(/(?!l)/g, '#');
console.log(result);
//#h#ell#o#

分别是正向先行断言和反向先行断言，具体是(?<=p)和(?<!p)

位置的特性

var result = /^^hello$$$/.test("hello");
console.log(result); 
// => true

案例

不匹配任何东西的正则

/.^/

数字的千位分隔符表示法

把12345678，变成12,345,678

使用(?=\d{3}$)

var result = "12345678".replace(/(?=\d{3}$)/g, ',');
console.log(result);
//12345,678

逗号出现的位置，要求后面3个数字一组，也就是\d{3}至少出现一次

var result = "12345678".replace(/(?=(\d{3})+$)/g, ',');
console.log(result);
//12,345,678

匹配其他案例

var string1 = "12345678";
var string2 = "123456789";
var reg = /(?!^)(?=(\d{3})+$)/g;
var result1 = string1.replace(reg, ',');
console.log(result1);
//12,345,678
var result2 = string2.replace(reg, ',');
console.log(result2);
//123,456,789

验证密码问题

简化

不考虑“但至少包括2种字符”这个条件

var reg = /^[0-9A-Za-z]{6,12}$/;

判断是否含有某一种字符

如果要求必须包含数字，可以使用(?=.*[0-9])

var reg = /(?=.*[0-9])^[0-9A-Za-z]{6,12}$/;

同时包含具有两种字符

同时包含数字和小写字母，可以用(?=.*[0-9](?=.*[a-z]))

var reg = /(?=.*[0-9])(?=.*[a-z])^(0-9A-Za-z){6,12}$/;

var reg = /((?=.*[0-9])(?=.*[a-z])|(?=.*[0-9])(?=.*[A-Z])|(?=.*[a-z])(?=.*[A-Z]))^[0-9A-Za-z]{6,12}$/;

括号的作用

分组和分支结构

分组

var regex = /(ab)+/g;
var string = "ababa abbb ababab";
console.log(string.match(regex));
//[ 'abab', 'ab', 'ababab' ]

分支结构

I love JavaScript
I love Regular Expression

var regex = /^I love (JavaScript|Regular Expression)$/;
console.log( regex.test("I love JavaScript") );
console.log( regex.test("I love Regular Expression") );
// => true
// => true

引用分组

匹配日期yyyy-mm-dd

提取数据

提取出年、月、日

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2018-06-18";
console.log(string.match(regex));
//[ '2018-06-18', '2018', '06', '18', index: 0, input: '2018-06-18' ]

match返回的一个数组，第一个元素是整体匹配结果，然后是各个分组（括号）匹配的内容，然后是匹配下标，最后是输入的文本。（正则是否有修饰符g，match返回的数组格式是不一样）

可以使用构造函数的全局属性$1至$9来获取

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";

regex.test(string); // 正则操作即可，例如
//regex.exec(string);
//string.match(regex);

console.log(RegExp.$1); // "2017"
console.log(RegExp.$2); // "06"
console.log(RegExp.$3); // "12"

替换

把yyyy-mm-dd格式，替换成mm/dd/yyyy

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
var result = string.replace(regex, "$2/$3/$1");
console.log(result); 
// => "06/12/2017"

其中replace中第二个参数用$1、$2、$3指代相应的分组。等价于var regex=/(\d{4})-(\d{2})-(\d{2})/

反向引用

写一个正则支持匹配以下三种格式：

2016-06-12
2016-06-12
2016.06.12

var regex = /\d{4}(-|\/|\.)\d{2}\1\d{2}/;
var string1 = "2017-06-12";
var string2 = "2017/06/12";
var string3 = "2017.06.12";
var string4 = "2016-06/12";
console.log( regex.test(string1) ); // true
console.log( regex.test(string2) ); // true
console.log( regex.test(string3) ); // true
console.log( regex.test(string4) ); // false

括号嵌套

以左括号（开括号）为准

var regex = /^((\d)(\d(\d)))\1\2\3\4$/;
var string = "1231231233";
console.log( regex.test(string) ); // true
console.log( RegExp.$1 ); // 123
console.log( RegExp.$2 ); // 1
console.log( RegExp.$3 ); // 23
console.log( RegExp.$4 ); // 3

正则匹配模式

引用不存在的分组

反向引用，引用前面的分组，在正则里引用了不存在的分组，正则不会报错，只是匹配反向引用的字符本身

非捕获分组

var regex = /(?:ab)+/g;
var string = "ababa abbb ababab";
console.log(string.match(regex));
//[ 'abab', 'ab', 'ababab' ]

案例

字符串trim方法模拟

trim方法是去掉字符串的开头和结尾的空白符

function trim(str) {
    return str.replace(/^\s+|\s+$/g, '')
}

function trim(str) {
    return str.replace(/^\s*(.*?)\s*$/g, "$1");
}

这里使用了惰性匹配*?，不然也会匹配最后一个空格之前的所有空格

将每个单词的首字母转换成大写

function titleize(str) {
    return str.toLowerCase().replace(/(?:^|\s)\w/g, function (c) {
        return c.toUpperCase();
    })
}
console.log(titleize('my name is epeli'));
//My Name Is Epeli

思路是找到每个单词的首字母，这里不适用非捕获匹配也是可以的

驼峰化

function camelize(str) {
    return str.replace(/[-_\s]+(.)?/g, function (match, c) {
        return c ? c.toUpperCase() : '';
    })
}
console.log(camelize('-moz-transform'));
//MozTransform

其中分组(.)表示首字母。单词的界定是，前面的字符可以是多个连字符、下划线以及空白符。

正则后面的？的目的，是为了应对str尾部的字符可能不是单词字符。

中划线化

驼峰化的逆过程

function dasherize(str) {
    return str.replace(/([A-Z])/g,'-$1').replace(/[-_\s]+/g,'-').toLowerCase();
}
console.log(dasherize('MozTransform'));
//-moz-transform

html转义和反转义

匹配成对标签

要求匹配

<title>regular expression</title>
<p>laoyao bye bye</p>

不匹配

<title>wrong!</p>

要求匹配成对标签，需要使用反向引用

var regex = /<([^>]+)>[\d\D]*<\/\1>/;
var string1 = "<title>regular expression</title>";
var string2 = "<p>laoyao bye bye</p>";
var string3 = "<title>wrong!</p>";
console.log(regex.test(string1)); // true
console.log(regex.test(string2)); // true
console.log(regex.test(string3)); // false

正则表达式回溯法

没有回溯的匹配

当目标字符串是abbbc时，就没有所谓的“回溯”。

有回溯的匹配

如果目标字符串是abbc，中间就有回溯

常见的回溯形式

正则表达式产生回溯的地方

贪婪量词

var string = "12345";
var regex = /(\d{1,3})(\d{1,3})/;
console.log(string.match(regex));
//[ '12345', '123', '45', index: 0, input: '12345' ]

前面的\d{1,3}匹配的是123，后面的\d{1,3}匹配的是45

惰性量词

惰性量词就是在贪婪量词后面加个问好。表示尽可能少的匹配。

var string = "12345";
var regex = /(\d{1,3}?)(\d{1,3})/;
console.log( string.match(regex) );
// => ["1234", "1", "234", index: 0, input: "12345"]

分支结构

分支也是惰性的，比如/can|candy/，去匹配字符串candy，得到的结果是can，因为分支会一个一个尝试，如果前面的满足，后面就不会再试验。
分支结构，可能前面的子模式会形成了局部匹配，如果接下来表达式整体不匹配，仍会继续尝试剩下的分支。

正则表达式的拆分

结构和操作符

在正则表达式中，操作符都体现在结构中，即由特殊字符和匹配字符所代表的一个特殊整体。

JS正则表达式中，都有哪些结构？

具体含义

其中涉及到的操作符有

操作符的优先级从上至下，由高到低

/ab?(c|de*)+|fg/

注意要点

匹配字符串整体问题

量词连缀问题

每个字符为a、b、c任选其一
字符串的长度是3的倍数

元字符转义问题

当匹配上面的字符本身时，可以一律转义：

var string = "^$.*+?|\\/[]{}=!:-,";
var regex = /\^\$\.\*\+\?\|\\\/\[\]\{\}\=\!\:\-\,/;
console.log(regex.test(string));
// => true

字符组中的元字符

跟字符组相关的元字符有[]`、^、-，需要在会引起歧义的地方进行转义。例如开头的^`必须转义，不然会把整个字符组，看成反义字符组。

var string = "^$.*+?|\\/[]{}=!:-,";
var regex = /[\^$.*+?|\\/\[\]{}=!:\-,]/g;
console.log( string.match(regex) );

案例分析

身份证

/^(\d{15}|\d{17}[\dxX])$/

因为|的优先级最低，所以正则分成了两部分\d{15}和\d{17}[\dxX]

IPV4地址

(0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])(0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])

它是一个多选结构，分成5部分

正则表达式编程

四种操作

验证

判断一个字符串中是否有数字

使用search

var regex = /\d/;
var string = "abc123";
console.log(!!~string.search(regex));
//true

使用test

var regex = /\d/;
var string = "abc123";
console.log( regex.test(string) );
// => true

使用match

var regex = /\d/;
var string = "abc123";
console.log( !!string.match(regex) );
// => true

使用exec

var regex = /\d/;
var string = "abc123";
console.log( !!regex.exec(string) );
// => true

其中，最常用的是test

切分

var regex = /,/;
var string = "html,css,javascript";
console.log(string.split(regex));
//[ 'html', 'css', 'javascript' ]

日期格式

2018/06/20
2018.06.20
2018-06-20

可以使用split切出年月日

var regex = /\D/;
console.log("2018/06/20".split(regex));
console.log("2018.06.20".split(regex));
console.log("2018-06-20".split(regex));
// [ '2018', '06', '20' ]
// [ '2018', '06', '20' ]
// [ '2018', '06', '20' ]

提取

match

var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2018-06-20";
console.log(string.match(regex));
//[ '2018-06-20', '2018', '06', '20', index: 0, input: '2018-06-20' ]

exec

var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2018-06-20";
console.log(regex.exec(string));
//[ '2018-06-20', '2018', '06', '20', index: 0, input: '2018-06-20' ]

test

var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2018-06-20";
regex.test(string);
console.log(RegExp.$1, RegExp.$2, RegExp.$3);
//2018 06 20

search

var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2018-06-20";
string.search(regex);
console.log(RegExp.$1, RegExp.$2, RegExp.$3);
//2018 06 20

replace

var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2018-06-20";
var date = [];
string.replace(regex, function (match, year, month, day) {
    date.push(year, month, day);
});
console.log(date);
//[ '2018', '06', '20' ]

其中最常用的是match

替换

把日期格式，从yyyy-mm-dd替换成yyyy/mm/dd：

var string = "2018-06-20";
var today = new Date(string.replace(/-/g, "/"));
console.log(today);
//2018-06-19T16:00:00.000Z

用于正则操作的方法，共有6个，字符串实例4个，正则实例2个

search和match的参数问题

var string = "2018.06.20";

console.log(string.search("."));//0
//需要修改成下列形式之一
console.log(string.search("\\."));//4
console.log(string.search(/\./));//4

console.log(string.match("."));
//[ '2', index: 0, input: '2018.06.20' ]
//需要修改成下列形式之一
console.log(string.match("\\."));
//[ '.', index: 4, input: '2018.06.20' ]
console.log(string.match(/\./));
//[ '.', index: 4, input: '2018.06.20' ]

console.log(string.split("."));
//[ '2018', '06', '20' ]

console.log(string.replace(".", "/"));
//2018/06.20

match返回结果的格式问题

match返回结果的格式，跟正则对象是否有修饰符g有关

var string = "2018.06.20";
var regex1=/\b(\d+)\b/;
var regex2=/\b(\d+)\b/g;
console.log(string.match(regex1));
//[ '2018', '2018', index: 0, input: '2018.06.20' ]
console.log(string.match(regex2));
//[ '2018', '06', '20' ]

exec比match更强大

当正则没有g时，使用match返回的信息比较多。但是有g后，就没有关键信息index
而exec方法就能解决这个问题，它能接着上一次匹配后继续匹配

var string = "2018.06.20";
var regex = /\b(\d+)\b/g;
console.log(regex.exec(string));
//[ '2018', '2018', index: 0, input: '2018.06.20' ]
console.log(regex.lastIndex);//4
console.log(regex.exec(string));
// [ '06', '06', index: 5, input: '2018.06.20' ]
console.log(regex.lastIndex);//7
console.log(regex.exec(string));
//[ '20', '20', index: 8, input: '2018.06.20' ]
console.log(regex.lastIndex);//10
console.log(regex.exec(string));//null
console.log(regex.lastIndex);//0

test整体匹配时需要使用^和$

test是看目标字符串中是否有子串匹配正则，即有部分匹配即可。

console.log( /123/.test("a123b") );
// => true
console.log( /^123$/.test("a123b") );
// => false
console.log( /^123$/.test("123") );
// => true

split相关注意事项

  1. 第一，它可以有第二个参数，表示结果数组的最大长度
var string = "html,css,javascript";
console.log( string.split(/,/, 2) );
// =>["html", "css"]
  1. 第二，正则使用分组时，结果数组中是包含分隔符的
var string = "html,css,javascript";
console.log( string.split(/(,)/) );
// =>["html", ",", "css", ",", "javascript"]

replace是很强大的

replace有两种使用形式，它的第二个参数，可以是字符串，也可以是函数。

当第二个参数是字符串时，如下的字符有特殊的含义：

例如，把”2,3,5“，变成”5=2+3“：

var result = "2,3,5".replace(/(\d+),(\d+),(\d+)/, "$3=$1+$2");
console.log(result);
// => "5=2+3"

当第二个参数是函数时，该回调函数的参数具体：

"1234 2345 3456".replace(/(\d)\d{2}(\d)/g, function(match, $1, $2, index, input) {
    console.log([match, $1, $2, index, input]);
});
// => ["1234", "1", "4", 0, "1234 2345 3456"]
// => ["2345", "2", "5", 5, "1234 2345 3456"]
// => ["3456", "3", "6", 10, "1234 2345 3456"]

修饰符