1、正则表达式概述
ECMAScript 3 开始支持正则表达式，其语法和 Perl 语法很类似，一个完整的正则表达式结构如下：
var expression = / pattern / flags ;
其中，模式（pattern）部分可以是任何简单或复杂的正则表达式，可以包含字符类、限定符、分组、向前查找以及反向引用。
每个正则表达式都可带有一或多个标志（flags），用以标明正则表达式的行为，正则表达式支持下列 3 个标志：
g： 表示全局（global）模式，即模式将被应用于所有字符串，而非在发现第一个匹配项时立即停止；
i ： 表示不区分大小写（case-insensitive）模式，即在确定匹配项时忽略模式与字符串的大小写；
m：表示多行（multiline）模式，即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项。
如果多个标志同时使用时，则写成：gmi。
正则表达式的创建有两种方式：new RegExp(expression)和 直接字面量。
//使用直接字面量创建
var exp1 = /(^\s+)|(\s+$)/g;
//使用RegExp对象创建
var exp2 = new RegExp("(^\\s+)|(\\s+$)","g");
exp1 和exp2 是两个完全等价的正则表达式，需要注意的是，传递给 RegExp构造函数的两个参数都是字符串，不能把正则表达式字面量传递给 RegExp 构造函数。
与其他语言中的正则表达式类似，模式中使用的所有元字符都必须转义。正则表达式中的元字符包括：
( [ { \ ^ $ | ) ? * + .] }
这些元字符在正则表达式中都有一或多种特殊用途，因此如果想要匹配字符串中包含的这些字符，就必须对它们进行转义。
//匹配 .docx
var exp = /\.docx/gi ;
由于 RegExp 构造函数的模式参数是字符串，所以在某些情况下要对字符进行双重转义。所有元字符都必须双重转义，那些已经转义过的字符也是如此。
// 对 \. 再次转义
var exp = new RegExp("\\.docx","gi");
//匹配 \n
var exp1 = /\\n/g; //对\n中的\转义
var exp2 = new RegExp("\\\\n","g"); // 对 \\n 再次转义
2、() [] {} 的区别
() 的作用是提取匹配的字符串。表达式中有几个()就会得到几个相应的匹配字符串。比如 (\s+) 表示连续空格的字符串。
[]是定义匹配的字符范围。比如 [a-zA-Z0-9]表示字符文本要匹配英文字符和数字。
{}一般用来表示匹配的长度，比如 \d{3}表示匹配三个数字，\d{1,3} 表示匹配1~3个数字，\d{3,}表示匹配3个以上数字。
3、^和$
^ 匹配一个字符串的开头，比如 (^a)就是匹配以字母a开头的字符串
$匹配一个字符串的结尾,比如 (b$)就是匹配以字母b结尾的字符串
^ 还有另个一个作用就是取反，比如[^xyz] 表示匹配的字符串不包含xyz
注意问题：
如果 ^出现在[ ]中一般表示取反，而出现在其他地方则是匹配字符串的开头。
^ 和$ 配合可以有效匹配完整字符串:/d+/.test('4xpt') -> true，而 /^\d+$/.test('4xpt')->false
4、\d \s \w .
\d 匹配一个非负整数， 等价于[0-9]
\s匹配一个空白字符
\w 匹配一个英文字母或数字，等价于[0-9a-zA-Z]
. 匹配除换行符以外的任意字符，等价于[^\n]
5、* + ?
*表示匹配前面元素0次或多次，比如(\s*)就是匹配0个或多个空格
+ 表示匹配前面元素1次或多次，比如 (\d+)就是匹配由至少1个整数组成的字符串
?表示匹配前面元素0次或1次，相当于{0,1} ，比如(\w?) 就是匹配最多由1个字母或数字组成的字符串
6、$1和\1
$1-$9存放着正则表达式中最近的9个正则表达式的提取的结果，这些结果按照子匹配的出现顺序依次排列。基本语法是：RegExp.$n ，这些属性是静态的，除了replace中的第二个参数可以省略 RegExp之外，其他地方使用都要加上 RegExp 。
//使用RegExp访问
/(\d+)-(\d+)-(\d+)/.test("2016-03-26")
RegExp.$1 // 2016
RegExp.$2 // 03
RegExp.$3 // 26
//在replace中使用
"2016-03-26".replace(/(\d+)-(\d+)-(\d+)/,"$1年$2月$3日")
// 2016年03月26日
\1表示后向引用，是指在正则表达式中，从左往右数，第1个()中的内容，以此类推，\2表示第2个()，\0表示整个表达式。
//匹配日期格式，表达式中的\1代表重复(\-|\/|.)
var rgx = /\d{4}(\-|\/|.)\d{1,2}\1\d{1,2}"/
rgx.test("2016-03-26") //true
rgx.test("2016-03.26") //false
两者的区别是：\n只能用在表达式中，而$n只能用在表达式之外的地方。
7、test和match
前面的大都是JS正则表达式的语法，而test则是用来检测字符串是否匹配某一个正则表达式，如果匹配就会返回true,反之则返回false
/\d+/.test("123") ; //true
/\d+/.test("abc") ; //false
match是获取正则匹配到的结果，以数组的形式返回
"186a619b28".match(/\d+/g); // ["186","619","28"]
8、replace
replace 本身是JavaScript字符串对象的一个方法，它允许接收两个参数：
replace([RegExp|String],[String|Function])
第1个参数可以是一个普通的字符串或是一个正则表达式
第2个参数可以是一个普通的字符串或是一个回调函数
如果第1个参数是 RegExp，JS会先提取RegExp匹配出的结果，然后用第2个参数逐一替换匹配出的结果
如果第2个参数是回调函数，每匹配到一个结果就回调一次，每次回调都会传递以下参数：
result: 本次匹配到的结果
$1,...$9: 正则表达式中有几个()，就会传递几个参数，$1~$9分别代表本次匹配中每个()提取的结果，最多9个
offset:记录本次匹配的开始位置
source:接受匹配的原始字符串
9、经典案例
(1) 实现字符串的trim函数，去除字符串两边的空格。
String.prototype.trim = function(){
//方式一：将匹配到的每一个结果都用""替换
return this.replace(/(^\s+)|(\s+$)/g,function(){
return "";
});
//方式二：和方式一的原理相同
return this.replace(/(^\s+)|(\s+$)/g,'');
};
^\s+ 表示以空格开头的连续空白字符，\s+$ 表示以空格结尾的连续空白字符，加上()就是将匹配到的结果提取出来，由于是 | 的关系，因此这个表达式最多会match到两个结果集，然后执行两次替换：
String.prototype.trim = function(){
/**
* @param rs：匹配结果
* @param $1:第1个()提取结果
* @param $2:第2个()提取结果
* @param offset:匹配开始位置
* @param source：原始字符串
*/
this.replace(/(^\s+)|(\s+$)/g,function(rs,$1,$2,offset,source){
//arguments中的每个元素对应一个参数
console.log(arguments);
});
};
" abcd ".trim();
输出结果：
[" ", " ", undefined, 0, " abcd "] //第1次匹配结果
[" ", undefined, " ", 5, " abcd "] //第2次匹配结果
(2) 提取浏览器 url 中的参数名和参数值，生成一个key/value 的对象。
function getUrlParamObj(){
var obj = {};
//获取url的参数部分
var params = window.location.search.substr(1);
//[^&=]+ 表示不含&或=的连续字符，加上()就是提取对应字符串
params.replace(/([^&=]+)=([^&=]*)/gi,function(rs,$1,$2){
obj[$1] = decodeURIComponent($2);
});
return obj;
}
/([^&=]+)=([^&=]*)/gi 每次匹配到的都是一个完整key/value,形如xxxx=xxx, 每当匹配到一个这样的结果时就执行回调，并传递匹配到的key和 value，对应到$1和$2。
(3) 扩展 typeof，包含引用类型的具体类型。
function getDataType(obj){
let rst = Object.prototype.toString.call(obj);
rst = rst.replace(/\[object\s(\w+)\]/,'$1'); //[object Xxx]
return rst.toLowerCase()
}
getDataType(1); //number
getDataType('a'); //string
getDataType(null); //null
getDataType([]); //array
$1是正则表达式中第一个()中匹配的内容。需要注意的是，replace的第二个参数只能是字符串或函数，因此，这里的$1需要放在引号中。
(4) 在字符串指定位置插入新字符串。
String.prototype.insetAt = function(str,offset){
offset = offset + 1;
//使用RegExp()构造函数创建正则表达式
var regx = new RegExp("(^.{"+offset+"})");
return this.replace(regx,"$1"+str);
};
"abcd".insetAt('xyz',2); //在c字符后插入xyz
>> "abcxyzd"
当offset=2时，正则表达式为：(^.{3}) .表示除\n之外的任意字符，{3}表示匹配前三个连续字符，加()就会将匹配到的结果提取出来，然后通过replace将匹配到的结果替换为新的字符串，形如：结果=结果+str
(5) 将手机号12988886666转化成129****6666 。
function telFormat(tel){
tel = String(tel);
//方式一
return tel.replace(/(\d{3})(\d{4})(\d{4})/,function (rs,$1,$2,$3){
return $1+"****"+$3
});
//方式二
return tel.replace(/(\d{3})(\d{4})(\d{4})/,"$1****$3");
}
(\d{3}\d{4}\d{4})可以匹配完整的手机号，并分别提取前 3 位、4-7 位和 8-11位，"3" 是将第 2 个匹配结果用****代替并组成新的字符串，然后替换完整的手机号。
(6) 实现HTML编码，将< / > " & `等字符进行转义，避免XSS攻击 。
function htmlEncode(str) {
//匹配< / > " & `
return str.replace(/[<>"&\/`]/g, function(rs) {
switch (rs) {
case "<":
return "<";
case ">":
return ">";
case "&":
return "&";
case "\"":
return """;
case "/":
return "/"
case "`":
return "'"
}
});
}
另:常用正则表达式
//将数转为带,号的货币形式
'1231232341'.replace(/\B(?=(\d{3})+(?!\d))/g,',');
'1231232341'.replace(/(\d)(?=(?:\d{3})+$)/g,'$1,');
//去掉括号及其内容
'www(sdfsdf)'.replace(/\([^\)]*\)/g,'');
//匹配#000-#fff表示法的颜色
"^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$"
//匹配rgb和rgba的颜色
"^[rR][gG][Bb][Aa]?[\(]((2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),){2}(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),?(0\.\d{1,2}|1|0)?[\)]{1}$"
匹配规则
下面将正则中的一些基本的匹配规则列出来如下表所示：
要点
贪与不贪
举个例子，假设有以下这段html字符，我想拿到a标签中的内容：
<a>南京长江大桥</a>哈哈<a>南京市长江大桥</a>
然后我写了这样一个正则： <a>(.)*</a>
在线测试的结果如下：
这个结果与我们的预期不符，正常我应该得到两个匹配的结果才对，但是现在却只匹配到一个结果。
现在把刚刚的正则改成这样： <a>(.)*?</a>
在线测试的结果如下：
贪 说的是正则在不约束的情况下会继续自动向右进行匹配，直到匹配结束，只要匹配的数据与正则的最后一个值匹配就算是匹配到了。
不贪 说的是只要匹配到就结束，不继续向右进行匹配了。
问号 ? 就解决了贪婪的问题，使得问号前面的字符匹配到之后就结束，但是并不是把 ? 放在哪里都可以解决贪婪的，在正则里，有一些属于贪婪模式量词，比如以下这些:
{m,n}{m,}?*+
断言与零宽
在java中我们知道 断言 可以用来声明一个应该为 true 的事实，只有当断言为真时才会继续进行后续的操作。
在正则中也有 断言 的概念，但是在正则中除了 断言 还有 零宽 的概念。
- 断言：
通俗点将断言就是 “我断定某某情况是真的” ，而正则中的断言，就是说正则可以断定在 指定的内容 的 前面 或 后面 会出现满足指定规则的内容。比如 "aa1bb2cc3"，正则可以用断言找出 bb2 前面有 aa1，也可以找出 bb2 后面有 cc3。
- 零宽：
零宽就是没有宽度，在正则中，断言只是匹配位置，不占字符，也就是说，匹配结果里是不会返回断言本身的。
断言一共有四种情况：
让我们来举个例子来说明吧，假设我们现在拿到了某个网页的html，里面有个阅读数的标签：
-
<span class="read-cnt">阅读数：1024</span>
现在我们要获取到这个阅读数，该怎么办呢？
如果用正向先行断言来匹配的话，可以这样来写：
-
\d+(?=</span>)
上述的表达式就是说明，我现在断言整数\d+的 后面 能 匹配表达式：</span>
让我们来验证下结果：
相应的正向后行断言可以这样写表达式：
(?<=阅读数：)\d+
上述的表达式就是说明，我现在断言整数 \d+ 的 前面 能 匹配表达式： 阅读数：
验证下结果如下：
分组
正则表达式中用小括号 () 来做分组，也就是括号中的内容作为一个整体。
因此当我们要匹配分组 he 的时候，可以用下面这个表达式 ：
(he)
我们看到正则表达式用小括号来做分组，那么问题来了：
如果要匹配的字符串中本身就包含小括号，那应该怎么办？
针对这种情况，正则提供了转义的方式，也就是要把这些元字符、限定符或者关键字转义成普通的字符，做法很简单，就是在要转义的字符前面加个斜杠()即可。
因此当我们要匹配分组 (he) 的时候，可以用下面这个表达式 ：
(\(he\))
下面我们用一个正则表达式的图形生成工具，做一个对比的实验，让我们对分组和定位有个了解。
1：匹配 he 分组一次 ;
2：匹配 he 分组零或多次；
3：匹配以 he 开头的分组一次；
4：匹配以 he 开头的分组零或多次
捕获与反向引用
单纯说到捕获，他的意思是匹配表达式，但捕获通常和分组联系在一起，也就是“捕获组”。
捕获组：
匹配子表达式的内容，把匹配结果保存到内存中以数字编号或显示命名的组里(可以把它想象为java中的array和map)，以深度优先进行编号，之后可以通过序号或名称来使用这些匹配结果。
捕获组的表达式为： (exp) ，这个语法跟上面讲到的分组的概念是一样的，只是捕获将匹配到的分组，保存在了内存中，留待后面使用。具体怎么时候他不管，他只需要把匹配到的分组保存在内存中就可以了。
有一种情况当在匹配的过程中，需要与已经捕获到的分组进行匹配，这时就需要使用到保存在内存中的捕获组了，这种使用方式就被称为： 反向引用 。
假设我有这样一段文字：
aa12bb23cc34
现在我想拿到成对的字符，该怎么做呢？这种情况下通过断言或者其他方式是办不到的，那我们能否在匹配的过程中将匹配到的一个字符先保存在内存中，然后匹配下一个字符时再与上一个字符相比较，如果相等，就说明匹配成了，拿到了成对的字符了。
那首先我们先要写一个匹配单个字符分组的表达式：
(\w)
那当匹配时捕获到一个字符分组时，我们需要将该字符引用出来，与下一个字符想比较，我们期望匹配的下一个字符也与我当前保存的字符相等，那么表达式就变成了这样：
(\w)\1
这里的 \1 表示的是，当前正则表达式匹配到的 第1个 分组，那就意味着， \2 表示 第2个分组。
做个测试，结果如下：
那如果我想再匹配复杂一点的结果，比如：XYY 这种的结果，又该怎么写呢？
其实有了上面的基础之后就很简单了，我们需要做的就是 对捕获到的第2个分组进行反向引用就可以了！
具体的表达式为：
(\w)(\w)\2
测试结果如下：
表示成图形就是这样：
附常用工具：
在线正则测试:http://tool.oschina.net/regex/
生成正则图片:https://regexper.com
