目录
1. 正则表达式的创建
字面量(直接量)
var reg=/条件/匹配模式;
var reg=/hello/g;
构造函数
var reg=new RegExp("条件","匹配模式");
var reg=new RegExp("hello","g");
2. 字符分类
普通字符
字母、数字、下划线、汉字、没有特殊含义的符号(,;!@等)。
特殊字符
\: 将特殊字符转义成普通字符。
模式修饰符
i: ignoreCase, 匹配时忽略大小写
m: multiline,多行匹配
g: global,全局匹配
3. 正则表达式实例方法
exec
用来匹配字符出中符合正则表达式的字符串。
如果匹配到,输出:
[匹配的内容,index:在str中匹配的起始位置,input:参数字符串,groups:undefined]
否则返回null。
var str = 'hello js hello css';
var reg1 = /hello/;
console.log(reg1.exec(str)); //[ 'hello', index: 0, input: 'hello js hello css', groups: undefined ]
var reg2 = /hello/g;
console.log(reg2.exec(str));
// [ 'hello', index: 0, input: 'hello js hello css', groups: undefined ]
// [ 'hello', index: 0, input: 'hello js hello css', groups: undefined ]
// 如果是全局模式的正则表达式,还可以使用循环进行输出
while (true) {
var result = reg2.exec(str);
if (!result) {
break;
}
console.log(result);
}
注意:(1)如果匹配模式是"g"时,reg2会维护lastIndex属性,记录下一次开始的位置,当第二次执行exec的时候,会从lastIndex开始检索。
(2)如果匹配模式不是"g",不会维护lastIndex属性,每次执行从开始位置检索。
test
用来检测待检测的字符串中是否有可以匹配到正则表达式的字符串,如果有返回true,否则返回false。
var str = 'hello js hello css';
var reg1 = /hello/;
console.log(reg1.test(str)); //true
var reg2 = /html/;
console.log(reg2.test(str)); //false
注意:
(1)如果正则表达式中有修饰符"g",这时,在reg中会维护lastIndex属性,记录下一次开始的位置,当第二次执行test的时候,从lastIndex开始检索。
(2)如果正则表达式中没有修饰符"g",不会维护lastIndex属性,每次执行从开始位置检索。
toString/toLocaleString
把正则表达式的内容转化成字面量形式字符串
var reg1 = /hello/;
console.log(reg1.toString()); // /hello/
console.log(reg1.toLocaleString()); // /hello/
valueOf
返回正则表达式本身
var reg1 = /hello/;
console.log(reg1.valueOf()); // /hello/
4.正则表达式实例属性
lastIndex
当没设置全局匹配时,该属性值始终为0
设置了全局匹配时,每执行一次exec/test来匹配,lastIndex就会移向匹配到的字符串的下一个位置,当指向的位置后没有可以再次匹配的字符串时,下一次执行exec返回null,test执行返回false,然后lastIndex归零,从字符串的开头重新匹配一轮。
var str = 'hello world hello';
var reg1 = /hello/;
var reg2 = /hello/g;
console.log(reg1.lastIndex); // 0
console.log(reg1.exec(str)); // 返回第一个hello
console.log(reg1.lastIndex); // 0
console.log(reg2.lastIndex); // 0
console.log(reg2.exec(str)); // 返回第一个hello
console.log(reg2.lastIndex); // 5
console.log(reg2.lastIndex); // 5
console.log(reg2.exec(str)); // 返回第二个hello
console.log(reg2.lastIndex); // 17
console.log(reg2.lastIndex); // 17
console.log(reg2.exec(str)); // null
console.log(reg2.lastIndex); // 0
console.log(reg2.exec(str)); // 返回第一个hello
console.log(reg2.lastIndex); // 5
console.log(reg2.exec(str)); // 返回第二个hello
ignoreCase、global、multiline
判断正则表达式中是否有忽略大小写、全局匹配、多行匹配三个模式修饰符.
var reg1 = /HellO/igm;
console.log(reg1.ignoreCase); //true
console.log(reg1.global); //true
console.log(reg1.multiline); //true
source
返回字面量形式的正则表达式(类似于toString)
var reg = /hello/igm;
console.log(reg.source); //hello
5.正则表达式语法-元字符
直接量字符
通过反斜线\作为前缀进行转义。
字符 | 匹配 |
字母和数字字符 | 自身 |
\o | Null字符 |
\t | 制表符 |
\n | 换行符 |
\v | 垂直制表符 |
\f | 换页符 |
\r | 回车符 |
字符集合
一个字符集合,也叫字符组。匹配集合中的任意一个字符。可以使用连字符‘-’指定一个范围。
方括号用于查找某个范围内的字符:
[abc] 查找方括号之间的任何字符
var str = 'abc bcd asd';
var reg = /[ac]/; //只要包含有a 或者b 或者c 都返回true
console.log(reg.test(str));
[0-9] 查找任何从0到9的数字
var str = 'abc bcd asd2';
var reg = /[1-9]/igm;
console.log(reg.test(str));
注意:^写在[]里面是反义字符组
var str = 'abc bcd asd2';
var reg = /[^abc]/igm;
console.log(reg.test(str)); //true
边界符
^ 匹配输入开始。表示匹配行首的文本(以谁开始)。如果多行(multiline)标志被设为 true,该字符也会匹配一个断行(line break)符后的开始处。
$ 匹配输入结尾。表示匹配行尾的文本(以谁结束)。如果多行(multiline)标志被设为 true,该字符也会匹配一个断行(line break)符的前的结尾处。
如果 ^和 $ 在一起,表示必须是精确匹配。
var rg = /abc/;
// 只要包含有abc这个字符串返回的都是true
console.log(rg.test('ab')); //false
console.log(rg.test('abcaaa')); //true
// 必须是以abc开头的字符串才能满足
var reg = /^abc/;
console.log(reg.test('abcd')); //true
console.log(reg.test('asbc')); //false
// 必须是以abc结尾的字符串才能满足
var reg = /abc$/;
console.log(reg.test('qqabc')); //true
console.log(reg.test('asabcss')); //false
// 精确匹配 要求必须是 abc字符串才符合规范
var reg = /^abc$/;
console.log(reg.test('abc')); //true
console.log(reg.test('abcs')); //false
字符集合与 "^" 和 "$" 一起使用
// 三选一 只有是a或者是 b 或者是 c 这三个字母才返回 true
var reg1 = /^[abc]$/;
console.log(reg1.test('ab')); //false
console.log(reg1.test('b')); //true
// 26个英文字母任何一个字母返回true -表示的是a 到 z 的范围
var reg2 = /^[a-z]$/;
console.log(reg2.test('f')); //true
console.log(reg2.test('F')); //false
//字符组合
// 26个英文字母(大写和小写都可以)任何一个字母返回true
var reg3 = /^[a-zA-Z0-9]/;
console.log(reg3.test('4')); //true
console.log(reg3.test('a34')); //true
// 取反 方括号内部加上 ^ 表示取反,只要包括方括号内的字符,都返回false
var reg4 = /^[^a-zA-Z0-9]$/;
console.log(reg4.test('H')); //false
console.log(reg4.test('$')); //true
\b 匹配一个零宽单词边界(zero-width word boundary),表示一个单词(而非字符)边界,也就是单词和空格之间的位置,或者字符(\w)与字符串开头或者结尾之间的位置。
\B 匹配一个零宽非单词边界(zero-width non-word boundary),与"\b"相反。
var str = 'Hello World Hello JavaScript';
var reg1 = /\bHello\b/g;
var reg2 = /\BScrip\B/g;
console.log(reg1.exec(str));
console.log(reg2.exec(str));
字符类
字符类 | 含义 |
. | 匹配除换行符\n 和回车符之外的任何单个字符,等效于[^\n\r] |
\d | 匹配一个数字字符,等效于[0-9] |
\D | [^0-9] |
\w | 匹配包括下划线的任何单个字符,包括A~Z,a~z,0-9和下划线"_",等效于[a-zA-Z0-9_] |
\W | [^a-zA-Z0-9_] |
\s | 匹配任何Unicode空白字符,包括空格、制表符、换页符等,等效于[\f\t\n\r] |
\S | [^\f\t\n\r] |
6. 数量词
字符 | 含义 |
* | >=0次 |
+ | >=1次 |
? | 0或1次 |
{n} | n次 |
{n,} | ≥n 次 |
{n,m} | n到m 次 |
X* 匹配前面的模式 x ---> 0 或多次。等价于{0,}
// * 允许出现0次或多次
var reg = new RegExp(/^a*$/);
console.log(reg.test("a")); // true
console.log(reg.test("")); // true
X+ 匹配前面的模式 x ---> 1 或多次。等价于 {1,}
// + 允许出现1次或多次
var reg2 = new RegExp(/^a+$/);
console.log(reg2.test("a")); // true
console.log(reg2.test("")); // false
? 匹配前面的模式 x -> 0 或 1 次。等价于{0,1}
// ? 只允许a出现1次或0次
var reg3 = new RegExp(/^a?$/);
console.log(reg3.test("a")); // true
console.log(reg3.test("")); // true
console.log(reg3.test("aaa")); // false
X{n} n为非负整数。前面的模式 x 重复出现 n 次时匹配
// {3} 允许重复3次
var reg4 = new RegExp(/^a{3}$/);
console.log(reg4.test("a")); // false
console.log(reg4.test("")); // false
console.log(reg4.test("aaa")); // true
console.log(reg4.test("aaaa")); // false
X{n,} n为非负整数。前面的模式 x 重复出现至少 n 次时匹配
// {3,} 允许重复出现3次或3次以上多次
var reg5 = new RegExp(/^a{3,}$/);
console.log(reg5.test("a")); // false
console.log(reg5.test("")); // false
console.log(reg5.test("aaa")); // true
console.log(reg5.test("aaaa")); // true
X{n,m} n和m为非负整数。前面的模式 x 重复出现至少 n 次,至多 m 次时匹配
// {3,6} 允许重复出现3次-6次之间,也就是>=3且<=6
var reg6 = new RegExp(/^a{3,6}$/);
console.log(reg6.test("a")); // false
console.log(reg6.test("aaaa")); // true
console.log(reg6.test("aaaaaa")); // true
console.log(reg6.test("aaaaaaa")); // false
重复方式
(1)贪婪模式:尽可能多的匹配(首先取最多可匹配的数量为一组进行匹配),当匹配剩余的字符串,还会继续尝试新的匹配,直到匹配不到为止,为默认模式。
// 对字符串"123456789",匹配其中的数字3-6次:\d{3,6},先匹配数字出现6次的字符串
//(123456),然后再从剩余字符串(789)中匹配出现数字3次的情况,剩余字符若没有出现数字
//3次则停止匹配。
var str = "123456789";
var reg = /\d{3,6}/g;
console.log(reg.exec(str)); //[ '123456', index: 0, input: '12345678', groups: undefined ]
console.log(reg.exec(str)); // [ '789', index: 6, input: '123456789', groups: undefined ]
console.log(reg.exec(str)); // null
(2)非贪婪模式:尽可能少的匹配(每次取最少匹配的数量为一组进行匹配),直到匹配不到为止 使用方法:在量词后加上 ?
// 对字符串"123456789",匹配其中的数字3-6次:\d{3,6},先匹配数字出现3次的字符串(123),
//然后再从剩余字符串(456789)中匹配出现数字3次的情况,剩余字符若没有出现数字3次则停止匹配。
var str = "123456789";
var reg = /\d{3,6}?/g;
console.log(reg.exec(str)); //[ '123', index: 0, input: '123456789', groups: undefined ]
console.log(reg.exec(str)); // [ '456', index: 3, input: '123456789', groups: undefined ]
console.log(reg.exec(str)); // [ '789', index: 6, input: '123456789', groups: undefined ]
7. 选择,分组,引用
选择
字符"|"用于分隔供选择的字符,选择项的尝试匹配次序是从左到右,直到发现了匹配项,如果左边的选择项匹配,就忽略右边的匹配项,即使它可以产生更好的匹配。
var reg = /html|css|js/;
console.log(reg.exec('qweqwehtttmlcss')); // css
分组
var reg = /I Like (basketball|football|table tennis)/
console.log(reg.test('I Like basketball')); //true
console.log(reg.test('I Like football')); //true
console.log(reg.test('I Like table tennis')); //true
捕获与引用
被正则表达式匹配(捕获)到的字符串会被暂存起来。其中,由分组捕获的串会从1开始编号,于是我们可以引用这些串:
var reg = /(\d{4})-(\d{2})-(\d{2})/;
var date = '2022-08-18';
reg.test(date);
// 捕获之前先要test/exec
console.log(RegExp.$1); //2022
console.log(RegExp.$2); //08
console.log(RegExp.$3); //18
$1引用了第一个被捕获的串,$2是第二个,依次类推。
嵌套分组的捕获
以左括号出现的舒徐进行捕获。
var reg = /((apple) is (a (fruit)))/
var str = "apple is a fruit"
reg.test(str) // true
RegExp.$1 // apple is a fruit
RegExp.$2 // apple
RegExp.$3 // a fruit
RegExp.$4 // fruit
规则是以左括号出现的顺序进行捕获。
引用
var reg = /(\w{3}) is \1/
console.log(reg.test('kid is kid')); // true
console.log(reg.test('dik is dik')); // true
console.log(reg.test('kid is dik')); // false
console.log(reg.test('dik is kid')); // false
\1引用了第一个被分组所捕获的串,换言之,表达式是动态决定的。
注意,如果编号越界了,则会被当成普通的表达式:
var reg = /(\w{3}) is \6/;
reg.test( 'kid is kid' ); // false
reg.test( 'kid is \6' ); // true
8.String对正则表达式的支持
search
查找字符串中是否有匹配正则的字符串,有则返回字符串第一次出现时的位置,无则返回null
正则中无论是否有全局匹配都不会影响返回结果。
var str = 'hello world hello';
var reg = /hello/;
var reg2 = /hello/g;
console.log(str.search(reg)); //返回 0
console.log(str.search(reg2));//返回 0
match
匹配字符串符合正则表达式的字符串,并返回该字符串的一个数组,其中包括字符串内容,位置。
如果正则设置全局匹配,则一次性返回所有符合正则表达式的字符串数组。
如果其中添加了分组,返回符合要求的字符串以及分组的一个数组,但如果同时开启全局匹配则不会在数组中添加分组内容。
var str = 'hello world hello';
var reg1 = /hello/;
var reg2 = /hello/g;
var reg3 = /(he)llo/;
var reg4 = /(he)llo/g;
// 匹配字符串中符合正则表达式的字符串,并返回该字符串的一个数组,其中包括字符串内容、位置
// [ 'hello', index: 0, input: 'hello world hello', groups: undefined ]
console.log(str.match(reg1));
// 如果正则设置全局匹配,则一次性返回所有符合正则表达式的字符串数组
// [ 'hello', 'hello' ]
console.log(str.match(reg2));
// 如果其中添加了分组,返回符合要求的字符串以及分组的一个数组
// [
// 'hello',
// 'he',
// index: 0,
// input: 'hello world hello',
// groups: undefined
// ]
console.log(str.match(reg3));
// 如果同时开启全局匹配则不会在数组中添加分组内容
// [ 'hello', 'hello' ]
console.log(str.match(reg4));
split
// 以某种形式分割字符串 split()
var str = "hello12world34hello";
// 当数字出现一次或多次时
var reg = /\d+/;
var result = str.split(reg);
console.log(result); // ['hello','world','hello']
replace
// 满足正则表达式条件的内容将被替换
var str = 'javascript'
// 如果开启全局模式 则替换所有满足条件的字符
var reg = /javascript/;
// replace(正则表达式, 要替换的内容)
var result = str.replace(reg, 'java');
console.log(result); //java
console.log(str); //javascript
9. 前瞻表达式
在正则表达式当中有个东西叫做前瞻,有的管它叫零宽断言:
表达式 | 名称 | 描述 |
---|---|---|
(?=exp) | 正向前瞻 | 匹配后面满足表达式exp的位置 |
(?!exp) | 负向前瞻 | 匹配后面不满足表达式exp的位置 |
正向前瞻
var str = 'Hello, Hi, I am Hilary.';
// 后面一定要匹配什么
var reg = /H(?=i)/g;
var newStr = str.replace(reg, "T");
console.log(newStr);//Hello, Ti, I am Tilary.
负向前瞻
var str = 'Hello, Hi, I am Hilary.';
// 后面一定不要匹配什么
var reg = /H(?!i)/g;
var newStr = str.replace(reg, "T");
console.log(newStr);//Tello, Hi, I am Hilary.