JS正则表达式(7) => ()的使用补充

正则的补充

() 的作用：

1. 与 | 搭配，让正则具有二选一的分支功能

   let reg = /ab|cd/;
   // 目的：匹配ab或者cd,
   // 但是, 只有 | 的时候, JavaScript会把这个正则解析的异常混乱
   reg.test('ab')		// => true
   reg.test('cd')		// => true
   reg.test('abd')		// => true
   reg.test('acd')		// => true
   reg.test('abcd')	// => true, what!这个也是true???
   
   // 改进: | 和 () 都是配合成对出现的
   let reg = /(ab|cd)/;
   reg.test('ab')		// => true
   reg.test('cd')		// => true
   reg.test('abd')		// => false
   reg.test('acd')		// => false
   reg.test('abcd')	// => false
   
   // 两者选其一进行匹配
   let reg = /^(?:(3){3}\.\1{3}|(6){3}\.\2{3})$/;
   // \1 代表不是(?:)开始的第一个()里面的内容重复一份
   // \2 代表不是(?:)开始的第二个()里面的内容重复一份
   // \3 代表不是(?:)开始的第三个()里面的内容重复一份
   console.log(reg.test('333.333'));		// => true
   console.log(reg.test('666.666'));		// => true
   console.log(reg.test('111.222'));		// => false 
   console.log(reg.test('333.444'));		// => false
   

2. 与量词符 + *... 组合，()中的内容看为一个整体

   let reg = /(?:(ab)+|(bc)*)/; // 匹配ab整体1~多次或bc0~多次
   
   console.log(reg.exec('ababbc')); // Array(3) [ "abab", "ab", undefined ]
   console.log(reg.exec('bcbc')); // Array(3) [ "bcbc", undefined, "bc" ]
   console.log(reg.exec('')); // Array(3) [ "", undefined, undefined ]
   

3. 分组捕捉功能，对匹配下来的字符进行数据提取

   // 被()括起来的内容在捕获的时候会被进行分组捕获
   let reg = /(\d+)([a-z]+)/;
   console.log(reg.exec('333aaa')); // => ['333aaa', '333', 'aaa']
   console.log(reg.exec('123abc')); // => ['123abc', '123', 'abc']
   console.log(reg.exec('55hh')); 	 // => ['55hh', '55', 'hh']
   console.log(reg.exec('55hh66bb')); 	 // => ['55hh', '55', 'hh']
   
   // 正则表达式首先会对字符串进行整体匹配， 如果字符串中有符合正则的字符串，把其匹配下来, 然后在对正则中(), 不包括(?:)的匹配下来, 形成一个数组
   

4. 反向引用， 与 \1 \2 \3.... 配合使用

   // \1 \2 \3... 可以替代()中同等的内容，123是根据()的数量决定
   let time1 = '2020-1-23'
   let time2 = '2020/1/23'
   let time3 = '2020_1_23'
   let time4 = '2020/1_23'
   let time5 = '2020/1-23'
   let reg = /\d{4}([-/_])\d{1,2}\1\d{1,2}/
   console.log(reg.exec(time1)); // => Array [ "2020-1-23", "-" ]
   console.log(reg.exec(time2)); // => Array [ "2020/1/23", "/" ]
   console.log(reg.exec(time3)); // => Array [ "2020_1_23", "_" ]
   console.log(reg.exec(time4)); // => null
   console.log(reg.exec(time5)); // => null
   

5. 非分组捕获功能，只匹配不捕获

   // 如果我们仅仅只是利用()干分支匹配的功能，不想让其被分组捕获,使用(?:)
   let reg1 = /(?:(a)b|(c)d)/; // 只匹配ab或cd分组提取a和c
   let reg2 = /((a)b|(c)d)/; // ab和cd，a和c都会分组匹配
   let str1 = 'ab'
   let str2 = 'cd'
   console.log(reg1.exec(str1)); // => Array(3) [ "ab", "a", undefined ]
   console.log(reg1.exec(str2)); // => Array(3) [ "cd", undefined, "c" ]
   console.log(reg2.exec(str1)); // => Array(4) [ "ab", "ab", "a", undefined ]
   console.log(reg2.exec(str2)); // => Array(4) [ "cd", "cd", undefined, "c" ]