章节8.正则表达式

前言

关于正则表达式
基于同学们的强烈呼吁、回顾我们前面的第1季章节15搜索：addClass()和我们本季课程搜索：获取留言板输入的内容多次用到正则表达式、考虑到接下来的项目会更多用到正则表达式，我们本章节来学习一下正则表达式的相关知识。

正则表达式介绍 [正则表达式介绍] [正则表达式RegExp对象]
正则表达式(regular expression)是一个描述字符模式的对象。JS中的 RegExp 类表示正则表达式，而 String 和 RegExp 都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数(关于String的匹配检索替换我们已经在第1季-12章节基本包装类型-String类型讲过了)，但是当这个字符串变得很复杂，需要匹配的功能变得很强大的时候，我们的String字符串对象方法就变得有心无力了，这个时候就需要用我们的正则表达式来做匹配了。

正则表达式主要用来验证客户端的输入数据。用户填写完表单单击按钮之后，表单就会被发送到服务器，在服务器端通常会用 PHP、ASP.NET、Node.js、Java等服务器脚本对其进行进一步处理。因为客户端验证，可以节约大量的服务器端的系统资源，并且提供更好的用户体验。

关于正则表达式的用途现在大家都清楚了：帮我们验证数据的合法性、帮我们匹配数据等功能，大家在前面的课程已经初步体验过了，接下来我们先来创建正则表达式。

# 一、创建正则表达式

创建正则表达式和创建字符串类似，创建正则表达式提供了两种方法，一种是采用 new运算符，另一个是采用字面量方式（关于什么是new运算符、什么是字面量，这个我们在第1季js基础课程已经都讲过了，现在大家应该是轻松拿捏了）。

# ① new运算符创建正则表达式

let girl = new RegExp('DiLiReBa');//第一个参数是模式字符串
console.log(girl);//返回： /DiLiReBa/
//两个反斜杠 /DiLiReBa/ 就是正则表达式的字面量表示法，不过我们上面声明的时候用的new运算符
//第二个参数可选模式修饰符，可选项
let girl = new RegExp('DiLiReBa','ig');//第二个参数是可选项，可有可没有
console.log(girl);//返回：/DiLiReBa/gi
模式修饰符的可选参数

参数
含义

i 忽略大小写（就是匹配的时候不管你的字母是大写还是小写都是一个意思）

g 全局匹配（一个字符串里面有多少个字符：如 i,能找到i的字母都给它找出来）

m 多行匹配（字符串有多行的时候，如果不加m只会匹配第一行，加上m就可以匹配到所有行）

参数	含义
i	忽略大小写（就是匹配的时候不管你的字母是大写还是小写都是一个意思）
g	全局匹配（一个字符串里面有多少个字符：如 i,能找到i的字母都给它找出来）
m	多行匹配（字符串有多行的时候，如果不加m只会匹配第一行，加上m就可以匹配到所有行）

# ② 字面量方式创建正则表达式

let girl = /DiLiReBa/;     //字面量正则
console.log(girl);//返回： /DiLiReBa/
let _girl = /DiLiReBa/ig;  //字面量正则，带修饰符
console.log(_girl);//返回：/DiLiReBa/gi

# 二、测试正则表达式

RegExp 对象包含两个方法：test()和 exec()，功能基本相似，用于测试字符串匹配。test()方法在字符串中查找是否存在指定的正则表达式并返回布尔值，如果存在则返回 true，不存在则返回 false。exec()方法也用于在字符串中查找指定正则表达式，如果 exec()方法执行成功，则返回包含该查找字符串的相关信息数组。如果执行失败，则返回 null。

# ① test方法：在字符串中测试模式匹配，返回 true 或 false

let patter = new RegExp('DiLiReBa'); //模式
let str = 'dilireba';   //要匹配的字符串
//用法：模式.test(要匹配的字符串)
let res = patter.test(str); //test方法，返回布尔值
console.log(res); // 返回 false
//为什么是false, 因为模式和匹配的字符串不相等，因为字母大小写不一致

忽略大小写

let patter = new RegExp('DiLiReBa','i'); //模式，模式修饰符
let str = 'dilireba';   //要匹配的字符串
//用法：模式.test(要匹配的字符串)
let res = patter.test(str); //test方法，返回布尔值
console.log(res); // 返回 true
//为什么是true, 因为模式修饰符忽略了大小写，所以可以匹配到

字面量写法

let patter = /DiLiReBa/i;
let str = 'dilireba';
let res = patter.test(str);
console.log(res); // true

使用一句话匹配

let res = /DiLiReBa/i.test('dilireba');
console.log(res);//true

查找字符串中是否有匹配的字符

