文章目录
- 简介
- 1、正则表达式的创建
- 2、正则表达式中的字符分类
- 3、正则表达式实例方法
- 4、正则表达式实例属性
- 5、正则表达式中的元字符
- 6、正则表达式中的数量词
- 7、选择、分组、引用
- 8、特殊---String类型对正则表达式的支持
- 9、特殊---前瞻表达式
简介
正则表达式（Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
也就是说，正则表达式是
（1）由一个字符序列形成的搜索模式
（2）可以通过搜索模式来描述你要查询的内容
（3）可以是一个简单的字符，或一个更复杂的模式
（4）可用于所有文本搜索和文本替换的操作
1、正则表达式的创建
1.1 字面量创建
在一对反斜线中写正则表达式内容，如/abc/
正则表达式里面不需要加引号 不管是数字型还是字符串型
语法如下：var reg = /正则表达式/修饰符
var reg = /hello/g;
1.2 构造函数创建
构造正则表达式的实例，如new RexExp(‘abc’)，内部传入的参数为字符串/字符串的变量。
语法如下：var reg = new RegExp("正则表达式"，"修饰符")
var reg = new RegExp("hello","g");
2、正则表达式中的字符分类
普通字符
字母、数字、下划线、汉字、没有特殊含义的符号（,;!@等），实际上不是特殊字符的字符都是普通字符
特殊字符（转义字符）
反斜杠\：将普通字符转义为特殊字符
| 字符 | 匹配 |
|---|---|
| 字母和数字字符 | 自身 |
| \o | Null字符 |
| \t | 制表符 |
| \n | 换行符 |
| \v | 垂直制表符 |
| \f | 换页符 |
| \r | 回车符 |
模式修饰符
有如下几个模式修饰符：
i：ignoreCase，匹配时忽视大小写
m：multiline，多行匹配 /n
g：global，全局匹配.
字面量创建正则时，模式修饰符写在一对反斜线后。
3、正则表达式实例方法
- exec
可用来匹配字符串中符合正则表达式的字符串。如果匹配到，返回值是一个result数组:[匹配的内容，index: 在str中匹配的起始位置，input: 参数字符串，groups: undefined]，没匹配到则返回null
var str = "Hello world hello";
var reg1 = /hello/;
var reg2 = /hello/g;
var reg3 = /hello/i; //i修饰符表示匹配时忽略大小写
var reg4 = /exe/g;
console.log(reg1.exec(str));
//[ 'hello', index: 0, input: 'hello world hello', groups: undefined ]
console.log(reg2.exec(str));
//[ 'hello', index: 0, input: 'hello world hello', groups: undefined ]
console.log(reg3.exec(str));
//[ 'Hello', index: 0, input: 'Hello world hello', groups: undefined ]
console.log(reg4.exec(str));
//null
// 如果是全局模式的正则验证 还可以使用循环进行输出
while(true){
var result = reg.exec(str);
if(!result){
break;
}
console.log(result[0],result["index"],reg.lastIndex);
}
- test
用来测试待检测的字符串中是否有可以匹配到正则表达式的字符串，如果有返回true，否则返回false
var str = "hello world";
var reg1 = /world/;
var reg2 = /regex/;
console.log(reg1.test(str)); //返回true
console.log(reg2.test(str)); //返回false
- toString/toLocaleString
把正则表达式的内容转化成字面量形式字符串/有本地特色的字符串（JS中没效果）
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来匹配，latIndex就会移向匹配到的字符串的下一个位置，当指向的位置后没有可以再次匹配的字符串时，下一次执行exec返回null，test执行返回false，然后lastIndex归零，从字符串的开头重新匹配一轮
可以理解成，每次正则查找的起点就是lastIndex。
var str = 'hello hello 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); // 11
console.log(reg2.lastIndex); // 11
console.log(reg2.exec(str)); // 返回第三个hello
console.log(reg2.lastIndex); // 17
console.log(reg2.exec(str)); //返回 null
console.log(reg2.lastIndex); // 0
console.log(reg2.exec(str)); // 返回第一个hello
- ignoreCase、glocal、multiline
用于判断正则表达式中是否有忽略大小写、全局匹配、多行匹配三个模式修饰符。和三个模式修饰符作用很像
var reg1 = /hello/igm;
console.log(reg1.ignoreCase); //true
console.log(reg1.global); //true
console.log(reg1.multiline); //true
- source
返回字面量形式的正则表达式（类似于toString）
var reg1 = /hello/igm;
console.log(reg1.source); //hello
5、正则表达式中的元字符
- 直接量字符（转义字符）
正则表达式中的所有字母和数字都是按照字面含义进行匹配的，Javascript正则表达式语法也支持非字母的字符匹配，这些字符需要通过反斜线\作为前缀进行转义。
| 字符 | 匹配 |
|---|---|
| 字母和数字字符 | 自身 |
| \o | Null字符 |
| \t | 制表符 |
| \n | 换行符 |
| \v | 垂直制表符 |
| \f | 换页符 |
| \r | 回车符 |
- 字符集合
一个字符集合，也叫字符组。匹配集合中的任意一个字符。可以使用连字符‘-’指定一个范围。
使用方括号来表示范围。方括号用于查找某个范围内的字符。例如
- [abc] 查找方括号之间的任何字符
var str = 'abc qwe abc'
var reg1 = /[abc]/;// 只要包含有a 或者 包含有b 或者包含有c 都返回为true
console.log(reg1.test(str)); //true
- [0-9] 查找任何从0至9的数字
var str = 'abc qwe abd1'
var reg1 = /[0-9]/igm;
console.log(reg1.test(str)); //true
- [^xyz] 一个反义或补充字符集，也叫反义字符组.匹配任意不在括号内的字符。
var str = 'abc qwe abd1,2'
console.log(str);
var reg1 = /[^abc ]/igm;
console.log(reg1.test(str)); //true
//如果将上面的reg.test(str)改为reg1.exec(str);结果是[ 'q', index: 5, input: 'abc qwe abd1,2', groups: undefined ]
console.log(reg1.exec(str)); //由于lastIndex的改变，这里匹配的内容就变为'w'
//[ 'w', index: 5, input: 'abc qwe abd1,2', groups: undefined ]
- 边界符
^ 匹配输入开始。表示匹配行首的文本（以谁开始)。如果多行（multiline）标志被设为 true，该字符也会匹配一个断行（line break）符后的开始处。
$ 匹配输入结尾。表示匹配行尾的文本（以谁结束）。如果多行（multiline）标志被设为 true，该字符也会匹配一个断行（line break）符的前的结尾处。
如果 ^和 $ 在一起，表示必须是精确匹配。
var rg = /abc/;
// /abc/ 只要包含有abc这个字符串返回的都是true
//test用来测试待检测的字符串中是否有可以匹配到正则表达式的字符串，如果有返回true，否则返回false
console.log(rg.test('abc')); //true
console.log(rg.test('abcd')); //true
console.log(rg.test('aabcd'));//true
console.log('---------------------------');
// 必须是以abc开头的字符串才会满足
var reg = /^abc/;
console.log(reg.test('abc')); // true
console.log(reg.test('abcd')); // true
console.log(reg.test('aabcd')); // false
console.log('---------------------------');
// 必须是以abc结尾的字符串才会满足
var reg = /abc$/;
console.log(reg.test('abc')); // true
console.log(reg.test('qweabc')); // true
console.log(reg.test('aabcd')); // false
console.log('---------------------------');
var reg1 = /^abc$/; // 精确匹配 要求必须是 abc字符串才符合规范
console.log(reg1.test('abc')); // true
console.log(reg1.test('abcd')); // false
console.log(reg1.test('aabcd')); // false
console.log(reg1.test('abcabc')); // false
字符集合与"^“和”$"一起使用
// 三选一 只有是a 或者是 b 或者是c 这三个字母才返回 true
var rg1 = /^[abc]$/;
console.log(rg1.test('aa'));//false
console.log(rg1.test('a'));//true
console.log(rg1.test('b'));//true
console.log(rg1.test('c'));//true
console.log(rg1.test('abc'));//false
//26个英文字母任何一个字母返回 true - 表示的是a 到z 的范围
var reg = /^[a-z]$/
console.log(reg.test('a'));//true
console.log(reg.test('z'));//true
console.log(reg.test('A'));//false
//字符组合
// 26个英文字母(大写和小写都可以)任何一个字母返回 true
var reg1 = /^[a-zA-Z0-9]$/;
//取反 方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 false 。
var reg2 = /^[^a-zA-Z0-9]$/;
console.log(reg2.test('a'));//false
console.log(reg2.test('B'));//false
console.log(reg2.test(8));//false
console.log(reg2.test('!'));//true
- 字符类
将直接量字符单独放进方括号内就组成了字符类，一个字符类可以匹配它所包含的任意字符。
| 字符类 | 含义 |
|---|---|
| . | 匹配除换行符\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] |
测试：
- “.” 除换行符\n和回车符之外的任何单个字符
var str = '\nHello World Hello\r JavaScript';
console.log(str);
var reg1 = /./g;
console.log(reg1.exec(str));
//结果：
Hello World Hello
JavaScript
[
'H',
index: 1,
input: '\nHello World Hello\r JavaScript',
groups: undefined
]
- \d 匹配一个数字字符，等效于[0-9]
// 以数字开头
var str = '123Hello World Hello 123JavaScript';
console.log(str);
var reg1 = /^\d/g;
console.log(reg1.exec(str));
//结果
123Hello World Hello 123JavaScript
[
'1',
index: 0,
input: '123Hello World Hello 123JavaScript',
groups: undefined
]
- \s 匹配任何Unicode空白字符，包括空格、制表符、换页符等，等效于[\f\t\n\r]
// 以空白字符开头
var str = '\nHello World Hello 123JavaScript';
console.log(str);
var reg1 = /^\s/g;
console.log(reg1.exec(str));
//结果：
Hello World Hello 123JavaScript
[
'\n',
index: 0,
input: '\nHello World Hello 123JavaScript',
groups: undefined
]
6、正则表达式中的数量词
数量词
| 字符 | 含义 |
|---|---|
| * | >=0次 |
| + | ≥1 次 |
| ？ | 0或1次 |
| {n} | n 次 |
| {n,} | ≥n 次 |
| {n,m} | n到m 次 |
例如:
// * 允许出现0次或多次
var reg = new RegExp(/^a*$/);
console.log(reg.test("a")); // true
console.log(reg.test("")); // true
- 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? 匹配前面的模式 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次的字符串（123456），然后再从剩余字符串（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、选择、分组、引用
7.1 选择
字符"|"用于分隔供选择的字符，选择项的尝试匹配次序是从左到右，直到发现了匹配项，如果左边的选择项匹配到了，则不会继续向右进行匹配。
var reg = /html|css|js/
console.log(reg.exec('qweqwehtmlcss'));
//[ 'html', index: 6, input: 'qweqwehtmlcss', groups: undefined ]
7.2 分组
例如下面的正则表达式可以匹配‘hellohellohello’
/hellohellohello/
其更简便的写法为
/(hello){3}/
- 候选
一个分组中可以有多个候选表达式，用 | 分隔
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 = '2021-08-29'
// 捕获之前先test/exec
reg.test(date)
console.log(RegExp.$1); //2021
console.log(RegExp.$2); //08
console.log(RegExp.$3); //29
$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
7.3 引用
正则表达式里也能进行引用，这称为反向引用。
如下：
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
（1）匹配字符串中符合正则表达式的字符串，并返回该字符串的一个数组，其中包括字符串内容、位置
（2）如果正则设置全局匹配，则一次性返回所有符合正则表达式的字符串数组
（3）如果其中添加了分组，返回符合要求的字符串以及分组的一个数组，但如果同时开启全局匹配则不会在数组中添加分组内容
例如：
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
以某种形式分割字符串
例如：
var str = "terry134hello156lisi12zhangsan";
// 当数字出现一次或多次时进行分割
var reg = /\d+/;
var result = str.split(reg);
console.log(result); // [ 'terry', 'hello', 'lisi', 'zhangsan' ]
- 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.
练习题
- 匹配qq号
//要求：不能以数字0开始，只能由数字组成，长度为5-11位
var reg = /^[1-9]\d{4,10}$/;
var str1 = "12311111111";
var result1 = reg.test(str1); //true
console.log(result1);
- 匹配身份证号
//要求：不能以数字0开头，只能由数字组成，最后一位可能是x，X，长度为18位
var reg = /^[1-9]\d{16}[xX\d]$/;
var str = "456337189654326541";
var result = reg.test(str); //true
console.log(result);
- 验证是否为11位有效手机号码
//要求：以1开头，第二位为3，4，5，7，8中的任意一位，其他位为0~9的整数。
var reg = /^1(3|4|5|7|8)\d{9}$/;
var str = "13543211239";
var result = reg.test(str);
console.log(result); //true
- 密码验证
//要求:必须包含字母大写，小写,数字,和特殊字符(!,@,#,%,&),且大于6位
var reg = /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&*]+$)(?![\d!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$/
var str = "&Fan1234";
var result = reg.test(str);
console.log(result) //true
