JS正则表达式

最新推荐文章于 2022-05-09 20:51:53 发布

骤雨f

最新推荐文章于 2022-05-09 20:51:53 发布

阅读量187

点赞数 1

分类专栏： JavaScript 文章标签：正则表达式 javascript

本文链接：https://blog.csdn.net/Brycee/article/details/120179243

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

什么是正则表达式？

正则表达式可以是由一个字符序列形成的搜索模式。当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。

正则表达式的创建

字面量

var reg = /正则表达式/修饰符;
var reg = /hello/g;

构造函数

var reg = new RegExp("正则表达式","修饰符");
var reg = new RegExp("hello","g");

字符分类

普通字符

字母、数字、下划线、汉字、没有特殊含义的符号（,;!@等）

实际上不是特殊字符的字符都是普通字符

特殊字符

\：将特殊字符转义成普通字符

模式修饰符

i：ignoreCase，匹配时忽视大小写

　　m：multiline，多行匹配

　　g：global，全局匹配

　　字面量创建正则时，模式修饰符写在一对反斜线后

正则表达式实例方法

exec

可用来匹配字符串中符合正则表达式的字符串

返回值是一个数组：

[匹配的内容，index: 在str中匹配的起始位置，input: 参数字符串，groups: undefined]，

匹配不到返回null

var str = 'hello world, hello js';
var reg1 = /hello/;
var reg2 = /hello/g;
var reg3 = /ellc/;
console.log(reg1.exec(str));//[ 'hello',index: 0,input: 'hello world, hello js',groups: undefined ]
console.log(reg2.exec(str));//[ 'hello',index: 0,input: 'hello world, hello js',groups: undefined ]
console.log(reg3.exec(str));//null

注意：

1)如果正则表达式中有修饰符"g",这时，在正则表达式的实例reg中会维护lastIndex属性，记录下一次开始的位置，当第二次执行exec的时候，从lastIndex开始检索。

2)如果正则表达式中没有修饰符"g",不会维护lastIndex属性，每次执行从开始位置检索

test

用来测试待检测的字符串中是否有可以匹配到正则表达式的字符串，如果有返回true，否则返回false

var str = 'hello world, hello js';
var reg1 = /hello/;
var reg2 = /helle/;
console.log(reg1.test(str));//true
console.log(reg2.test(str));//false

注意：

1)如果正则表达式中有修饰符"g",这时，在reg中会维护lastIndex属性，记录下一次开始的位置，当第二次执行test的时候，从lastIndex开始检索。2)如果正则表达式中没有修饰符"g",不会维护lastIndex属性，每次执行从开始位置检索

toString/toLocaleString

把正则表达式的内容转化成字面量形式字符串/有本地特色的字符串（JS中没效果）

var reg1 = /hello/;
console.log(reg1.toString()); //返回 /hello/ 字符串
console.log(reg1.toLocaleString()); //返回 /hello/ 字符串

valueOf

返回正则表达式本身

var reg1 = /hello/;
console.log(reg1.valueOf());  // 返回正则表达式本身

正则表达式实例属性

lastIndex

当没设置全局匹配时，该属性值始终为0

设置了全局匹配时，每执行一次exec/test来匹配，lastIndex就会移向匹配到的字符串的下一个位置，当指向的位置后没有可以再次匹配的字符串时，下一次执行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、global、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

正则表达式语法-元字符

直接量字符

字符	匹配
字母和数字字符	自身
\o	Null字符
\t	制表符
\n	换行符
\v	垂直制表符
\f	换页符
\r	回车符

字符集合

匹配集合中的任意一个字符。你可以使用连字符‘-’指定一个范围

[abc] 查找方括号之间的任何字符

var str = 'abc qwe abd'
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.exec(str)); //true

边界符

^ 匹配输入开始。表示匹配行首的文本（以谁开始)。如果多行（multiline）标志被设为 true，该字符也会匹配一个断行（line break）符后的开始处。

