一文搞定javascript中正则表达式

1.1 模糊匹配

模糊匹配，分为两个方向上的匹配： 横向匹配和纵向匹配

1.1.1 横向正则匹配

横向正则匹配，指的是字符串长度不是固定的，可以是多种情况。
比如正则/ab{2,5}c/: 表示匹配字符串，第一个字符为"a"， 接下来2-5字符为"b"，最后字符为"c"。

var regex = /ab{2,5}c/;		//注意：{2,5}直接不能用空格{2， 5}会报错
var string = "abc abbc abbbc abbbc abbbbbc abbbbbc";
console.log(string.match(regex));
// ["abbc", "abbbc", "abbbc", "abbbbbc", "abbbbbc"]

1.1.2 纵向模糊匹配

纵向模糊匹配，具体到某一位字符时，他可以不是某个确定的字符，可以有多种可能；
比如/a[123]b/可以匹配如下三种字符串： "a1b", "a2b","a3b"

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"之一。

字符组	范围表示	含义
\d	[0-9]	表示一位数字
\D	[^0-9]	表示除数字外的任意一位数字
\w	[0-9a-zA-Z_]	表示数字、大小写字母和下划线
\W	[^0-9a-zA-Z_]	非单词字符
\s	[ \t\v\n\r\f]	空白符，包括空格，水平/垂直制表符、换行、回车、分页
\S	[^ \t\v\n\r\f]	非空白符
.	[^\n\r\u2028\u2029]	通配符，表示除换行、回车、行分割符和段分割符之外任意字符

1.3 量词

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

量词	等价	含义
{m,}	–	表示至少出现m次
{m}	{m,m}	出现m次
？	{0,1}	出现或者不出现，可有可无
+	{1,}	至少出现一次
*	{0,}	出现任意次

1. 惰性量词： 已最少匹配为主

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

2. 贪婪量词：已最多匹配为主

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

惰性量词	贪婪量词
{m,n}?	{m,n}
{m,}?	{m,}
??	?
+?	+
*?	*

1.4 多选分支

具体形式如下：(p1|p2|p3)，其中 p1、p2 和 p3 是子模式，用 |（管道符）分隔，表示其中任何之一。
例如要匹配字符串 “good” 和 “nice” 可以使用 /good|nice/

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

分支结构是惰性的，前面匹配到了后面的就不会再去匹配

1.5 实例

1. 匹配16进制颜色值
   //颜色由字符组[0-9a-fA-F]组成，字符出现3或者6次

var string = "#ffbbad #Fc01DF #FFF #ffE";
var regex = /#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3}/g;	//注意分支结构为惰性匹配，所以必须6次在前，三次在后
console.log(string.match(regex));
//["#ffbbad", "#Fc01DF", "#FFF", "#ffE"]

2. 匹配时间 （23:59 02:07）

var string = "23:59 02:07 18:10";
var regex1 = /[01]+\d+:[0-5]+[0-9]|2\d+:[0-5]+[0-9]/g;
var regex2 = /([01][0-9]|[2][0-3]):[0-5][0-9]/g;
console.log(string.match(regex1))

3. 匹配日期（2017-06-10）

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"));

2 位置匹配

锚	含义
^	匹配开头，在多行匹配中匹配行开头
$	匹配结尾，在多行匹配中匹配行结尾
\b	单词边界，包括\w和\W，\w和^以及\w和$之间的位置
\B	\b的反面，非单词边界
(?=p)	p是一个子模式，表示p前面的位置
(?!p)	(?!p) 就是 (?=p) 的反面

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

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

2.1 位置匹配实例

1. 数字的千位分割符表示法（将"12345678"变成"12,345,678"）

//第一步： 弄出最后一个逗号
var result1 = "12345678".replace(/(?=(\d{3})$)/g, ',');   // => "12345,678"
//第二步: 弄出所有的逗号，也就是\d{3}至少出现一次
var result2 = "12345678".replace(/(?=(\d{3})+$)/g, ',');   // => "12,345,678"
//第三步：匹配边界，解决",123,456,789"问题
var result3 = "123456789".replace(/(?!^)(?=(\d{3})+$)/g, ',');   // => "123,345,678"
//第四步： 支持其他形式 "12345678 123456789"
var regex = /(?!\b)(?=(\d{3})+\b)/g;

2. 验证密码问题
   密码长度 6-12 位，由数字、小写字符和大写字母组成，但必须至少包括 2 种字符

//判断是否包含某一种字符,例如数字 (?=.*[0-9])
var regex = /(?=.*[0-9])^[0-9A-Za-z]{6,12}$/;
//可以分为以下4种情况，同时包含数字和小写字母、数字和大写字母、小写字母和大写字母、数字和小写字母和大写字母
var regex = /((?=.*[0-9])(?=.*[a-z])|(?=.*[0-9])(?=.*[A-Z])|(?=.*[a-z])(?=.*[A-Z])

3 正则表达式括号作用

1. 分组和分支结构
2. 分组引用： 数据提取，数据替换

3.1 分组和分支结构

//分组实例：
var regex = /(ab)+/g;
var string = "ababa abbb ababab";
console.log("string.match(regex)");
//["abab", "ab", "ababab"];

分支结构：（p1 | p2）

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

3.2 分组引用

1. 分组引用： 数据提取； 以日期匹配为例，假设格式为yyyy-mm-dd

var string = "2020-05-14"
var regex = /\d{4}-\d{2}-\d{2}/;	
console.log(string.match(regex));	//["2020-05-14"]
//修改为带括号形式， 提取数据
var regex1 = /(\d{4})-(\d{2})-(\d{2})/;		
console.log(string.match(regex1));	//["2020-05-14", "2020", "05", "14"]

使用构造函数的全局属性$1 至$9来提取数据：

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2020-05-14";
regex.test(string); // 正则操作即可，如//regex.exec(string);//string.match(regex);
console.log(RegExp.$1); // "2020"
console.log(RegExp.$2); // "05"
console.log(RegExp.$3); // "14"