正则表达式

正则表达式的概念

MDN解释：正则表达式是用于匹配字符串中字符组合的模式。
简单理解正则就是用来匹配字符串的，根据我们的规则去匹配字符串

创建一个正则表达式

1、使用一个正则表达式字面量

//匹配一个字符串中出现abc子串
const reg = /abc/
console.log(/abc/.test('jackabc')) // true
console.log(/abc/.test('jackab c')) //false

使用正则表达式字面量为正则表达式提供了脚本加载后的编译。当正则表达式保持不变的时，使用此方法可以获得更好的性能
2、使用RegExp构造函数

const reg = new RegExp('abc')
console.log(reg.test('jackabc'))  // true

使用构造函数为正则表达式提供了运行时的编译

编写一个正则表达式模式

• 简单模式
  简单模式是由你想直接找到的字符构成，比如/abc/这个模式就能且仅能匹配'abc'字符串，多一个空格或者其他字符都不行。

const reg = /abc/
console.log(/abc/.test('jackabc')) // true
console.log(/abc/.test('jackab c')) //false
console.log(/abc/.test('jackabbc')) //false

• 特殊字符模式
  当你需要搜索一个比直接匹配需要更多条件的匹配时，这时，你就可以在正则表达式中使用特殊字符。

console.log(/abc/.test('jackabc')) // true
console.log(/ab(.+)c/.test('jackab c')) //true
console.log(/ab(.*)c/.test('jackabbc')) //true

正则表达式中的特殊字符（元字符）

字符	含义
.	匹配除换行以为的任意字符
\	在非特殊字符之前的反斜杠表示下一个字符是特殊字符，不能按照字面理解。在特殊字符之前的反斜杠表示下一个字符不是特殊字符
^	匹配输入的开始。如果多行标志被设置为true，那么也匹配换行符后紧跟的位置
$	匹配输入的结束。如果多行标志被设置为true，那么也会匹配换行符前的位置
*	匹配前面的一个表达式0次或多次，等价于{0,}
+	匹配前面的一个表达式1次或多次，等价于{1,}
?	匹配前面的一个表达式0次或1次，等价于{0,1}
(x)	匹配’x’并且记住匹配项。其中括号被称为捕获括号
(?:x)	匹配’x’但是不记住匹配项
\d	匹配一个数字。等价于[0-9]
\D	匹配一个非数字字符。等价于[^0-9]
\w	匹配一个单字字符。等价于[a-zA-Z0-9_]
\W	匹配一个非单字字符。等价于[^a-zA-Z0-9_]
\s	匹配一个空白字符，包括空格、制表符、换页符和换行符
\S	匹配一个非空白字符
\t	匹配一个水平制表符
\v	匹配一个垂直制表符

// 匹配以abc开始的字符串
console.log(/^abc/.test('abcddd')) //true
console.log(/^abc/.test('abc'))  //true
// 匹配以abc结束的字符串
console.log(/abc$/.test('abc')) //true
console.log(/abc$/.test('dasdfeabc'))  //true
// 匹配abc开始 abc结束的字符串
console.log(/^abc$/.test('abc')) //true
console.log(/^abc$/.test('abcc')) //false
console.log(/^abc$/.test('aabc')) //false

console.log(/\w/.test('中')) //false
console.log(/\w/.test('acd')) //true
console.log(/\W/.test('中')) //true

console.log(/a|b/.test('add'))  //true
console.log(/a|b/.test('bdd'))  //true
console.log(/a|b/.test('dd'))  //false

使用正则表达式

正则表达式可以被用于RegExp的exec和test方法以及String的match repalce search split方法。

使用正则表达式的方法

方法	描述
exec	一个在字符串中执行查找匹配的RegExp方法，返回一个数组（未匹配到则返回null）
test	一个在字符串中测试是否匹配的RegExp方法，返回true或者false
match	一个在字符串中执行查找匹配的String方法，返回一个数组，为匹配到返回null
matchAll	一个在字符串中执行查找所以匹配的String方法，它放回一个迭代器
search	一个在字符串中测试匹配的String方法 ，它返回匹配到的位置索引，或者在失败的时候返回-1
replace	一个在字符串中执行查找匹配的String方法，并且使用替换字符串替换匹配到的子字符串
split	一个使用正则表达式或者一个固定字符串分隔一个字符串，并将分隔后的字符串存储到数组中的String方法

console.log(/abc/.test('jackabc')); //true
console.log(/abc/.exec('jackabc')); //[ 'abc', index: 4, input: 'jackabc', groups: undefined ]
console.log(/\{\{(.+?)\}\}/.exec('{{ name }}{{ age }}')); //['{{ name }}',' name ',index: 0,  input: '{{ name }}{{ age }}',  groups: undefined]
'{{ name }}{{ age }}{{ person }}'.replace(/\{\{(.+?)\}\}/g, (...args) => {
  console.log(args[1]) // name age person
})
'{{ name }}{{ age }}{{ person }}'.search(/\{\{(.+?)\}\}/g, (...args) => {
  console.log(args[1]) // name age person
})

使用括号的子字符串匹配

一个正则表达式模式使用括号，将导致相应的匹配被记住，使用括号匹配的子字符串的数量是无限的，返回的数组中保存所有被发现的子匹配。

const result = /\{\{(.+)\}\}/.test('{{ name }}');
console.log(RegExp.$1); // name
const result = /\{\{(.+?)\}\}/.test('{{ name }}{{ age }}');
console.log(RegExp.$1); // name

通过标志进行高级搜索

正则表达式有四个可选参数进行全局和不分大小写搜索。这些参数既可以单独使用也可以一起用在任何顺序和包含正则表达式中

标志	描述
g	全局搜索
i	不区分大小写搜索
m	多行搜索
s	允许.匹配换行符
u	使用unicode码的模式进行匹配
y	执行“黏性”搜索，匹配从目标字符串的当前位置开始

const result = '{{ name }}{{ age }}{{ person }}'.match(/\{\{(.+?)\}\}/g)
console.log(result) //[ '{{ name }}', '{{ age }}', '{{ person }}' ]

详情请查看MDN正则表达式