$ 匹配输入结尾。表示匹配行尾的文本（以谁结束）。如果多行（multiline）标志被设为 true，该字符也会匹配一个断行（line break）符的前的结尾处。

如果 ^和 $ 在一起，表示必须是精确匹配。

var rg = /abc/; 
// /abc/ 只要包含有abc这个字符串返回的都是true
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

\b 匹配一个零宽单词边界（zero-width word boundary），表示一个单词（而非字符）边界，也就是单词和空格之间的位置，或者字符（\w）与字符串开头或者结尾之间的位置。

\B 匹配一个零宽非单词边界（zero-width non-word boundary），与"\b"相反。

字符类

将直接量字符单独放进方括号内就组成了字符类，一个字符类可以匹配它所包含的任意字符。例如：/[abc]/ 就和字母"a"、"b"、"c"中的任意一个都匹配。"^"符号用来定义否定字符类，例如：/[^abc]/ 匹配的是"a"、"b"、"c"之外的所有字符。字符类可以使用连字符来表示字符范围，例如：/[a-z]/，要匹配拉丁字母表中任何字母和数字，[a-zA-Z0-9]

字符类	含义
.	匹配除换行符\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));

\d 匹配一个数字字符，等效于[0-9]

// 以数字开头
var str = '123Hello World Hello 123JavaScript';
console.log(str);
var reg1 = /^\d/g;
console.log(reg1.exec(str));

\D 等效于[^0-9]

// 不以数组开头
var str = 'Hello World Hello 123JavaScript';
console.log(str);
var reg1 = /^\D/g;
console.log(reg1.exec(str));

\w匹配包括下划线的任何单个字符，包括A~Z，a~z，0~9和下划线"_"，等效于[a-zA-Z0-9_]

\W [^a-zA-Z0-9_]

var str = '!Hello World Hello JavaScript';
// \w -> [a-zA-Z0-9_]
var reg1 = /^\w/;
console.log(reg1.test(str));
// \W -> [^a-zA-Z0-9_]
var reg2 = /^\W/;
console.log(reg2.test(str));

\s 匹配任何Unicode空白字符，包括空格、制表符、换页符等，等效于[\f\t\n\r]

// 以空白字符开头
var str = '\nHello World Hello 123JavaScript';
console.log(str);
var reg1 = /^\s/g;
console.log(reg1.exec(str));

\S 等效于[^\f\t\n\r]

// 不以空白字符开头
var str = 'Hello World Hello 123JavaScript';
console.log(str);
var reg1 = /^\S/g;
console.log(reg1.exec(str));

数量词

字符	含义
*	>=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? 匹配前面的模式 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 ]

选择，分组，引用

选择

字符"|"用于分隔供选择的字符，选择项的尝试匹配次序是从左到右，直到发现了匹配项，如果左边的选择项匹配，就忽略右边的匹配项，即使它可以产生更好的匹配。

var reg = /html|css|js/
console.log(reg.exec('qweqwehtmlcss')); // html

分组

下面的正则表达式可以匹配'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-09-08'
reg.test(date)
// 捕获之前要先test/exec
console.log(RegExp.$1); //2021
console.log(RegExp.$2); //09
console.log(RegExp.$3); //08

$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引用了第一个被分组所捕获的串，换言之，表达式是动态决定的。

注意，如果编号越界了，则会被当成普通的表达式

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 = "bry134bbaa15hhh12zhang";
// 当数字出现一次或多次时
var reg = /\d+/;
var result = str.split(reg);
console.log(result); //[ 'bry', 'bbaa', 'hhh', 'zhang' ]

前瞻表达式

在正则表达式当中有个东西叫做前瞻，有的管它叫零宽断言：

表达式	名称	描述
(?=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.

在这个例子中我们可以看出正向前瞻的作用，同样是字符"H"，但是只匹配"H"后面紧跟"i"的"H"。

负向前瞻呢

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.

在这个例子中，我们把之前的正向前瞻换成了负向前瞻。这个正则的意思就是，匹配"H",且后面不能跟着一个"i"。