let patter = /dilireba/i;
let str = '迪丽热巴的拼音是：DiLiReBa,她的全名叫：迪丽热巴迪力木拉提';
console.log(patter.test(str));

# ② exec方法：在字符串中执行匹配搜索，返回结果数组，执行失败，则返回 null

let patter = /dilireba/i;
let str = '迪丽热巴的拼音是：DiLiReBa,她的全名叫：迪丽热巴迪力木拉提';
let res = patter.exec(str);
alert(res); // DiLiReBa
console.log(typeof res);//object
console.log(Array.isArray(res));//true 
//返回的是数组，有就返回数组的值，没有匹配到则返回null
let patter1 = /love/i;
alert(patter1.exec(str));//null

exec 方法还有其他具体应用，我们在学完后面一些内容之后再举例

# 三、字符串的正则表达式方法

我们上面讲的test方法、exec方法是正则表达式的测试方法，是正则表达式本身就具有的方法，接下来我们要讲的方法，是字符串String对象提供的4个方法，但是这四个方法可以用在正则表达式里面的。
回顾一下我们第二学期第1季-章节12.javascript基本包装类型-3、String类型-7.String类型字符串模式匹配方法搜索：String类型，其中有：match(pattern)、replace(pattern, replacement)、search(pattern)、split(pattern)这4个方法就可以用在正则表达式的模式匹配上，接下里我们再详细讲一下这4个方法。

# ① match方法：就是一个查找的功能，获取匹配的字符串，返回数组或 null

let patter = /dilireba/ig;//忽略大小写，全局匹配
let str = '迪丽热巴的拼音是：DiLiReBa，小写是：dilireba,她的全名叫：迪丽热巴迪力木拉提';
//接下来是用的字符串的方法，所以注意用法：字符串.方法
let res = str.match(patter);
console.log(res);// ['DiLiReBa', 'dilireba']
//注意：
//1. 如果不开启全局，则匹配第一个字符串返回数组 ['DiLiReBa']
console.log(res[0]);

# ② search方法：根据匹配的字符串，返回位置索引（从0开始）

let patter = /dilireba/ig;//忽略大小写，全局匹配
let str = '迪丽热巴的拼音是：DiLiReBa，小写是：dilireba,她的全名叫：迪丽热巴迪力木拉提';
//接下来是用的字符串的方法，所以注意用法：字符串.方法
let res = str.search(patter);
console.log(res);//返回：9 也就是第10个字符
//1、返回的第一个匹配的位置，找到后就返回了，不会往后面找
//2、因此匹配的时候，可以不用加 g
//3、找不到则返回 -1

# ③ split方法：按照匹配模式，拆分成字符串数组

let patter = /dilireba/ig;//忽略大小写，全局匹配
let str = '迪丽热巴的拼音是：DiLiReBa，小写是：dilireba,她的全名叫：迪丽热巴迪力木拉提';
//接下来是用的字符串的方法，所以注意用法：字符串.方法
let res = str.split(patter);
console.log(res);//返回：['迪丽热巴的拼音是：', '，小写是：', ',她的全名叫：迪丽热巴迪力木拉提']

# ④ replace方法：替换匹配到的数据

let patter = /dilireba/ig;//忽略大小写，全局匹配
let str = '迪丽热巴的拼音是：DiLiReBa，小写是：dilireba,她的全名叫：迪丽热巴迪力木拉提';
//接下来是用的字符串的方法，所以注意用法：字符串.方法
let res = str.replace(patter,'love');//返回替换后的字符串
console.log(res);//'迪丽热巴的拼音是：love，小写是：love,她的全名叫：迪丽热巴迪力木拉提'
//注意：
//1.要开启全局，才能全部匹配到，没有开启全局，则匹配第一个就返回了

# 小案例：模拟百度搜索，搜索的关键字设置成红色

$(function () {
  let str = `<div style="width:400px;margin:50px auto;">
  <p>美女的标准是什么：</p>
  <p>性感的身材属于美女的第一个标准</p>
  <p>大眼睛那是美女必须要具备的</p>
  <p>五官端正、高鼻梁、性感的大嘴唇才能叫美女</p>
  <div>`;
  $('body').append(str);
});

$(function () {

  let str = `<div style="width:400px;margin:50px auto;">
  <p>美女的标准是什么：</p>
  <p>性感的身材属于美女的第一个标准</p>
  <p>大眼睛那是美女必须要具备的</p>
  <p>五官端正、高鼻梁、性感的大嘴唇才能叫美女</p>
  <div>`;
  $('body').append(str);

  //把str中的“美女”文字变成红色
  let keyword = '美女';
  let patter = new RegExp(keyword, 'g');
  str = str.replace(patter, `<span style="color: red;">${keyword}</span>`);
  $('body').append(str);

  //把str中的“美女”“大”文字变成蓝色
  let arr = ['美女', '大'];
  for (const key of arr) {
    //  console.log(key);
    let patter = new RegExp(key, 'g');
    str = str.replace(patter, `<span style="color: blue;">${key}</span>`);

    if(key == '大'){
      str = str.replace(patter, `<span style="color: blue;font-size:30px">${key}</span>`);
    }else if(key == '美女'){
      str = str.replace(patter, `<span style="color: red;">${key}</span>`);
    }
  }
  $('body').append(str);
});

