通俗易懂的正则表达式

正则表达式的英文是regular expression简称regex。正则表达式就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，并让计算机用这个规则去检索符合规则的文本。

创建正则表达式
1、利用RegExp new RegExp(‘expression’)
2、双反斜杠 / expression /

属性解释：
1、g 匹配全局
2、 i 忽略大小写

元字符：元字符是正则表达式中的特殊字符，用于定义某种特定的匹配模式

元字符	含义
.	匹配任意单个字符（除换行符)
*	匹配前面的字符零次或多次
+	匹配前面的字符一次或多次
?	匹配前面的字符零次或一次
^	匹配字符串的开头
$	匹配字符串的结尾
[]	匹配括号内的任意字符（字符集）
()	分组，括号内的内容作为一个整体匹配

\	转义符，表示将元字符转换为普通字符

量词: 量词用于控制匹配的次数，指定某个模式出现的次数范围

量词	含义
.	匹配任意单个字符（除换行符)
*	匹配前面的字符零次或多次
+	匹配前面的字符一次或多次
{n}	匹配前面的模式正好 n 次
{n,}	匹配前面的模式至少 n 次
{n,m}	匹配前面的模式至少 n 次，至多 m 次

. 的用法

表示可以匹配任意一个字符

var reg = /a.b/
console.log(reg.test("abbb"))  // true
console.log(reg.test("ahbb"))  // true
console.log(reg.test("aahb"))  // true
console.log(reg.test("ahb"))   // true
console.log(reg.test("ahhb"))  // true

*的用法

表示*前面的字符匹配0次或多次

var regs = /a*b/
console.log(regs.test("aaaab"))      // true
console.log(regs.test("ab"))         // true
console.log(regs.test("arrrb"))      // true
console.log(regs.test("grrrb"))      // true
console.log(regs.test("grrrbfff"))   // true
console.log(regs.test("grrrt"))      // false
console.log(regs.test("grrrtb"))     // true
// 正则表达式中只有有其中一段字符串满足就可以 以上表达式代表只要a字符出现多次或0次都可以  所以只要有b就可以

+的用法

表示前面的字符匹配1次或多次

var reg1 = /ab+c/
console.log(reg1.test('abbc1111111111'))  //true
console.log(reg1.test('abec1111111111'))  //false
console.log(reg1.test('abbchhh'))         //true

？的用法

表示前面的字符出现0次或1次

var reg2 = /a?b/
console.log(reg2.test('b'))       //true
console.log(reg2.test('aab'))     //false
console.log(reg2.test('aaggg'))   //false
console.log(reg2.test('aaab'))    //false
console.log(reg2.test('ab'))      //true
console.log(reg2.test('haab'))    //true
console.log(reg2.test('ahab'))    //true

{n} 的用法

表示匹配前面字符正好n次

var reg3 = /a{3}b/
console.log(reg3.test("ab"))     // false
console.log(reg3.test("aab"))    // false
console.log(reg3.test("aaab"))   // true
console.log(reg3.test("aaaab"))  // true
console.log(reg3.test("haaab"))  // true
console.log(reg3.test("haaac"))  // false

{n,} 的用法

表示匹配前面字符至少n次

var reg4 = /a{3,}b/
console.log(reg4.test("ab"))        // false
console.log(reg4.test("aab"))       // false
console.log(reg4.test("aaab"))      // true
console.log(reg4.test("aaaab"))     // true
console.log(reg4.test("haaab"))     // true
console.log(reg4.test("haaac"))     // false
console.log(reg4.test("dddhaaab"))  // true

{n,m} 的用法

表示匹配前面的字符至少 n 次，至多 m 次

var reg5 = /a{3,6}b/
console.log(reg5.test("aab"))       // false
console.log(reg5.test("aaab"))      // true
console.log(reg5.test("aaaab"))     // true
console.log(reg5.test("haaab"))     // true
console.log(reg5.test("haaac"))     // false
console.log(reg5.test("dddhaaab"))  // true

^的用法

表示设置字符串的开头

var aaa = /^ab+c/
console.log(aaa.test("babc"))   // false
console.log(aaa.test("aabc"))   // false
console.log(aaa.test("abac"))   // false
console.log(aaa.test("abcc"))   // true
console.log(aaa.test("abbcc"))  // true

$的用法

表示设置字符串的开头

var aaa = /ab+c$/
console.log(aaa.test("babc"))   // true
console.log(aaa.test("aabc"))   // true
console.log(aaa.test("abac"))   // false
console.log(aaa.test("abcc"))   // false
console.log(aaa.test("abbcc"))  // false

^和$搭配使用

var aaa = /^ab+c$/
console.log(aaa.test("babc"))   // false
console.log(aaa.test("aabc"))   // false
console.log(aaa.test("abac"))   // false
console.log(aaa.test("abcc"))   // false
console.log(aaa.test("abbcc"))  // false
console.log(aaa.test("abbc"))   // true

[] 的使用

指定字符串的匹配规则，这个[]可以设置指定范围但是只占一个字符

// 匹配单个字符
var aaa = /a[bBc]d/
console.log(aaa.test("abd"))     // true
console.log(aaa.test("aBd"))     // true
console.log(aaa.test("aCd"))     // false
console.log(aaa.test("abcd"))    // false
console.log(aaa.test("abded"))   // true

