1.下面一张思维导图概述了正则的全部内容，正则表达式创建，编写正则表达式及常用方法

在这里插入图片描述

2.什么是正则表达式呢

正则表达式，又称规则表达式。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），是对字符串操作的一种逻辑公式，就是用事先定义好的特定字符或这些特定字符组合，组成一个“规则字符串”。这个“规则字符串”是表达对字符串的过滤逻辑，给定一个正则表达式和一个字符串，我们可以通过正则表达式过滤字符串中我们想要的部分或者对特定字符串进行判断，如登录注册时的输入框会提示密码长度必须8位或必须以字母开头（如图1所示），我们也可以通过正则表达式执行所有类型的文本搜索和文本替换操作等。想必大家无论在学习还是工作中都多少听过或者经常使用正则表达式。下面我用RE缩写代表正则表达式，更加简化阅读。

在这里插入图片描述

3.正则表达式特点

1）正则表达式逻辑性，功能性，灵活性非常强，可以迅速用极简单的方式达到对字符串的复杂控制

2）由于正则表达式功能强大，应用场景和范围非常广

3）对于一些初学正则表达式的人来说，理解或使用起来还是比较困难，语法也是晦涩难懂，需要有耐心多加练习

4）正则表达式的代码可读性较差，需要牢固的基础才能准确快速的读懂

5）正则表达式主要面向文本，在各种编辑器中都有应用（如Ctrl+F打开文本搜索框也可以使用正则表达式）

4.JavaScript中正则表达式创建

4.1 通过正则对象RegExp构造函数创建

<script>
    let re = new RegExp("正则表达式");
</script>
复制代码

4.2 直接创建，斜杠之间书写正则表达式

<script>
    let re = /正则表达式/;
</script>
复制代码

5.正则表达式中符号意义

正则表达式由一些普通字符和一些元字符（metacharacters）组成。普通字符包括大小写的字母和数字，而元字符则具有特殊的含义。要想真正的用好正则表达式，正确的理解元字符是最重要的事情。下表列出了分类后的元字符及对应作用描述。

5.1正则表达式修饰符

修饰符可用于大小写不敏感的更全局的搜素：

修饰符	描述
i	执行忽略大小写的匹配
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
m	执行多行匹配

5.2正则表达式模式

方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符
[0-9]	查找任何从 0 至 9 的数字
(x l y)	查找由 l 分隔的任何选项

元字符是拥有特殊含义的字符：

元字符	描述
\	将下一个字符标记符、或一个向后引用、或一个八进制转义符
^	匹配输入字行首
$	匹配输入行尾
{n}	匹配确定的n次
{n,}	至少匹配n次
{n,m}	最少匹配n次且最多匹配m次。m和n均为非负整数，其中n<=m。
\d	查找数字
\s	查找空白字符
\b	匹配单词边界
[xyz]	字符集合。匹配所包含的任意一个字符
[a-z]	字符范围。匹配指定范围内的任意字符。“[a-z]”可以匹配“a”到“z”范围内的任意小写字母字符

定义量词就是匹配出现特定次数的字符串：

量词	描述
n+	匹配任何包含至少一个 n，大于等于1次的字符串。如匹配“hello world”中的“h”
n*	匹配任何包含零个或多个 n ，不等于1次的字符串。如匹配“hello world”中的“ll” 和“l”
n?	匹配任何包含零个或一个 n ，0次或1次的字符串

6.正则表达式书写

正则基础语法：”^([]{})([]{})([]{})$”；正则字符串 = “开始（[包含内容]{长度}）（[包含内容]{长度}）（[包含内容]{长度}）结束”；下面是一些比较简单用直接用斜杠创建的正则表达式：

<script>
    //匹配一个数字的字符
    let re = /^\d$/;
    
    //匹配大于等于4个数字字符
    let re1 = /^\d{4,}$/;
    
    //匹配4~8个的数字字符串
    let re2 = /^\d{4,8}$/;
    
    //匹配包括下划线在内一个单词字符
    let re3 = /^\w$/;
    
    //匹配大于等于4个的单词字符
    let re4 = /^\w{4,}$/;
    
    //匹配4~8个的单词字符
    let re5 = /^\w{4,8}$/;
</script>
复制代码

这是一些比较复杂的正则表达式应用，其实是简单正则表达式的扩展，原理都是一样的。如果满足你的需求可以直接复制粘贴使用：