# 四、正则表达式RegExp对象的静态属性、实例属性（了解）

静态属性就是直接通过RegExp调用，无需声明无需new，实例属性就是需要先创建正则表达式new一个正则实例，在进行调用（学完我们前面的面向对象与原型，这个概念现在很容易理解）

# 1、静态属性

属性

短名
含义

input $_ 当前被匹配的字符串

leftContext $` 最后一次匹配前的子串

rightContext $' 在上次匹配之后的子串

lastMatch $& 最后一个匹配字符串

lastParen $+ 最后一对圆括号内的匹配子串

属性	短名	含义
input	$_	当前被匹配的字符串
leftContext	$`	最后一次匹配前的子串
rightContext	$'	在上次匹配之后的子串
lastMatch	$&	最后一个匹配字符串
lastParen	$+	最后一对圆括号内的匹配子串

console.log(RegExp.input);

let patter = /dilireba/ig;
let str = '迪丽热巴的拼音是：DiLiReBa，小写是：dilireba,她的全名叫：迪丽热巴迪力木拉提';
let res = str.match(patter);
console.log(res);
//执行一下即可

# ① 属性：input，短名：$_ ，当前被匹配的字符串

console.log(RegExp.input);
console.log(RegExp['$_']);
//'迪丽热巴的拼音是：DiLiReBa，小写是：dilireba,她的全名叫：迪丽热巴迪力木拉提'

# ② 属性：leftContext，短名：$` ，最后一次匹配前的子串

console.log(RegExp.leftContext);
console.log(RegExp['$`']);
//'迪丽热巴的拼音是：DiLiReBa，小写是：'

# ③ 属性：rightContext，短名：$' ，在上次匹配之后的子串

console.log(RegExp.rightContext);
console.log(RegExp['$\'']);
// ',她的全名叫：迪丽热巴迪力木拉提'

# ④ 属性：lastMatch，短名：$& ，最后一个匹配字符串

console.log(RegExp.lastMatch);//'dilireba'
console.log(RegExp['$&']);//'dilireba'

# ⑤ 属性：lastParen，短名：$+ ，最后一对圆括号内的匹配子串

let patter = /(d)ilireba/ig;
console.log(RegExp.lastParen);//d
console.log(RegExp['$+']);//d

# 2、实例属性

属性	含义
global	Boolean 值，表示 g 是否已设置
ignoreCase	Boolean 值，表示 i 是否已设置
lastIndex	整数，代表下次匹配将从哪里字符位置开始
multiline	Boolean 值，表示 m 是否已设置
Source	正则表达式的源字符串形式

//所谓实例属性，就是需要new实例化一个正则
// let patter = new RegExp('dilireba','ig');
let patter = /dilireba/ig;
//是否全局了 g
console.log(patter.global); //true

//是否忽略大小写 i
console.log(patter.ignoreCase); //true

//是否支持多行匹配 m
console.log(patter.multiline); //false

//下次的匹配位置
let str = 'dilireba dilireba dilireba';
patter.test(str);
console.log(patter.lastIndex); //8
patter.lastIndex = 15;//还可以手动设置
console.log(patter.lastIndex); 

//正则表达式的源字符串
console.log(patter.source); //'dilireba'

# 五、正则表达式元字符（包含特殊含义的字符）

# 一、单个字符和数字、重复字符

单个字符和数字

元字符/元符号
匹配情况

. 匹配除换行符外的任意字符

[a-z0-9] 匹配括号中的字符集中的任意字符

[^a-z0-9] 匹配任意不在括号中的字符集中的字符

\d 匹配数字

\D 匹配非数字，同[^0-9]相同

\w 匹配字母和数字及 _

\W 匹配非字母和数字及 _

元字符/元符号	匹配情况
.	匹配除换行符外的任意字符
[a-z0-9]	匹配括号中的字符集中的任意字符
[^a-z0-9]	匹配任意不在括号中的字符集中的字符
\d	匹配数字
\D	匹配非数字，同[^0-9]相同
\w	匹配字母和数字及 _
\W	匹配非字母和数字及 _

重复字符

元字符/元符号
匹配情况

x? 匹配 0 个或 1 个 x

x* 匹配 0 个或任意多个 x

