JavaScript正则表达式(完整版)

闽哲
2023-12-01

JavaScript正则表达式

1. 构建正则表达式

  1. 字面量创建

    var reg = /正则表达式/修饰符
    
  2. 构造函数创建

    var reg = new RegExp('正则表达式','修饰符')
    

修饰符

​ i: ignoreCase, 匹配忽视大小写

​ m: multiline , 多行匹配

​ g: global , 全局匹配

2. 正则表达式调用(实例方法)

1. exec

​ 匹配字符串和正则表达式的方法,

​ 匹配成功:

​ 返回一个数组 [匹配内容,index:匹配的起始位置,input:要匹配的字符串, group:undefined]

​ 匹配失败:

​ 返回null

var str = 'hello world hello';
var reg = /hello/g;
console.log(reg.exec(str))
//返回[ 'hello', index: 0, input: 'hello world hello', groups: undefined ]

2. test

​ 测试待检测的字符串是或否能匹配到,匹配到返回true,否则返回false

var str = 'hello world hello';
var reg = /hello/;//匹配hello
console.log(str.test(str))//返回true

3. lastIndex

​ 没设置全局匹配,返回值都为0;

​ 设置全局匹配后,匹配到对于字符lastIndex指向改字符的结束位置,在执行exec返回null时lastIndex归零。

var str = 'a a a'
var reg1 = /a/;
var reg2 = /a/g;

console.log(reg1.lastIndex);  // 0
console.log(reg1.exec(str));  // 返回第一个a
console.log(reg1.lastIndex);  // 0

console.log(reg2.lastIndex);  // 0
console.log(reg2.exec(str));  // 返回第一个a
console.log(reg2.lastIndex);  // 1

console.log(reg2.lastIndex);  // 1
console.log(reg2.exec(str));  // 返回第二个a
console.log(reg2.lastIndex);  // 3

console.log(reg2.lastIndex);  // 3
console.log(reg2.exec(str));  // 返回第三个a
console.log(reg2.lastIndex);  // 5

console.log(reg2.exec(str));  //返回 null

console.log(reg2.lastIndex);  // 0
console.log(reg2.exec(str));  // 返回第一个a

3. 正则表达式元字符

字符匹配
字母和数字字符自身
\oNull字符
\t制表符
\n换行符
\v垂直制表符
\f换页符
\r回车符
字符类含义
.匹配除换行符\n和回车符之外的任何单个字符,等效于**[^\n\r]**
\d匹配一个数字字符,等效于[0-9]
\D[^0-9]
\w匹配包括下划线的任何单个字符,包括AZ,az,0~9和下划线**""**,等效于[a-zA-Z0-9]
\W[^a-zA-Z0-9_]
\s匹配任何Unicode空白字符,包括空格、制表符、换页符等,等效于[\f\t\n\r]
\S[^\f\t\n\r]

1. []的用法

​ 用法:匹配[]之中的某一个字符。

​ 例如:[0-9] 查找0-9之中任意一个字符,[abc]匹配a,b,c之中一个字符

var str = 'ab';
var reg = /[abc]/;//匹配abc任意一个字符
var reg1 = /abc/;//匹配abc
console.log(reg.test(str));//返回true
console.log(reg1.test(str));//返回false

2. ^符号的使用

  1. 反义字符

    例如: [ ^abc]匹配除了abc之外的字符

    var str = 'ab1';
    var str2 = 'abc';
    var reg1 = /[^abc]/;//匹配abc之外的字符
    console.log(reg.test(str));//返回true
    console.log(reg1.test(str2));//返回false
    
  2. 边界符

    ^表示匹配开始的字符

    var str = 'abc';
    var str1 = '1abc'
    var reg = /^abc/;//匹配以abc开头的字符
    console.log(reg.test(str));//返回true
    console.log(reg.test(str1));//返回false
    

3. $符号的使用

​ 边界符

​ $表示匹配结束位置的字符

var str = 'abc';
var str1 = '1abc'
var reg = /abc$/;//匹配以abc结尾的字符
console.log(reg.test(str));//返回true
console.log(reg.test(str1));//返回true