//从匹配区间匹配单个字符 
var aaa = /a[0-9]d/
console.log(aaa.test("a1bd"))      // false
console.log(aaa.test("a2d"))       // true
console.log(aaa.test("a34d"))      // false
console.log(aaa.test("a2d33"))     // true
console.log(aaa.test("34a2d33"))   // true

//单个匹配和匹配范围混用
var aaa = /a[bB0-9]d/
console.log(aaa.test("a1bd"))      // false
console.log(aaa.test("a2d"))       // true
console.log(aaa.test("aad"))       // false
console.log(aaa.test("a2d33"))     // true
console.log(aaa.test("34a2d33"))   // true

[]中使用^来取反

对[]中匹配的规则进行取反操作

var aaa = /a[^0-9]d/
console.log(aaa.test("a1bd"))      // false
console.log(aaa.test("a2d"))       // false
console.log(aaa.test("aad"))       // true
console.log(aaa.test("afd33"))     // true
console.log(aaa.test("34afd33"))   // true

[]和{}搭配使用

var aaa = /a[0-9]{2}d/
console.log(aaa.test("a1bd"))      // false
console.log(aaa.test("a2d"))       // false
console.log(aaa.test("a34d"))      // true
console.log(aaa.test("a345d"))     // false
console.log(aaa.test("wwa45ddd"))  // true

| 的使用

相当于或，可以在多个选项里面进行筛选筛选

var aaa = /doc|xls|ppt|word/
console.log(aaa.test("doc"))      // true
console.log(aaa.test("adocf"))    // true
console.log(aaa.test("xls"))      // true
console.log(aaa.test("a345d"))    // false

\的使用

比如，现在需要写出js的变量命名规则：
以 $_ 或字母开头，后面跟上0个或多个$ 、_、字母或数字。

/^[\$_a-zA-Z][\$_0-9a-zA-Z]*$/i

因为 $字符在正则表达式里是个特殊字符，所以要表达 “ 匹配$ 字符”的话就要把 $字符转义，就是在$ 前面加一个\，变成$像.、+、*、?、^、$、[、]、{、} 等等这些关键字符号，如果要匹配这些字符就要转义。

() 指定一个捕获组

括号除了可以匹配规则的优先级外，还可以充当“捕获组”，比如要匹配的html标签

what可以写成 /<([a-z]+)>/.+<\/\1>/

\1 表示要完全匹配正则里第一个 () 里的规则的内容。比如第一个 () 里的表达式匹配了body，那\1的部分也要完全匹配body捕获组
() 最多9个， \1 ~ \9 分别与这9个 () 按顺序一一对应

在replace中使用捕获组

捕获组也可以在replace里面用。比如要把 result = first + second - third 里的变量名前面都加上!

console.log('result = first + second - third'.replace(/([a-z]+)/g, '!$1'))
//!result = !first + !second - !third

在replace的第二个参数里，利用是$1, $2, … $9 引用捕获组。

但如果要把 result = first + second - third 里的变量名前面都加上$ 怎么办呢？

console.log('result = first + second - third'.replace(/([a-z]+)/g, '$$1')) 
// $1 = $1 + $1 - $1

对于这种关键字的使用，需要在前面再加上$

console.log('result = first + second - third'.replace(/([a-z]+)/g, '$$$1'))
// $result = $first + $second - $third

在exec中使用捕获组

使用正则的exec方法，可以取出exec中字符串匹配的部分
返回值是一个数组，数组的第一个参数是匹配到的字符串的结果，第二个参数是匹配到的第一捕获组的内容，数组的第n个参数是匹配到的捕获组的第n-1个内容，数组的倒数第2个元素是捕获组的起始下标，倒数第一个是被执行的字符串

console.log(/<([a-z]+)>/.exec("111<br>222<br>333"))  
// ["<br>","br"] 
console.log(/^(\w+)\.(jpg|jpeg|bmp|png|gif)$/i.exec('_dsdddda.png')) 
// ["_dsdddda.png","_dsdddda","png"]

贪婪模式

*、+ 和 ? 的匹配属于贪婪模式
贪婪模式顾名思义就是尽可能多的去匹配，
例如/a.b/，.是符合贪婪模式的，尽可能多的匹配，所以是以来进行贪婪匹配，因为可以更多的匹配到字符串

var bbb = "abcccccccbcc".replace(/a.*b/, 'Q')
console.log(bbb) //Qcc

非贪婪模式

顾名思义会尽可能少的匹配。做法就是在 *、+、? 的后面再加一个问号

var bbb = 'abcccccccbcc'.replace(/a.*?b/, 'Q')
console.log(bbb) //Qcccccccbcc

常用的简写

[0-9] 的简写 \d
[0-9]{2, 6} 表示匹配2~6个数字，可以写成 \d{2, 6}
空白符的简写 \s
‘H E L L O’.replace(/\s/g, ‘’) — “HELLO”
匹配_、数字或字母的简写 \w
‘_123ABC…:‘’.replace(/\w/g, ‘Q’) // QQQQQQQ…:

简写是区分大小写的，如果简写里面是大写就代表取反的意思
如：‘_123ABC…:‘’.replace(/\W/g, ‘Q’) // _123ABCQQQQ