x+ 匹配至少一个 x

(xyz)+ 匹配至少一个(xyz)

x{m,n} 匹配最少 m 个、最多 n 个 x

元字符/元符号	匹配情况
x?	匹配 0 个或 1 个 x
x*	匹配 0 个或任意多个 x
x+	匹配至少一个 x
(xyz)+	匹配至少一个(xyz)
x{m,n}	匹配最少 m 个、最多 n 个 x

# 1、点符号匹配除了换行符（\n）外的任意字符

//点符号匹配除了换行符（\n）外的任意字符
let patter = /dilireba/;
console.log(patter.test('dilireba'));//true

// di1ireba  diaireba  di@ireba  di迪ireba
//点符号匹配
let patter1 = /di.ireba/;
console.log(patter1.test('di1ireba'));//true
console.log(patter1.test('diaireba'));//true
console.log(patter1.test('di@ireba'));//true
console.log(patter1.test('di迪ireba'));//true
//当然，除换行符（\n）之外  di\nireba
console.log(patter.test('di\nireba'));//false


//一个点匹配一个任意字符，多个点匹配多个任意字符
// di?ire!a  di丽ire巴a
let patter2 = /di.ire.a/;
console.log(patter2.test('di?ire!a'));//true
console.log(patter2.test('di丽ire巴a'));//true

注意：只需要保证点的位置一一对应，有几个点就可以匹配几个任意字符，换行符（\n）除外

有的同学觉得，太麻烦了，要点和匹配的位置一一对应，如果我要匹配100个位置，岂不是要写一百个点，有没有方便的写法？

# 2、点符号和重复字符配合使用

在讲它们配合使用之前，我们先学习一下重复字符的使用

# ① 重复字符：x?，表示：匹配 0 个或 1 个 x （x可以换成任意字符）

//重复字符：x?，表示：匹配 0 个或 1 个 x （x可以换成任意字符）
//ggle  gogle 
let patter = /go?gle/;//o? 表示0个，1个o
console.log(patter.test('ggle')); //true
console.log(patter.test('gogle')); //true
console.log(patter.test('google')); //false

# ② 重复字符：x*，表示：匹配 0 个或 1 个或者任意多个 x （x可以换成任意字符）

//重复字符：x*，表示：匹配 0 个或 1 个 或者任意多个 x （x可以换成任意字符）
//ggle  gogle  google  gooooogle
let patter = /go*gle/;//o* 表示0个，1个，或者多个o
console.log(patter.test('ggle')); //true
console.log(patter.test('gogle')); //true
console.log(patter.test('google')); //true
console.log(patter.test('gooooogle')); //true

# ③ 重复字符：x+，表示：匹配至少1个或者任意多个 x （x可以换成任意字符）

//重复字符：x+，表示：匹配至少1 个 或者任意多个 x （x可以换成任意字符）
//gogle  google  gooooogle
let patter = /go+gle/;//o+ 表示至少1个，或者多个o
console.log(patter.test('ggle')); //false
console.log(patter.test('gogle')); //true
console.log(patter.test('google')); //true
console.log(patter.test('gooooogle')); //true

# ④ 重复字符：x{m,n}，表示：匹配最少 m 个、最多 n 个 x， x{m}表示：只能有m个x， x{m,}表示：有m个x或者以上个x （x可以换成任意字符）

//重复字符：x{m,n}，表示：匹配最少 m 个、最多 n 个 x（x可以换成任意字符）
//ggle  gogle  google  gooooogle   o{0,5}  表示：匹配最少 0 个、最多 5 个 o
//gogle  google  gooooogle   o{1,5}
let patter = /go{1,5}gle/;// o{1,5}  表示：匹配最少 1 个、最多 5 个 o
console.log(patter.test('gogle')); //true
console.log(patter.test('google')); //true
console.log(patter.test('gooooogle')); //true
console.log(patter.test('gooogle')); //true
console.log(patter.test('goooogle')); //true

//x{m} 只能有m个x （x可以换成任意字符）
// gooogle   o{3} 只能匹配3个o
let patter = /go{3}gle/;
console.log(patter.test('gooogle')); //true

//x{m,} 有m个x或者以上个x （x可以换成任意字符）
// gooogle  goooogle goooooooogle  o{3,} 有3个o或者以上个o 
let patter = /go{3,}gle/;
console.log(patter.test('gooogle')); //true
console.log(patter.test('goooogle')); //true
console.log(patter.test('goooooooogle')); //true

# ⑤ 重复字符：(xyz)+，表示：匹配至少一个(xyz)，括号可以看成分组，分组里面的元素可以是任意多个字符

