1. RegExp对象
JavaScript有两种方式实例化RegExp对象
字面量
构造函数
字面量
const reg = /all/;
console.log(reg); // /all/
'This is all I have.'.replace(reg, 'ALL'); // This is ALL I have.
构造函数
const reg = new RegExp('all');
console.log(reg); // /all/
'This is all I have.'.replace(reg, 'ALL'); // This is ALL I have.
2. 元字符
原义文本字符
元字符
原义文本字符
代表它本来含义的字符。比如正则表达式为 /abc/、/123/;它们分别匹配的是 abc、123 ,
元字符
在正则表达式中,有特殊含义的非数字字符。如:\b \d \w . + () 等。部分元字符的含义并不唯一,在不同的书写方式,含义可能不同。
3. 工具推荐
不是所有正则表达式都像前面写的那么简单,因为正则表达式语法有些复杂,我们在写的时候多多少少也会有些错误,或者阅读别人写的正则表达式的时候也难理解。
如果把下面的正则表达式转换成下图,会有助于我们理解正则表达式的含义。
^http(|s):\/\/[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+\/$
4. 量词
字符
含义
+
出现一次或多次(至少出现一次)
?
出现零次或一次(最多出现一次)
*
出现零次或多次(任意次)
{n}
出现n次
{n, m}
出现n到m次
{n,}
至少出现n次
// \d表示匹配数字
// 匹配一个数字
'1234567890'.replace(/\d/, 'a'); // a234567890
// 匹配一个或多个数字(至少匹配一个)
'1234567890'.replace(/\d+/, 'a'); // a
'1234567890'.replace(/\d?/, 'a'); // a234567890
'1234567890'.replace(/\d*/, 'a'); // a
'1234567890'.replace(/\d{3}/, 'a'); // a4567890
'1234567890'.replace(/\d{2,4}/, 'a'); // a567890
'1234567890'.replace(/\d{3,}/, 'a'); // a
'12'.replace(/\d{3,}/, 'a'); // 12
\d{2,6}
5. 贪婪模式和非贪婪模式
从上面 4. 量词 的例子中,'1234567890'.replace(/\d+/, 'a'); 输出的是 a 而不是 a234567890;'1234567890'.replace(/\d{2,4}/, 'a'); 输出的是 a567890 而不是 a34567890。
贪婪模式:正则表达式尽可能多的匹配,一直到匹配失败
非贪婪模式:正则表达式尽可能少的匹配,一旦匹配成功就不再匹配
因为默认情况下,正则表达式都是使用贪婪模式做匹配的。如果想要让正则表达式使用非贪婪模式匹配,在量词后面加个 ? 即可。
'1234567890'.replace(/\d{2,4}/, 'a'); // a567890
'1234567890'.replace(/\d{2,4}?/, 'a'); // a34567890
'1234567890'.replace(/\d+/, 'a'); // a
'1234567890'.replace(/\d+?/, 'a'); // a234567890
6. 类
正则表达式中,可以使用 [] 来构建一个类,正则表达式中的类是指符合某些特性的对象
字符类
正则表达式 [abcd] 是把 a、b、c、d 归为一类,该表达式可以匹配这类字符
'12345a6b7c8D9e'.replace(/[abcd]/g, '|'); // 12345|6|7|8D9e
范围类
正则表达式提供了 [a-z] 来表示从 a 到 z 的任意字符(包含 a 和 z)
'1a2b3c4q5z'.replace(/[a-z]/g, '|'); // 1|2|3|4|5|
'1a2b3c4T5Z'.replace(/[a-z]/g, '|'); // 1|2|3|4T5Z
'1a2b3c4T5Z'.replace(/[a-zA-Z]/g, '|'); // 1|2|3|4|5|
'1a2b3c4q5z'.replace(/[0-9]/g, '|'); // |a|b|c|q|z
[a-zA-Z0-9]
预定义类
字符
等价于
含义
\d
[0-9]
数字字符
\D
[^0-9]
非数字字符
\w
[a-zA-Z0-9_]
字母、数字、下划线(单词字符)
\W
[^a-zA-Z0-9_]
非字母、数字、下划线(非单词字符)
\s
[\t\n\x0B\f\r]
空白字符
\S
[^\t\n\x0B\f\r]
非空白字符
.
[^\n\r]
除了换行、回车之外的任意字符
7. 边界
字符
含义
^
以xxx开头
$
以xxx结尾
\b
单词边界
\B
非单词边界
'img/png/img-1.png'.replace(/img/g, 'image'); // image/png/image-1.png
'img/png/img-1.png'.replace(/^img/g, 'image'); // image/png/img-1.png
'img/png/img-1.png'.replace(/png/g, 'jpg'); // img/jpg/img-1.jpg
'img/png/img-1.png'.replace(/png$/g, 'jpg'); // img/png/img-1.jpg
'This is all I have.'.replace(/is/g, 'IS'); // ThIS IS all I have.
'This is all I have.'.replace(/\bis\b/g, 'IS'); // This IS all I have.
'This is all I have.'.replace(/\Bis\b/g, 'IS'); // ThIS is all I have.
9. 分组
作用
与 | 使用
与量词使用
反向引用
与 | 使用
/http(|s):\/\//
/http(|s):\/\//.test('https://'); // true
/http(|s):\/\//.test('http://'); // true
/a(b|c)d/.test('ad'); // false
/a(b|c)d/.test('abd'); // true
/a(b|c)d/.test('acd'); // true
与量词使用
如何匹配 javascript 出现两次 javascriptjavascript ?
/javascript{2}/.test('javascriptjavascript'); // false
/javascript{2}/.test('javascript'); // true
/(javascript){2}/.test('javascriptjavascript'); // true
反向引用
含有分组的正则表达式匹配成功时,将子表达式匹配到的内容,保存到内存中一个以数字编号的组里,可以简单的认为是对一个局部变量进行了赋值,这时就可以通过反向引用方式,引用这个局部变量的值。
很多情况下,我们可能需要将某种格式的字符串转换成另一种格式的字符串。例如:将 05/28/2018 转换成 2018-05-28;将Markdown语法的超链接 [Test](https://www.test.com/) 转换成HTML的超链接 Test
'05/28/2018'.replace(/(\d{2})\/(\d{2})\/(\d{4})/, '$3-$1-$2');
// => 2018-05-28
'[Test](https://www.test.com/)'.replace(/\[(.+)\]\((http(|s):\/\/.+)\)/, '$1');
// => Test
忽略分组
有时候我们在写正则表达式的时候会多次使用分组,但有一些分组是不需要反向引用的,比如正则表达式 /http(|s):\/\// 中的分组,我们不需要进行反向引用,这时候我们应该使用 (?:) 来忽略分组
不忽略分组:
/http(|s):\/\//
忽略分组:
/http(?:|s):\/\//
10. 前瞻后顾
正则表达式是从头部(左)向尾部(右)开始匹配的,文本的尾部方向称为“前”,文本的头部方向称为“后”
前瞻:正则表达式在匹配到规则的时候,向前检查是否符合断言
后顾:正则表达式在匹配到规则的时候,向后检查是否符合断言
名称
正则
含义
正向前瞻
exp(?=assert)
向前检查符合断言的
负向前瞻
exp(?!assert)
向前检查不符合断言的
正向后瞻
(?<=assert)exp
向后检查符合断言的
负向后瞻
(?
向后检查不符合断言的
'ab1cde2fg'.replace(/[a-z](?=\d)/g, 'X'); // aX1cdX2fg
'ab1cde2fg'.replace(/[a-z](?!\d)/g, 'X'); // Xb1XXe2XX
'ab1cde2fg'.replace(/(?<=\d)[a-z]/g, 'X'); // ab1Xde2Xg
'ab1cde2fg'.replace(/(?
11. 修饰符
global: 是否全文搜索,默认 false
ignoreCase: 是否大小写敏感,默认 false
multiline: 是否多行搜索,默认 false
lastIndex: 是当前表达式匹配内容的最后一个字符的下一个位置
source: 正则表达式的文本字符
'aaaaa'.replace(/a/, 'A'); // Aaaaa
'aaaaa'.replace(/a/g, 'A'); // AAAAA
'aAQq'.replace(/[a-z]/g, 'X'); // XAQX
'aAQq'.replace(/[a-z]/gi, 'X'); // XXXX
/[a-z]/.test('AA'); // false
/[a-z]/i.test('AA'); // true
`img/png/img-1.png
img/png/img-1.png
img/png/img-1.png`.replace(/^img/g, 'image');
// => image/png/img-1.png
// img/png/img-1.png
// img/png/img-1.png
`img/png/img-1.png
img/png/img-1.png
img/png/img-1.png`.replace(/^img/gm, 'image');
// => image/png/img-1.png
// image/png/img-1.png
// image/png/img-1.png
const reg = /\d/gim;
console.log(reg.source); // \d
12. RegExp对象中 test() 和 exec()
test()
用于测试参数字符串中是否存在匹配正则表达式模式的字符串;如果存在则返回true,否则返回false
const reg = /\w/;
reg.test('|'); // false
reg.test('a'); // true
reg.test('a'); // true
当使用 g 全文搜索时,test 函数会出现如下问题:
上述问题其实是正则表达式对象的 lastIndex 属性在作怪
如果正则表达式使用了全文搜索 g ,又想避免上述问题,应在执行 test 函数前先将 lastIndex 置 0
const reg = /\w/g;
reg.test('ab'); // true
reg.lastIndex = 0;
reg.test('ab'); // true
reg.lastIndex = 0;
reg.test('ab'); // true
exec()
使用正则表达式模式对字符串执行搜索,并将匹配到的结果以数组形式返回,如果没有匹配,返回null
结果数组属性
index:匹配字符的第一个字符的位置
input:被匹配的字符串
返回的数组
第一个元素是与正则表达式匹配的内容
第二个元素是与第一个子表达式相匹配的内容
第三个元素是与第二个子表达式相匹配的内容(以此类推)
现有如下字符串数组,我们使用 exec 从每个元素中提取图片的路径
const arr = [
'[测试1](https://www.test1.com/img/img-1.png)',
'[测试1](http://www.test1.com/img/img-1.jpg)',
'[测试2](https://static.test2.com/image/haha/img-1.png)'
]
正则表达式:
const reg = /\[.+\]\(http(|s):\/\/[a-zA-Z0-g_-]+(\.[a-zA-Z0-9_-]+)+\/((.+\/)+.+\.(png|jpg))\)/;
const res = reg.exec(arr[2]);
上述正则表达式使用了较多的分组,我们在阅读图形的时候可能造成干扰,忽略不必要的分组。
const reg2 = /\[.+\]\(http(?:|s):\/\/[a-zA-Z0-g_-]+(?:\.[a-zA-Z0-9_-]+)+\/((?:.+\/)+.+\.(?:png|jpg))\)/;
reg2.exec(arr[2]);