1.验证用户名和密码：（"^[a-zA-Z]\w{5,15}$"）正确格式："[A-Z][a-z]_[0-9]"组成,并且第一个字必须为字母6~16位
2.验证电话号码：（"^(\d{3,4}-)\d{7,8}$"）正确格式：xxx/xxxx-xxxxxxx/xxxxxxxx
3.验证手机号码（包含虚拟号码和新号码段）："^1([38][0-9]|4[5-9]|5[0-3,5-9]|66|7[0-8]|9[89])[0-9]{8}$"
4.验证身份证号（15位）："\d{14}[[0-9],0-9xX]"，（18位）："\d{17}(\d|X|x)"
5.验证Email地址：("^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$")
6.只能输入由数字和26个英文字母组成的字符串：("^[A-Za-z0-9]+$")
7.整数或者小数：^[0-9]+([.][0-9]+){0,1}$
8.只能输入数字："^[0-9]*$"
9.只能输入n位的数字："^\d{n}$"
10.只能输入至少n位的数字："^\d{n,}$"
11.只能输入m~n位的数字："^\d{m,n}$"
12.只能输入零和非零开头的数字："^(0|[1-9][0-9]*)$"
13.只能输入有两位小数的正实数："^[0-9]+(\.[0-9]{2})?$"
14.只能输入有1~3位小数的正实数："^[0-9]+(\.[0-9]{1,3})?$"
15.只能输入非零的正整数："^\+?[1-9][0-9]*$"
16.只能输入非零的负整数："^\-[1-9][0-9]*$"
17.只能输入长度为3的字符："^.{3}$"
18.只能输入由26个英文字母组成的字符串："^[A-Za-z]+$"
19.只能输入由26个大写英文字母组成的字符串："^[A-Z]+$"
20.只能输入由26个小写英文字母组成的字符串："^[a-z]+$"
21.验证是否含有^%&',;=?$\"等字符："[%&',;=?$\\^]+"
22.只能输入汉字："^[\u4e00-\u9fa5]{0,}$"
23.验证URL："^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$"
24.验证一年的12个月："^(0?[1-9]|1[0-2])$"正确格式为："01"～"09"和"10"～"12"
25.验证一个月的31天："^((0?[1-9])|((1|2)[0-9])|30|31)$"正确格式为；"01"～"09"、"10"～"29"和“30”~“31”
26.获取日期正则表达式："\\d{4}[年|\-|\.]\d{\1-\12}[月|\-|\.]\d{\1-\31}日?"
31.匹配网址URL的正则表达式："[a-zA-z]+://[^\s]*"
32.匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)："^[a-zA-Z][a-zA-Z0-9_]{4,15}$"
33.匹配腾讯QQ号："[1-9][0-9]{4,}" 注：腾讯QQ号从10 000 开始
34.匹配中国邮政编码："[1-9]\\d{5}(?!\d)" 注：中国邮政编码为6位数字
35.匹配ip地址："([1-9]{1,3}\.){3}[1-9]" 注：提取ip地址时有用
36.匹配MAC地址："([A-Fa-f0-9]{2}\:){5}[A-Fa-f0-9]"
复制代码

7.正则表达式常用方法

7.1 字符串常用方法

1）字符串方法 search() 处理字符串,返回搜索目标字符串的起始位置

//html中的代码片段
<body>
<p id="demo">search()方法处理字符串返回字符串的位置是：</p>
<script>
    let str = "hello world!";
    //搜索ll字符串，返回的是2
    let number = str.search("ll");
    document.getElementById("demo").innerHTML += number;
</script>
</body>
复制代码

浏览器运行结果如下：
![在这里插入图片描述](https://img-blog.csdnimg.cn/2021052717521441.png

2）字符串方法 search() 中使用正则表达式,返回搜索目标字符串的起始位置

//html中的代码片段
<body>
<p id="demo">search()方法处理正则表达式返回字符串的位置是：</p>
<script>
    let str = "hello world!";
    //ll是模式，i是修饰符，执行对大小写不敏感的匹配 
    //搜索ll字符串，返回的是2
    let number = str.search(/ll/i);
    document.getElementById("demo").innerHTML += number;
</script>
</body>
复制代码

浏览器运行结果如下：
在这里插入图片描述
3）字符串方法 replace() 替换字符串

//html代码片段
<body>
<p>点击按钮replace()方法用good替换字符串hello</p>
<p id="demo">hello world!</p>
<input type="button" id="btn" value="点击替换字符串">
<script>
    document.getElementById("btn").onclick = function () {
        //用good替换hello字符串，返回的是替换后的字符串
        let text = document.getElementById("demo").innerText;
        //调用replace方法替换
        let s = text.replace("hello","good");
        //把返回的字符串插入
        document.getElementById("demo").innerHTML = s;
    }
</script>
</body>
复制代码

浏览器运行结果：

没有点击时：
在这里插入图片描述
点击按钮后：

4）字符串方法 replace() 中使用正则表达式

//html代码片段
<body>
<p>点击按钮replace()方法使用正则表达式用good替换字符串hello</p>
<p id="demo">hello world!</p>
<input type="button" id="btn" value="点击替换字符串">
<script>
    document.getElementById("btn").onclick = function () {
        //获取字符串
        let text = document.getElementById("demo").innerText;
        //书写被替换字符串正则表达式
        let l = /hello/i;
        //调用replace方法替换，返回的是替换后的字符串
        let s = text.replace(l,"good");
        //把返回的字符串插入
        document.getElementById("demo").innerHTML = s;
    }
</script>
</body>
复制代码

浏览器运行结果：

没有点击时：
在这里插入图片描述
点击按钮后：

7.2 RegExp正则对象常用方法

1）test() 是一个正则表达式方法。它通过模式来搜索字符串，然后根据结果返回 true 或 false。

示例：

<body>
<p>正则对象test()方法搜索下面字符串中有无“world”字符串</p>
<p id="demo">hello world!</p>
<p id="result"></p>
<script>
        //获取字符串
        let text = document.getElementById("demo").innerText;
        //创建正则对象及正则表达式
        let reg = new RegExp(/world/i);
        //调用test方法替换，返回的是boolean
        let result = reg.test(text);
        //把返回的字符串插入
        document.getElementById("result").innerHTML = result;
</script>
</body>
复制代码

结果：
在这里插入图片描述

2）exec() 方法是一个正则表达式方法。它通过指定的模式（pattern）搜索字符串，并返回已找到的文本。
示例：

<body>
<p>正则对象exec()方法搜索下面字符串中有无“wor”字符串</p>
<p id="demo">hello world!</p>
<p id="result"></p>
<script>
        //获取字符串
        let text = document.getElementById("demo").innerText;
        //创建正则对象及正则表达式
        let reg = new RegExp(/wor/i);
        //调用exec方法替换，返回的是搜索到的文本
        let result = reg.exec(text);
        //把返回的字符串插入
        document.getElementById("result").innerHTML = result;
</script>
</body>
复制代码