//重复字符：(xyz)+，表示：匹配至少一个(xyz)，括号可以看成分组，分组里面的元素可以是任意多个字符
// 'She loves me, I love you'  匹配：love   /(love)+/
// '我最喜欢的人是你, 你最喜欢的人却是他，他最喜欢的却是狗'  匹配：最喜欢的  /(最喜欢的)+/

let patter = /(love)+/; //  /(love)+/表示： 匹配至少一个love
console.log(patter.test('She loves me, I love you')); // true

let patter1 = /(最喜欢的)+/;
console.log(patter1.test('我最喜欢的人是你, 你最喜欢的人却是他，他最喜欢的却是狗')); // true

# ⑥ 任意一个匹配：[a-z]匹配26个小写字母任意一个，[A-Z]匹配26个大写字母任意一个，[0-9]匹配0到9的数字任意一个，[a-zA-Z0-9]匹配混合字母和数字中的任意一个

//任意一个匹配：[a-z]匹配26个小写字母任意一个，[A-Z]匹配26个大写字母任意一个，
// [0-9]匹配0到9的数字任意一个，[a-zA-Z0-9]匹配混合字母和数字中的任意一个
// Ilove  2love  ylove  
let patter = /[a-zA-Z0-9]love/;//不要修饰符igm的情况下
console.log(patter.test('Ilove')); //true
console.log(patter.test('2love')); //true
console.log(patter.test('ylove')); //true

// I520ylove  5iulove  结合重复字符使用
let patter = /[a-zA-Z0-9]*love/; // let patter = /[a-z0-9]*love/i;
console.log(patter.test('I520ylove'));//true
console.log(patter.test('5iulove'));//true

# ⑦ 任意一个不匹配：[^a-z]不匹配26个小写字母，[^A-Z]不匹配26个大写字母，[^0-9]不匹配0到9的数字，[^a-zA-Z0-9]不匹配混合字母和数字

//任意一个不匹配：[^a-z]不匹配26个小写字母，[^A-Z]不匹配26个大写字母，
//[^0-9]不匹配0到9的数字，[^a-zA-Z0-9]不匹配混合字母和数字
let patter = /[0-9]oogle/;
console.log(patter.test('7oogle'));//true
let patter1 = /[^0-9]oogle/;
console.log(patter1.test('7oogle'));//false

//我oogle _oogle  @oogle !oogle
let patter2 = /[^0-9a-zA-Z]oogle/;
console.log(patter2.test('我oogle'));//true
console.log(patter2.test('_oogle'));//true
console.log(patter2.test('@oogle'));//true
console.log(patter2.test('!oogle'));//true

接下来为了和锚字符做一个区分，我们先讲一下锚字符

# 3、字符类：锚字符

元字符/元符号	匹配情况
^	行首匹配
$	行尾匹配
\A	只有匹配字符串开始处
\b	匹配单词边界，词在[]内时无效
\B	匹配非单词边界
\G	匹配当前搜索的开始位置
\Z	匹配字符串结束处或行尾
\z	只匹配字符串结束处

# ① 锚字符：^ ，表示：从行首开始匹配

let patter = /[a-z]oogle/;
console.log(patter.test('google'));//true
console.log(patter.test('123google456'));//true 
//这个时候必须从头开始匹配
let patter1 = /^[a-z]oogle/;
//这个 ^符号，是放在第一个/后面，表示从头匹配，而不是加在[]里面的
console.log(patter1.test('google'));//true
console.log(patter1.test('123google456'));//false

# ② 锚字符：$ ，表示：从行尾开始匹配

let patter2 = /^[a-z]oogle/;
console.log(patter2.test('google'));//true
console.log(patter2.test('google456'));//true
//这个时候还要保证，行尾也要对上
let patter3 = /^[a-z]oogle$/;
console.log(patter3.test('google'));//true
console.log(patter3.test('google456'));//false
console.log(patter3.test('aoogle'));//true

# 4、字符：\d ，匹配数字，和字符集合 [0-9]相同，字符：\D ，匹配非数字，同[^0-9]相同

let patter = /[0-9]oogle/;
console.log(patter.test('1oogle'));//true
let patter1 = /\doogle/;
console.log(patter1.test('1oogle'));//true
//匹配任意8个数字： 75485858   54875123  65986965
let patter2 = /[0-9]{8}/; 
console.log(patter2.test('75485858'));//true
//可用\d表示
let patter3 = /\d{8}/; 
console.log(patter3.test('75485858'));//true
console.log(patter3.test('54875123'));//true
console.log(patter3.test('65986965'));//true

//字符：\D ， 匹配非数字，同[^0-9]相同
// let patter = /[^0-9]oogle/;
let patter = /\Doogle/;
console.log(patter.test('它oogle'));//true
console.log(patter.test('google'));//true
console.log(patter.test('_oogle'));//true
console.log(patter.test('!oogle'));//true