^和$共同使用(精确匹配)只有和匹配的字符完全相同才匹配成功

var str = 'abc';
var str1 = '1abc'
var reg = /^abc$/;//匹配以abc结尾的字符
console.log(reg.test(str));//返回true
console.log(reg.test(str1));//返回false

4. 字符匹配出现次数

字符含义
*>=0次
+≥1 次
0或1次
{n}n 次
{n,}≥n 次
{n,m}n到m 次

使用方式

var str = 'abc abcabc';
var reg = /abc{3}/;//匹配以abc出现三次
console.log(reg.test(str));//返回true

5. 贪婪模式

​ 默认为贪婪模式,尽可能匹配多的

​ 非贪婪模式:尽可能匹配少的,在数量前加?改变为非贪婪模式

var str = '123456789';
var reg = /\d{3,6}/g;
console.log(reg.exec(str)); //[ '123456', index: 0, input: '123456789', groups: undefined ]贪婪模式

var reg2 = /\d{3,6}?/g
console.log(reg2.exec(str)); //[ '123', index: 0, input: '123456789', groups: undefined ]贪婪模式

6. 选择,分组 ,引用

1. 选择

​ 使用|来进行选择 找到组内对应的某一个就返回

var reg = /html|css|js/
console.log(reg.exec('abchtmlcss')); // html
2. 分组

​ 使用()来进行分组

var reg = /aaa/
var reg2 = /(a){3}/
//reg 和 reg2 效果相同

也可以将分组和选择共同使用

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
3. 引用

​ 捕获使用 使用RegExp.$来捕获分组内的内容

var reg = /(\d{4})-(\d{2})-(\d{2})/

var date = '2021-08-29'

reg.test(date)
// 捕获之前要先test/exec
console.log(RegExp.$1); //2021
console.log(RegExp.$2); //08
console.log(RegExp.$3); //29

​ 将捕获的内容进行使用

var reg = /(\w{3}) is \1/ //\1代表捕获第一个分组内的内容
console.log(reg.test('aaa is aaa')); // true
console.log(reg.test('baa is baa')); // true
console.log(reg.test('abb is aaa')); // false
console.log(reg.test('aba is bab')); // false

7. String方法在正则表达式中的使用

1. search 使用和exec类似

​ 有则返回第一次出现的索引,否则返回-1

var str = 'hello';
var reg = /[hello]/;

// exec
console.log(reg.exec(str));
//返回 [ 'h', index: 0, input: 'hello', groups: undefined ]

// search 返回第一个索引
console.log(str.search(reg));// 0
2. match

​ 不加全局匹配时和exec一样,加了之后返回查找的字符

var str = 'hello world hello';
var reg1 = /hello/;
var reg2 = /hello/g;

console.log(str.match(reg1));
//[ 'hello', index: 0, input: 'hello world hello', groups: undefined ]
console.log(str.match(reg2));//[ 'hello', 'hello' ]
3. split

​ 切割字符串

var str = 'add123sum456zhangsan789lisi'
var reg = /\d+/
console.log(str.split(reg));//[ 'add', 'sum', 'zhangsan', 'lisi' ]
4. replace

​ 替换满足正则表达式的内容

var str = 'Hello123 Hello World Hello javascript123'
// 如果开启全局模式 则替换所有满足条件的字符
var reg = /\bHello\b/g;
// replace(正则表达式, 要替换的内容)
var result = str.replace(reg, 'java');
console.log(result); //Hello123 java World java javascript123
console.log(str); //Hello123 Hello World Hello javascript123

8. 前瞻表达式

由于在js中不支持后瞻表达式,所以不进行了解

(?=exp) 正向前瞻 匹配后面满足表达式exp的位置

var str = 'Hello, Hi, Hi.';
// 后面一定要匹配什么
var reg = /H(?=i)/g;
var newStr = str.replace(reg, "T");
console.log(newStr);//Hello, Ti,Ti.
 类似资料: