Js进阶29-正则表达式专题

一、正则表达式概述

正则表达式（Regular Expression，简称RegExp）是用于匹配字符串的一种模式、规则。

正则表达式定义最常用的方法是使用字面量，写法是两个反斜杆（//），这两个反斜杆经常称之为定界符。

正则表达式在 JS 当中属于引用数据类型。

console.log(/abc/); // /abc/
console.log(typeof /我爱你/); // object

正则表达式的创建方式有字面量和构造函数两种方式。

// 1.字面量方式
const reg = /abc/; // 正则表达式的字面量
// 2.构造函数方式
const reg2 = new RegExp('abc'); // 正则表达式的构造函数

二、字符串方法结合正则表达式

1. split

使用正则表达式或指定字符串分割字符串，返回一个包含分割后的各个子串的数组。

const str = '我很喜欢中国 上海       哈尔滨               北京';
// 用一个或多个空格分割字符串
const arr = str.split(/\s+/);
console.log(arr); // ["我很喜欢中国", "上海", "哈尔滨", "北京"]

这里 \s 表示一个空格，+ 在正则当中代表的是量词，表示一个或多个 。

例2-1： 用字符 a 切割字符串

const str = "bbaacaaaadddaeeeeeaaf";
const arr = str.split(/a+/);
console.log(arr); // ["bb", "c", "dddd", "eeee", "f"]

2. match 

使用正则表达式或指定字符串进行匹配，返回匹配结果的数组。

const str = '我很喜欢张杰的歌曲，因为张杰的歌曲就是好听';
let arr = str.match(/张杰/); // 只能匹配从左到右第1个
console.log(arr); // ["张杰", index: 4, input: "我很喜欢张杰的歌曲，因为张杰的歌曲就是好听", groups: undefined]
arr = str.match(/张杰/g);
console.log(arr); // ["张杰", "张杰"]

这里 g 表示全局匹配，fenjiefu它主要的作用是可以将全部符合条件的字符串都匹配出来。修饰符只能放在正则表达式右定界符的后面。

例2-2-1 在 'abbcccbbbbbddbbbdabbb' 中查询重复 'b' 字符串

const str = 'abbcccbbbbbddbbbdabbb';
const arr = str.match(/b+/g);
console.log(arr); // ["bb", "bbbbb", "bbb", "bbb"]

例2-2-2 在 'aaaa o  o bbb o   o aaa' 中找寻所有 'o  o' 字符串

const str = 'aaaa o  o bbb o   o aaa';
const arr = str.match(/o\s+o/g);
console.log(arr); // ["o  o", "o   o"]

3. search

使用正则表达式或指定字符串进行匹配，返回第1个符合条件的字符串的索引。

const str = '今天北京下了大暴雨北京';
console.log(str.search('北京')); // 2
console.log(str.search(/北京/g)); // 2

注意，第2个正则表达式中加了全局修饰符 g，但 search 方法仍只能查询出1个结果。

例3-1 在 'abbcddeffbbnbbbbb' 中查询第1个 'b' 的索引值

const str = 'abbcddeffbbnbbbbb';
console.log(str.search(/b+/)); // 1

4. replace

使用正则表达式或指定字符串进行匹配，将匹配到的字符串替换为指定字符串。

const str = '我喜欢汪峰，因为汪峰的歌曲很好听';
console.log(str.replace('汪峰', '张杰')); // 我喜欢张杰，因为汪峰的歌曲很好听
console.log(str.replace(/汪峰/g, '张杰')); // 我喜欢张杰，因为张杰的歌曲很好听

例2-4-1 将 'www.hello.com' 替换成 'www.byebye.com'

const str = 'www.hello.com';
console.log(str.replace(/hello/g, 'byebye')); // www.byebye.com

例2-4-2 过滤字符串 'aa  b   c  d e     f   ' 中的空格

const str = 'aa  b   c  d e     f   ';
console.log(str.replace(/\s+/g, '')); // aabcdef

三、正则表达式方法

1. exec

在目标字符串中执行一次正则匹配操作，参数为目标字符串。

const reg = /abc/;
console.log(reg.exec(str)); // ["abc", index: 3, input: "aaaabccccbacabc", groups: undefined]