# 5、字符：\w ，匹配字母和数字及_，和字符集合 [a-zA-Z0-9_]相同，字符：\W ，匹配非字母和数字及_，同[^a-zA-Z0-9_]相同

// let patter = /[a-zA-Z0-9_]oogle/;
let patter = /\woogle/;
console.log(patter.test('aoogle'));
console.log(patter.test('Google'));
console.log(patter.test('3oogle'));
console.log(patter.test('_oogle'));

//字符：\W ， 匹配非字母和数字及_，同[^a-zA-Z0-9_]相同，和上面刚好相反

# 二、空白字符

元字符/元符号	匹配情况
\S	匹配非空白字符
\s	匹配空白字符、空格、制表符和换行符
\t	匹配制表符
\r	匹配回车字符
\n	匹配换行符
\f	匹配进纸字符
\b	表示到达边界
\0	匹配 null 字符

# ① 字符：\s，表示：匹配空白字符、空格、制表符和换行符

//字符：\s，表示：匹配空白字符、空格、制表符和换行符
//直接使用空格匹配
let patter = /goo gle/;
console.log(patter.test('goo gle'));//true
//使用 \s匹配空白字符、空格、制表符和换行符
let patter1 = /goo\sgle/;
console.log(patter1.test('goo gle'));//true

# ② 字符：\b，表示：到达边界

let patter = /google/;
console.log(patter.test('google123456'));//true
let patter1 = /google\b/;
console.log(patter1.test('google123456'));//false
console.log(patter1.test('google'));//true

# 三、选择字符（|）选择模式，匹配如：jpg|png|gif，非相等包含的意思

// 字符： | ，表示选择模式，竖线里面的任意一个都行
let patter = /jpg|png|gif/;
console.log(patter.test('jpg'));//true
console.log(patter.test('图片格式是 .png'));//true
console.log(patter.test('图片中的动画格式叫做：gif'));//true

# 四、分组模式：()做分组，\1或$1匹配第一个分组中的内容，\2或$2匹配第二个分组中的内容，依次类推

# ① 分组模式：()做分组

//分组模式：()做分组
//先回忆区间匹配
let patter = /google{3,5}$/;//区间，e出现最少3次最多5
console.log(patter.test('google'));//false
console.log(patter.test('googleee'));//true
console.log(patter.test('googleeeee'));//true
console.log(patter.test('googleeeeee'));//false

//加上括号()就变成分组了，分组可以看成一个字符
let patter1 = /(google){3,5}$/;//把google看成一个字符，匹配最少3次最多5次
console.log(patter1.test('google'));//false
console.log(patter1.test('googlegooglegoogle'));//true

# ② $1可以获取到第一个分组内容

//\1或$1匹配第一个分组中的内容，\2或$2匹配第二个分组中的内容，依次类推
let patter = /I.*You/;//.*匹配任意字符0次1次或者多次
console.log(patter.test('IloveYou'));//true
console.log(patter.test('I520You'));//true
console.log(patter.test('他喜欢她，I爱You，你爱他'));//true

//$1可以获取到第一个分组内容
let patter1 = /I(.*)You/;
console.log(RegExp.$1);//空的，需要先运行一下
// patter1.test('IloveYou');//运行方式很多
patter1.exec('IloveYou');
console.log(RegExp.$1);//love
patter1.test('他喜欢她，I爱You，你爱他');
console.log(RegExp.$1);//爱

# ③ 小案例：$1获取到第一个分组内容，并做替换

let patter1 = /I(.*)You/;
let str = '他喜欢她，I爱的是You，你爱他';
let str2 ='他喜欢她，I喜欢的是You，你爱他'
let str3 ='他喜欢她，IloveYou，你爱他'
//把自定义的内容：“爱的是”“喜欢的是”"love"加粗
document.write(str.replace(patter1,'I<b>爱的是</b>You'));
document.write(str2.replace(patter1,'I<b>$1</b>You'));
document.write(str3.replace(patter1,'I<b>$1</b>You'));

# ④ 小案例：获取多个分组内容，进行替换

//$1可以获取到第一个分组内容,$2获取第二个分组内容，依次类推
let str = '我爱你 你爱我';
//换成 '你爱我 我爱你'
let patter = /(.*)\s(.*)/;
console.log(str.replace(patter,'$2 $1'));//'你爱我 我爱你'

# 六、正则表达式：贪婪和惰性

粗俗的理解：贪婪 就是什么都是我的，惰性就是节制一点

贪婪	惰性
+	+?
?	??
*	*?
{n}	{n}?
{n,}	{n,}?
{n,m}	{n,m}?

这里其实是对重复字符的深层次理解

