14-js正则表达式

正则表达式

RegularExpression，简称RegExp

规则表达式：用来检测字符串是否符合规则

书写方式：由一些特殊符号按照指定语法书写

一、正则表达式的创建

1. 字面量

语法：双斜杠 / ??? /标识符

const reg1 = /abc/;
console.log(reg1.test("abc123")) // true
console.log(reg1.test("a12")) // false
1
2
3

2. 构造函数

语法：new RegExp("???","标识符")

const reg2 = new RegExp("abc");
console.log(reg2.test("abc123"));// true
console.log(reg2.test("a12"));// false
1
2
3

二、正则表达式中的符号

1. 基础元字符

• . 匹配非换行的任意字符
• \ 转义字符，把有意义的符号变成没有意义的字符串，可以把没有意义的字符串变成有意义的
• \d 匹配数字
• \D 匹配非数字
• \s 匹配空白字符
• \S 匹配非空白字符
• \w 匹配字母|数字|下划线
• \W 匹配非字母|数字|下划线
• \n 换行

使用基础元字符，可以指定一些简单的规则

const reg = /\s/ // 匹配空格
const reg = new RegExp("\\w") //匹配字母数字下划线（\w输出是w,\\w输出才是\w）
1
2

2. 边界符

限制字符串的开始和结束

• ^ 表示开头
• $ 表示结尾
• ^$ 表示精确匹配

const reg1 = /^\d\d/ // 开头是两个数字
const reg2 = /\d\d\d$/ // 结尾是三个数字
const reg3 = /^\d\d\d$/ // 只有三个数字
1
2
3

3. 限定符

• * 表示前一个内容至少出现0次
• + 表示前一个内容至少出现1次
• ? 前一个内容出现0或1次
• {n} 前一个内容出现n次，必须出现n次
• {n,} 前一个内容至少出现n次
• {n,m} 前一个内容至少出现n次，至多m次。

没有精确匹配的情况下，出现多次也满足规则。

限定符一般配合基础元字符使用

// 用户名/密码 ：只能包含字母数字下划线，6-12个字符
const reg = /^\w{6,12}$/;
1
2

4. 特殊符号

• () 限定一组元素
• [] 字符集合，表示写在[]里面的任意一个都行，一个[]表示一个字符
• [^] 反字符集合，表示不能是写在[]里面任意一个，一个[^]就表示一个字符
• - 表示范围，一般在[]内使用，比如a-z表示从字母a到z中的任意一个：[0-9],[a-zA-Z]
• | 表示或者，比如a|b，表示a或者b都可以

// 1. 只能由1或8或7开头
const reg = /^[187]/
// 2. 长度是6-12个字符，不能以数字开头
const reg = /^[^\d].{5,11}$/
const reg = /^\D.{5,11}$/
// 4. 匹配姓名（2-4个汉字）
// 汉字的编码范围：4E00-9FA5
const reg = /^[\u4E00-\u9FA5]{2,4}$/
// 5. 匹配a或者b开头
const reg = /^[ab]/
const reg = /^(a|b)/
// 6. 字符串开始有空格或者末尾有空格
const reg = /^(\s+)|(\s+)$/
1
2
3
4
5
6
7
8
9
10
11
12
13

5. 标识符

• i 表示忽略大小写

  • 写在字面量：/\d/i
  • 写在构造函数：new RegExp('\\d','i')

• m 表示多行匹配

  （每一行的开头和结尾都算）

  • 字面量：/\d/m
  • 构造函数：new RegExp('\\d','m')

• g 表示全局匹配（常用）

  匹配所有符合条件的

  • 字面量：/\d/g
  • 构造函数：new RegExp('\\d','g')

// 1. 字符串中有abc，不区分大小写
const reg = /abc/i
const str = "abc123" // true
const str2 = "aBc" // true 
const str3 = "abbbc" // false
// 2. 字符串以w开头，多行匹配
const reg = /^w/m
const str = 'hello\nworld'
console.log(reg.test(str)) // true
1
2
3
4
5
6
7
8
9

三、正则表达式的常用方法

1. test

检测字符串是否符合正则的规则

语法：正则.test(字符串)

返回值：boolean 表示字符串是否符合正则

2. exec

将字符串中符合正则的内容捕获出来

语法：正则.exec(字符串)

返回值：将字符串中符合正则要求的第一项以及一些其他信息（groups,index,input），以数组形式返回

const reg = /\d+/
const str = "af5234sfw3456s24s22tc32"
console.log(reg.exec(str));//['5234']
const reg2 = /\d+/g //全局匹配
console.log(reg2.exec(str));//['5234']
console.log(reg2.exec(str));//['3456']
console.log(reg2.exec(str));//['24']
...
// 如果匹配完成，没有更多了，则返回null
1
2
3
4
5
6
7
8
9

四、字符串中与正则有关的常用方法

1. search

查找字符串中是否有满足正则的内容

语法：字符串.search(正则)

返回值：匹配到返回开始索引，没有返回-1

是否全局匹配不影响结果，永远返回第一个符合的索引

const reg = /\d{3}/
const str = "hello123world32s"
console.log(str.search(reg));//5 
1
2
3

2. match

捕获字符串中符合正则的内容并返回

语法：字符串.match(正则)

返回值：

• 没有标识符g，与exec方法是一样的返回值
• 有标识符g，返回一个数组，里面是匹配到的每一项

const reg = /\d{3}/
const str = "hello123world132s"
console.log(str.match(reg));//123
const reg2 = /\d{3}/g // 全局匹配
console.log(str.match(reg2));//['123','132']
1
2
3
4
5

3. replace

将字符串中符合正则条件的字符串替换掉

语法：字符串.replace(正则，要替换的字符串)

返回值：替换后的字符串

const reg = /\d{3}/ // 首个替换
const str = "hello123world132s"
console.log(str.replace(reg,'AAA'))//helloAAAworld132s
const reg2 = /\d{3}/g // 全局替换
console.log(str.replace(reg2,'AAA'))//helloAAAworldAAAs
1
2
3
4
5

// 需求：使用正则，去除字符串的前后空格
// 找到前后空格，替换为空字符串
let str = "    hello world    "
const reg = /(^\s+)|(\s+$)/g
str = str.replace(reg,"")
console.log(str)
1
2
3
4
5
6

五、正则表达式的两个特性

当正则表达式中包含重复的限定符时，有两个特性可以选择

1. 贪婪性 (默认启动)

在正则表达式匹配成功的前提下，匹配尽量多的字符

const str = "aabab"
const reg = /a.*b/ //默认贪婪
console.log(str.replace(reg,"1")) // 1
1
2
3

2. 懒惰性 (加?启动)

在正则表达式匹配成功的前提下，匹配尽量少的字符

• *? 重复任意次，尽可能少重复
• +？ 重复1次或更多次，尽可能少重复
• ?? 重复0次或1次，尽可能少重复
• {n,m}? 重复n次到m次，尽可能少重复
• {n,}? 重复n次到正无穷次，尽可能少重复

const reg = /a.*?b/ // 懒惰性
console.log(str.replace(reg,"1")) // 1ab
1
2