例3-1  在 'oooooo  0    0  ooooooo' 字符串中匹配 'o  0  0  o'

const str = 'oooooo  0    0  ooooooo';
const reg = /o\s+0\s+0\s+o/;
console.log(reg.exec(str)); // ["o  0    0  o", index: 5, input: "oooooo  0    0  ooooooo", groups: undefined]

2. test

测试当前正则是否能匹配目标字符串，参数为目标字符串。

const str = '我很喜欢中国      空气';
const reg = /\s+/;
console.log(reg.test(str)); // true

例3-2 检测 'a bc' 和 'abc' 是否包含空格

const str1 = 'a bc';
const str2 = 'abc';
const reg = /\s+/;
console.log(reg.test(str1)); // true
console.log(reg.test(str2)); // false

四、正则表达式元素

1. 字符集

(1) 简单类

任意多个字符进行集合书写，匹配某一个符合条件的字符。比如：[abc] [123]等。

const str = "我喜欢abc，但是我也喜欢bbc";
console.log(str.match(/[ab]bc/g)); // ["abc", "bbc"]

例4-1 在 '我喜欢歌手张杰的歌曲，但是也喜欢张宇的歌曲' 中匹配 '张杰' 和 '张宇'

const str = "我喜欢歌手张杰的歌曲，但是也喜欢张宇的歌曲";
console.log(str.match(/张[杰宇]/g)); // ["张杰", "张宇"]

(2) 范围类

有时匹配的东西过多而且类型又相同，全部输入太麻烦，我们可以在中间加个横线（-）。比如：[0-9] [A-Z] [a-z]等。

const str = "我喜欢12306电话，也喜欢110";
console.log(str.match(/[0-9]+/g)); // ["12306", "110"]

(3) 组合类

组合类即为将多个简单类和范围类组合在一起。允许用中括号匹配不同类型的单个字符，或者是一类及多类，或者一些单一的符号。比如：[0-9a-z]等。

const str4 = '我知道在A13单位有一个帅哥，在b29单位有一个美女';
console.log(str4.match(/[A-Za-z][0-9]+/g)); // ["A13", "b29"]

2. 修饰符

在正则表达式中，修饰符可以同时书写多个，修饰符位置一定在右定界符后面。

(1) g 修饰符

g（global）修饰符用于执行全局匹配（查找所有匹配而非在找到一个匹配后停止）。

const url = 'http://www.baidu.com';
console.log(url.match(/[a-z]+/g)); // ["http", "www", "baidu", "com"]

(2) i 修饰符

i（ignore）修饰符用于执行对大小写不敏感的匹配。

const url = 'http://www.BAIDU.com';
console.log(url.match(/[a-z]+/gi)); // ["http", "www", "BAIDU", "com"]

3. 边界符

^	开头	表示字符串必须以 ^ 后面的内容作为开头
$	结尾	表示 $ 前面匹配的结果必须位于字符串最后

// ^：匹配字符串的开始位置
const str = 'web是世界上最好的语言';
console.log(/^web/.test(str)); // true

// $：匹配字符串的结束位置
const str = '我非常喜欢react框架中的jsx';
console.log(/jsx$/.test(str)); // true

在正则表达式中，边界符不一定必须要写。如果使用了，^ 边界符一定是出现在左定界符后面，$ 一定是出现在右定界符前面。

const str = 'hello';
console.log(/^hello$/.test(str)); // true

4. 预定义类

正则表达式中的预定义类是一组特定的符号，它们代表了常用的字符集合。

预定义类	描述
.	匹配除换行符以外的任意单个字符
\d	匹配任意数字，等价于 [0-9]
\D	匹配任意非数字字符，等价于 [^0-9]
\s	匹配任意空白字符，包括空格、制表符、换页符等，等价于 [ \f\n\r\t\v]
\S	匹配任意非空白字符，等价于 [^ \f\n\r\t\v]
\w	匹配任意字母、数字、下划线，等价于 [A-Za-z0-9_]
\W	匹配任意非单词字符，等价于 [^A-Za-z0-9_]

// \d：匹配任意一个数字字符，相当于[0-9]
const str1 = '我今天买了一个华为30，花了我5888元';
console.log(str1.replace(/[0-9]+/g, '*')); // 我今天买了一个华为*，花了我*元
console.log(str1.replace(/\d+/g, '*')); // 我今天买了一个华为*，花了我*元