//正常根据模型替换一个字符
let str = 'abcdefghijk';
let patter = /[a-z]/;
console.log(str.replace(patter,'我'));//'我bcdefghijk'
//贪婪模式
let patter1 = /[a-z]+/;//贪婪模式 将所有字符串变成了 '我'一个字符
console.log(str.replace(patter1,'我'));//'我'
//看一下惰性模式
let patter2 = /[a-z]+?/;//匹配符合条件的第一个字符，后面没有匹配
console.log(str.replace(patter2,'我'));//'我bcdefghijk'
//开启全局，并使用惰性模式
let patter3 = /[a-z]+?/g;//所有符合条件的都替换了
console.log(str.replace(patter3,'我'));//'我我我我我我我我我我我'

贪婪和惰性的小案例：惰性+全局

let str = 'IloveYou I520You I爱You';
//要求：将I和You中间的字符加粗输出到页面:
//需要这个效果： <b>love</b>  <b>520</b>  <b>爱</b>
let patter = /I(.*)You/;
// document.write(str.replace(patter,'<b>$1</b>'));
//返回：<b>loveYou I520You I爱</b>
//patter模型使用了贪婪，匹配到了： loveYou I520You I爱
//没有达到要求

//使用惰性+全局
let patter1 = /I(.*?)You/g;//使用惰性+全局
document.write(str.replace(patter1,'<b>$1</b>'));
// <b>love</b>  <b>520</b>  <b>爱</b>

# 七、正则表达式使用 exec 返回数组

let str = 'HappyNewYear 2024';
let patter1 = /^[a-zA-Z]+\s[0-9]+$/;//  /^[a-zA-Z]+\s\d+$/
let patter2 = /^[a-z]+\s[0-9]+$/i;
console.log(patter1.test(str));//true
//1. exec 返回包含字符串的数组
console.log(patter2.exec(str));//返回包含字符串的数组
console.log(Array.isArray(patter2.exec(str)));//true

//2.只匹配到字母
let patter3 = /^[a-zA-Z]+/;
console.log(patter3.exec(str));//["HappyNewYear"]

//3.使用了分组
let patter4 = /^([a-zA-Z]+)\s([0-9]+)$/;
console.log(patter4.exec(str));//['HappyNewYear 2024','HappyNewYear','2024']
//使用分组之后的返回值说明,依次如下：
//1. 返回匹配到的整个字符串
//2. 返回匹配到的第一个分组的字符串
//3. 返回匹配到的第二个分组的字符串

# 八、捕获性分组和非捕获性分组

let str = 'HappyNewYear2024';
let patter = /([a-zA-Z]+)(\d+)/;
console.log(patter.exec(str));//['HappyNewYear2024','HappyNewYear','2024']
//这个叫做捕获性分组，所有的分组都捕获返回了
 
//非捕获性分组
let patter1 = /(?:[a-zA-Z]+)(\d+)/;
console.log(patter1.exec(str));//['HappyNewYear2024','2024']
//非捕获性分组，只要在不需要捕获返回的分组上加上： ?:
//1.返回匹配到的整个字符串
//2.返回没有加 ?:的分组
//就是你不想捕获哪个分组，就在分组里面的前面加上 ?:

# 九、分组嵌套、前瞻捕获、特殊字符匹配、换行模式

分组嵌套(?(?(?)))

//分组嵌套，从外往内获取
let patter = /(你?(爱?(我?)))/;
let str = '你爱我';
console.log(patter.exec(str));//['你爱我', '你爱我', '爱我', '我']
//1. 整个匹配到的字符串 '你爱我'
//2. 匹配第一个分组(你?(爱?(我?)))，匹配到 '你爱我'
//3. 匹配第二个分组(爱?(我?)，匹配到 '爱我'
//4. 匹配第三个分组(我?)，匹配到 '我'

前瞻捕获

//前瞻捕获(?=)
let patter = /google/;
console.log(patter.exec('google'));// ['google']
//如果要返回goo, 此时修改一下模式
let patter1 = /goo/;
console.log(patter1.exec('google'));//['goo']
console.log(patter1.exec('goobbb'));//['goo']
//问题出现了，我只能让 'google'的字符串返回 goo
//使用前瞻捕获
let patter2 = /goo(?=gle)/;
console.log(patter2.exec('goobbb'));//null
console.log(patter2.exec('google'));//['goo']
//goo后面必须是gle才能返回goo
//这里一定注意，返回的是 goo，而不是 google，这个就是前瞻捕获

特殊字符匹配: 用反斜杠\来转义正则表达式的特殊字符

let str = '[';//特殊字符
let patter = /\[/;
console.log(patter.test(str));//true

换行模式

let str = '1 吃饭\n2 睡觉\n3 钓鱼';
//alert(str);
//把数字换成#
let patter = /\d+/g;//全局替换
//但很多时候我们写的时候需要限定首尾
let patter1 = /^\d+/gm;//全局+换行匹配
alert(str.replace(patter1,'#'));

# 十、书写常用正则表达式

# ① 手机号正则

梳理一下手机号规则：目前手机号13开头、145/147开头、150-153,155-159、170/173/175-178、180-189、166、198、199开头，匹配大多数中国大陆的手机号码，包括 13、14、15、17、18 开头的手机号码，以及 166、198、199 开头的虚拟运营商的手机号码

/^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199)\d{8}$/

# ② 邮政编码正则

共 6 位数字，第一位不能为 0

//检查邮政编码: 共 6 位数字，第一位不能为 0
let patter = /^[1-9][0-9]{5}$/; //  /[1-9]\d{5}/
console.log(patter.test('432600'));//true

# ③ 简单的电子邮件正则

//简单电子邮件  51yrc.com@gmail.com
//规定：邮箱用户名：字母、数字、下划线、点号、-
//域名：字母、数字、下划线、- ， 没有点号
//域名后缀：2-4位字母，com.cn这样的排除不算
// let patter = /^([a-zA-Z0-9_\.\-]+)@([a-zA-Z0-9_\-]+)\.([a-zA-Z]{2,4})$/;
let patter = /^([\w\.\-]+)@([\w\-]+)\.([a-zA-Z]{2,4})$/;
console.log(patter.test('51yrc.com@gmail.com'));//true
console.log(patter.test('docs.51yrc.com@163.cn'));//true
//以上是简单电子邮件，复杂的邮件大家可以去搜索，重点看你对电子邮件的格式规定

# ④ 匹配图片格式

图片格式: jpg,png,gif,jpeg，然后我们规定：图片名字必须是：字母或数字或者下划线

//图片格式: jpg,png,gif,jpeg
//然后我们规定：图片名字必须是： 字母或数字或者下划线[a-zA-Z0-9_]  \w 
// _my01.png  you.jpg  _1.gif   15.jpeg
let patter = /^\w+\.(jpg|png|gif|jpeg)$/;
console.log(patter.test('_my01.png'));//true
console.log(patter.test('you.jpg'));//true
console.log(patter.test('_1.gif'));//true
console.log(patter.test('15.jpeg'));//true

# ⑤ 删除多余空格

//删除多余空格
let str = '111 222 333';
let patter = /\s/g; //g 必须全局，才能全部匹配
console.log(str.replace(patter,''));//'111222333'

# ⑥ 删除首尾的空格，中间的空格不删除

正常处理

//删除首尾的空格，中间的空格不删除
//'   I love YOU!  MISS GAO '=> 'I love YOU!  MISS GAO'
let str = '   I love YOU!  MISS GAO    ';
let patter1 = /^\s+/;
let res = str.replace(patter1,'');
console.log("|" +  res + "|");//'|I love YOU!  MISS GAO    |'
let patter2 = /\s+$/;
res = res.replace(patter2,'');
console.log("|" +  res + "|");//'|I love YOU!  MISS GAO|'

惰性模式处理

//删除首尾的空格，中间的空格不删除
//'   I love YOU!  MISS GAO '=> 'I love YOU!  MISS GAO'
let str = '   I love YOU!  MISS GAO    ';
//使用非贪婪捕获
let patter = /^\s+(.+)\s+$/;
// let res = patter.exec(str);
// console.log(res);//["   I love YOU!  MISS GAO    ","I love YOU!  MISS GAO   "]
let res = patter.exec(str)[1];
console.log('|' +  res + '|');//'|I love YOU!  MISS GAO   |'
// (.+)是贪婪模式，它将后面的空格都匹配上了
//应该使用惰性模式，适可而止
let patter1 = /^\s+(.+?)\s+$/;
let res1 = patter1.exec(str)[1];
console.log('|' +  res1 + '|');//'|I love YOU!  MISS GAO|'

惰性+分组快速获取

//删除首尾的空格，中间的空格不删除
//'   I love YOU!  MISS GAO '=> 'I love YOU!  MISS GAO'
let str = '   I love YOU!  MISS GAO    ';
//分组获取
let patter1 = /^\s+(.+?)\s+$/;
let res1 = str.replace(patter1,'$1');
console.log('|' +  res1 + '|');//'|I love YOU!  MISS GAO|'

# ⑦ 延伸：将11位手机号中的4-7位号码换成 *

//将11位手机号中的4-7位号码换成 * 
// 13858584458 => 138****4458
let patter = /^(\d{3})(\d{4})(\d{4})$/;
let str = '13858584458';
console.log(str.replace(patter,'$1****$3'));// '138****4458'