// \D：匹配任意一个非数字字符，相当于[^0-9]
const str2 = '我很喜欢海南，因为海南温度36度';
console.log(str2.replace(/\D+/g, 'x')); // x36x

// \s：匹配任意一个空白字符，相当于[\t\n\r\f\v]
const str3 = '我是祖国的      花  骨  朵';
console.log(str3.replace(/\s+/g, '')); // 我是祖国的花骨朵

// \S：匹配任意一个非空白字符，相当于[^\t\n\r\f\v]
const str4 = '我知道  你今年 30岁了';
console.log(str14.replace(/\S+/g, 'o')); // o  o o

const str5 = '我知道JavaScript当中一个函数库underscore，利用下划线_';

// \w：匹配任意一个单词字符（字母、数字、下划线），相当于[A-Za-z0-9_]
console.log(str5.match(/\w+/g)); // ["JavaScript", "underscore", "_"]

// \W：匹配任意一个非单词字符，相当于[^A-Za-z0-9_]
console.log(str5.replace(/\W+/g, 'o')); // oJavaScriptounderscoreo_

// .：匹配除换行符之外的任意一个字符
const str6 = '.匹配除换行符之外的任意一个字符';
console.log(str6.match(/./g)); // [".", "匹", "配", "除", "换", "行", "符", "之", "外", "的", "任", "意", "一", "个", "字", "符"]

5. 量词

正则表达式中的量词用于指定一个字符或字符集合必须出现的次数。如果需要将正则表达式的某个符号连续匹配多次，就可以使用量词对符号进行修饰。

量词的写法：{}，内部书写对应的数字，表示量词是多少。

量词	描述
{n}	匹配前面的元素恰好 n 次
{n,m}	匹配前面的元素至少 n 次，但不超过 m 次
{n,}	匹配前面的元素至少 n 次
?	匹配前面的元素零次或一次
*	匹配前面的元素零次或多次
+	匹配前面的元素一次或多次

// {n}：匹配前面的字符出现n次
const str1 = '我今年高考，考了688分，距离清华大学还差10分';
console.log(str1.match(/\d{3}/g)); // ["688"]

// {n,m}：匹配前面的字符出现n到m次
const str2 = '我知道javascript很厉害，因为HTML与CSS完美结合';
console.log(str2.replace(/\w{4,20}/g, 'x')); // 我知道x很厉害，因为x与CSS完美结合

// {n,}：匹配前面的字符出现至少n次
const str3 = '我今年买了一台车，花了我300元，借用他人50000元';
console.log(str3.match(/[0-9]{3,}/g)); // ["300", "50000"]

const str4 = '我喜欢明星郭达';

// ?：匹配前面的字符出现0次或1次，相当于{0,1}
console.log(/郭?/.test(str4)); // true

// +：匹配前面的字符出现至少1次，相当于{1,}
console.log(/张+/.test(str4)); // false

// *：匹配前面的字符出现任意次，相当于{0,}
console.log(/王*/.test(str4)); // true

6. 分组

正则表达式中使用小括号()表示分组，内部的内容会作为一个整体进行操作。

如果小括号后有量词，表示小括号内部整体重复匹配多少次。

// 分组：用小括号将一系列字符括起来，称为一个子表达式，这个子表达式可以是一个字符，也可以是一个正则表达式，也可以是一个字符类，也可以是一个带有修饰符的正则表达式。
const str = 'byebye';
console.log(/(bye){2}/.test(str)); // true

7. 或

用竖线|表示或者的意思，表示匹配多个表达式中的一个。

const str2 = '我喜欢张杰的歌曲，但是也喜欢张宇的歌曲';
console.log(str2.match(/张杰|张宇/g)); // ["张杰", "张宇"]

五、汉字

固定字符集写法：[\u4e00-\u9fa5]，可以匹配一个任意的中文汉字。

[\u4e00-\u9fa5]

// 汉字匹配：[\u4e00-\u9fa5]，匹配任意一个的汉字
const str3 = '老师1每天在2腾讯课3堂中都4有5直播';
console.log(str3.replace(/[\u4e00-\u9fa5]+/g, 'k')); // k1k2k3k4k5k