JavaScript进阶教程(7)-正则表达式

Myth丶恋晨 2022-12-18 02:53 151阅读 0赞

# **引言** #

> 正则表达式在各种编程语言中，都有广泛的应用。在JavaScript中更是不可或缺，正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。 本文从正则表达式的基本概念入手，讲解了正则表达式的特点和组成，并且详细讲解了正则表达式在JavaScript中的使用，并给出了一些在实际开发中经常用到的实例。

**目录**

引言

1 正则表达式

1.1 什么是正则表达式

1.2 正则表达式的作用

1.3 正则表达式的特点

1.4 正则表达式的组成

1.5 元字符串

1.5.1 常用元字符串

1.5.2 限定符

1.5.3 其它

2 常用正则表达式

3 在JavaScript 中使用正则表达式

3.1 创建正则表达式对象

3.1.1 方式1

3.1.2 方式2：

3.2 参数

3.3 正则表达式匹配

3.4 实例

3.4.1 验证密码强弱

3.4.2 验证邮箱

3.4.3 验证中文名字

3.5 正则表达式提取

3.6 正则表达式替换

4 案例

4.1 表单验证案例

4.2 过滤敏感词汇案例

5 总结

--------------------

# 1 正则表达式 #

## 1.1 什么是正则表达式 ##

正则表达式是用于匹配规律规则的表达式，它的“鼻祖”可一直追溯到科学家对人类神经系统的工作原理的早期研究。现在在各种编程语言中，正则表达式都有广泛的应用。在JavaScript中，正则表达式也是对象，正则表通常被用来检索、替换那些符合某个模式(规则)的文本。  
正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。

## 1.2 正则表达式的作用 ##

1.  给定的字符串是否符合正则表达式的过滤逻辑(匹配)。
2.  可以通过正则表达式，从字符串中获取我们想要的特定部分(提取)。
3.  强大的字符串替换能力(替换)。

## 1.3 正则表达式的特点 ##

1.  灵活性、逻辑性和功能性非常的强
2.  可以迅速地用极简单的方式达到字符串的复杂控制
3.  对于刚接触的人来说，比较晦涩难懂

## 1.4 正则表达式的组成 ##

*  普通字符
 *  特殊字符(元字符)：正则表达式中有特殊意义的字符

示例演示：

*  `\d` 匹配数字
 *  `ab\d` 匹配 ab1、ab2

## 1.5 元字符串 ##

### 1.5.1 常用元字符串 ###

<table> 
 <thead> 
  <tr> 
   <th>元字符</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>\d</td> 
   <td>匹配数字</td> 
  </tr> 
  <tr> 
   <td>\D</td> 
   <td>匹配任意非数字的字符</td> 
  </tr> 
  <tr> 
   <td>\w</td> 
   <td>匹配字母或数字或下划线</td> 
  </tr> 
  <tr> 
   <td>\W</td> 
   <td>匹配任意不是字母，数字，下划线</td> 
  </tr> 
  <tr> 
   <td>\s</td> 
   <td>匹配任意的空白符</td> 
  </tr> 
  <tr> 
   <td>\S</td> 
   <td>匹配任意不是空白符的字符</td> 
  </tr> 
  <tr> 
   <td>.</td> 
   <td>匹配除换行符以外的任意单个字符</td> 
  </tr> 
  <tr> 
   <td>^</td> 
   <td>表示匹配行首的文本(以谁开始)</td> 
  </tr> 
  <tr> 
   <td>$</td> 
   <td>表示匹配行尾的文本(以谁结束)</td> 
  </tr> 
 </tbody> 
</table>

### 1.5.2 限定符 ###

<table> 
 <thead> 
  <tr> 
   <th>限定符</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>*</td> 
   <td>重复零次或更多次</td> 
  </tr> 
  <tr> 
   <td>+</td> 
   <td>重复一次或更多次</td> 
  </tr> 
  <tr> 
   <td>?</td> 
   <td>重复零次或一次</td> 
  </tr> 
  <tr> 
   <td>{n}</td> 
   <td>重复n次</td> 
  </tr> 
  <tr> 
   <td>{n,}</td> 
   <td>重复n次或更多次</td> 
  </tr> 
  <tr> 
   <td>{n,m}</td> 
   <td>重复n到m次</td> 
  </tr> 
 </tbody> 
</table>

### 1.5.3 其它 ###

> 1.\[\] 字符串用中括号括起来，表示匹配其中的任一字符，相当于或的意思。  
> 2.\[^\] 匹配中括号以外的内容，相当于非的意思。  
> 3.\\ 转义符。  
> 4.| 或者，选择两者中的一个。注意|将左右两边分为两部分，而不管左右两边有多长多乱。  
> 5.() 从两个直接量中选择一个，分组。 eg：gr(a|e)y匹配gray和grey。  
> 6.\[\\u4e00-\\u9fa5\] 匹配汉字。

# 2 常用正则表达式 #

**验证手机号：**

^\d{11}$

**验证邮编：**

^\d{6}$

**验证日期 2012-5-01：**

^\d{4}-\d{1,2}-\d{1,2}$

**验证邮箱 xxx@qq.cn:**

^\w+@\w+\.\w+$

**验证IP地址 192.168.1.10**

^\d{1,3}\(.\d{1,3}){3}$

# 3 在JavaScript 中使用正则表达式 #

## 3.1 创建正则表达式对象 ##

在 JavaScript 中，有两种方式创建正则表达式对象。

### 3.1.1 方式1 ###

var reg = new Regex('\d', 'i');
    var reg = new Regex('\d', 'gi');

### 3.1.2 方式2 ###

var reg = /\d/i;
    var reg = /\d/gi;

## 3.2 参数 ##

<table> 
 <thead> 
  <tr> 
   <th>标志</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>i</td> 
   <td>忽略大小写</td> 
  </tr> 
  <tr> 
   <td>g</td> 
   <td>全局匹配</td> 
  </tr> 
  <tr> 
   <td>gi</td> 
   <td>全局匹配+忽略大小写</td> 
  </tr> 
 </tbody> 
</table>

## 3.3 正则表达式匹配 ##

**匹配日期：**

//  匹配日期var dateStr = '2020-10-24';
    var reg = /^\d{4}-\d{1,2}-\d{1,2}$/console.log(reg.test(dateStr)); // true

## 3.4 实例 ##

### 3.4.1 验证密码强弱 ###

<!DOCTYPE html>
    <html lang="en">
            <head>
                    <meta charset="UTF-8">
                    <title>密码强弱：公众号AlbertYang</title>
            </head>
            <style type="text/css">
                    #dv {
                            width: 300px;
                            height: 200px;
                            position: absolute;
                            left: 300px;
                            top: 100px;
                    }
    
                    .strengthLv0 {
                            height: 6px;
                            width: 40px;
                            border: 1px solid #ccc;
                            padding: 2px;
                    }
    
                    .strengthLv1 {
                            background: red;
                            height: 6px;
                            width: 40px;
                            border: 1px solid #ccc;
                            padding: 2px;
                    }
    
                    .strengthLv2 {
                            background: orange;
                            height: 6px;
                            width: 80px;
                            border: 1px solid #ccc;
                            padding: 2px;
                    }
    
                    .strengthLv3 {
                            background: green;
                            height: 6px;
                            width: 120px;
                            border: 1px solid #ccc;
                            padding: 2px;
                    }
            </style>
            <body>
                    <div id="dv">
                            <label for="pwd">密码</label>
                            <input type="text" id="pwd" maxlength="16">
                            <div>
                                    <em>密码强度：</em>
                                    <span id="strength"></span>
                                    <div id="strengthLevel" class="strengthLv0"></div>
                            </div>
                    </div>
                    <script>
                            // 获取文本框注册键盘抬起事件
                            document.getElementById("pwd").onkeyup = function() {
                                    // 每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色
                                    // 如果密码的长度是小于6的,不判断
                                    let level = getLvl(this.value),
                                            levelStr = "弱";
                                    if (level === 2) {
                                            levelStr = "中等";
                                    } else if (level === 3) {
                                            levelStr = "强";
                                    }
    
                                    if (this.value.length >= 6) {
                                            document.getElementById("strengthLevel").className = "strengthLv" + level;
                                            document.getElementById("strength").innerHTML = levelStr;
                                    } else {
                                            document.getElementById("strengthLevel").className = "strengthLv0";
                                            document.getElementById("strength").innerHTML = "";
                                    }
    
                            };
    
                            // 根据密码返回对应的级别
                            function getLvl(pwd) {
                                    let lvl = 0; // 默认是0级
                                    // 判断密码中是否有数字
                                    if (/[0-9]/.test(pwd)) {
                                            lvl++;
                                    }
                                    // 判断密码中有没有字母
                                    if (/[a-zA-Z]/.test(pwd)) {
                                            lvl++;
                                    }
                                    // 判断密码中是否有特殊符号
                                    if (/[^0-9a-zA-Z_]/.test(pwd)) {
                                            lvl++;
                                    }
                                    return lvl; // 最小值是1,最大值是3
                            }
                    </script>
            </body>
    </html>

### 3.4.2 验证邮箱 ###

<!DOCTYPE html>
    <html lang="en">
            <head>
                    <meta charset="UTF-8">
                    <title>验证邮箱：微信公众号：AlbertYang</title>
            </head>
            <body>
                    请您输入邮箱地址:<input type="text" value="" id="email" /> *<br />
                    <script>
                            //如果输入的是邮箱,那么背景颜色为绿色,否则为红色
                            //获取文本框,注册失去焦点的事件
                            document.getElementById("email").onblur = function() {
                                    //判断这个文本框中输入的是不是邮箱
                                    let reg = /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_-]+([.][a-zA-Z]+){1,2}$/;
                                    if (reg.test(this.value)) {
                                            this.style.backgroundColor = "green";
                                    } else {
                                            this.style.backgroundColor = "red";
                                    }
                            };
                    </script>
    
            </body>
    </html>

### 3.4.3 验证中文名字 ###

<!DOCTYPE html>
    <html lang="en">
            <head>
                    <meta charset="UTF-8">
                    <title>验证中文名字：微信公众号AlbertYang</title>
    
            </head>
            <body>
                    请输入您的名字:<input type="text" value="" id="userName" />*<br />
                    <script>
                            // 是中文名字,则绿色,否则红色
                            document.getElementById("userName").onblur = function() {
                                    var reg = /^[\u4e00-\u9fa5]{2,6}$/;
                                    if (reg.test(this.value)) {
                                            this.style.backgroundColor = "green";
                                    } else {
                                            this.style.backgroundColor = "pink";
                                    }
                            };
                    </script>
    
            </body>
    </html>

## 3.5 正则表达式提取 ##

// 提取年龄var str = "张三18，李四36，王五60";
    var array = str.match(/\d+/g);
    console.log(array);
    
    // 提取email地址var str = "4645354@qq.com,fangfang@usa.cn 256469312@qq.com,28265432@qq.com";
    var array = str.match(/\w+@\w+\.\w+(\.\w+)?/g);
    console.log(array);
    
    // 分组提取  
    // 提取日期中的年  2020-10-24var dateStr = '2020-10-24';
    // 正则表达式中的()作为分组来使用，获取分组匹配到的结果使用Regex.$1 $2 $3...
    var reg = /(\d{4})-\d{1,2}-\d{1,2}/;
    if (reg.test(dateStr)) {
      console.log(RegExp.$1);
    }
    
    // 提取邮件中的每一部分var reg = /(\w+)@(\w+)\.(\w+)(\.\w+)?/;
    var str = "932errewerrw@126.com";
    if (reg.test(str)) {
      console.log(RegExp.$1);
      console.log(RegExp.$2);
      console.log(RegExp.$3);
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIzODUzNzQz_size_16_color_FFFFFF_t_70][]

## 3.6 正则表达式替换 ##

// 1.替换所有空白字符var str = "   reeed  asafdre56df   3rfereww  rtere ";
    str = str.replace(/\s/g, "***");
    console.log(str);
    
    // 2.替换所有,或，var str = "abc,efg,123，abc,123，a";
    str = str.replace(/,|，/g, ":");
    console.log(str);

![20201025134402196.png][]

# 4 案例 #

## 4.1 表单验证案例 ##

演示地址：[https://www.albertyy.com/2020/10/validate.html][https_www.albertyy.com_2020_10_validate.html]

<!DOCTYPE html><html>
            <head>
                    <meta charset="utf-8">
                    <title>表单验证：微信公众号AlbertYang</title>
                    <style type="text/css">
                            body {
                                    background: #ccc;
                            }
    
                            label {
                                    width: 40px;
                                    display: inline-block;
                            }
    
                            span {
                                    color: red;
                            }
    
                            .container {
                                    margin: 100px auto;
                                    width: 400px;
                                    padding: 50px;
                                    line-height: 40px;
                                    border: 1px solid #999;
                                    background: #efefef;
                            }
    
                            span {
                                    margin-left: 30px;
                                    font-size: 12px;
                            }
    
                            .wrong {
                                    color: red
                            }
    
                            .right {
                                    color: green;
                            }
    
                            .defau {
                                    width: 200px;
                                    height: 20px;
                            }
    
                            .de1 {
                                    background-position: 0 -20px;
                            }
                    </style>
    
            </head>
    
            <body>
                    <div class="container" id="dv">
                            <label for="qq">Q Q</label><input type="text" id="qq"><span></span><br />
                            <label>手机</label><input type="text" id="phone"><span></span><br />
                            <label>邮箱</label><input type="text" id="e-mail"><span></span><br />
                            <label>座机</label><input type="text" id="telephone"><span></span><br />
                            <label>姓名</label><input type="text" id="fullName"><span></span><br />
                    </div>
                    <script>
                            // qq
                            checkInput(document.getElementById("qq"), /^\d{5,11}$/);
                            // 手机
                            checkInput(document.getElementById("phone"), /^\d{11}$/);
                            // 邮箱
                            checkInput(document.getElementById("e-mail"), /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);
                            // 座机号码
                            checkInput(document.getElementById("telephone"), /^\d{3,4}[-]\d{7,8}$/);
                            // 中文名字
                            checkInput(document.getElementById("fullName"), /^[\u4e00-\u9fa5]{2,6}$/);
    
                            // 根据文本框和这个文本框相应的正则表达式，验证当前文本框中的值，与给出的正则表达式否匹配
                            function checkInput(input, reg) {
                                    // 文本框失去焦点的事件
                                    input.onblur = function() {
                                            if (reg.test(this.value)) {
                                                    this.nextElementSibling.innerText = "正确";
                                                    this.nextElementSibling.style.color = "green";
                                            } else {
                                                    this.nextElementSibling.innerText = "错误,请您重新输入";
                                                    this.nextElementSibling.style.color = "red";
                                            }
                                    };
                            }
                    </script>
            </body></html>

# 4.2 **过滤敏感词汇**案例 #

演示地址：[https://www.albertyy.com/2020/10/filter.html][https_www.albertyy.com_2020_10_filter.html]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>过滤敏感词汇：公众号AlbertYang</title>
    	</head>
    	<body>
    		<textarea name="" id="message"></textarea> <button>提交</button>
    		<div></div>
    		<script>
    			var text = document.querySelector('textarea');
    			var btn = document.querySelector('button');
    			var div = document.querySelector('div');
    			btn.onclick = function() {
    				div.innerHTML = text.value.replace(/激情|gay|AV/g, '**');
    			}
    		</script>
    	</body>
    </html>

# ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIzODUzNzQz_size_16_color_FFFFFF_t_70 1][] #

# 5 总结 #

本文从正则表达式的基本概念入手，讲解了正则表达式的特点和组成，并且详细讲解了正则表达式在JavaScript中的使用，并给出了一些在实际开发中经常用到的实例。对于刚接触的人来说，正则表达式比较晦涩难懂。比如：^\\w+(\[-+.\]\\w+)*@\\w+(\[-.\]\\w+)*.\\w+(\[-.\]\\w+)\*$。在实际开发中，我们一般都是在网上搜索好的正则表达式，能够根据实际情况修改正则表达式即可。比如用户名: /^\[a-z0-9\_-\]\{3,16\}$/。

今天的学习就到这里了，由于本人能力和知识有限，如果有写的不对的地方，还请各位大佬批评指正。**如果想继续学习提高，欢迎关注我，每天学习进步一点点，就是领先的开始。如果觉得本文对你有帮助的话，欢迎转发，评论，点赞！！！**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIzODUzNzQz_size_16_color_FFFFFF_t_70]: /images/20221122/809b0d2f69174e25bb4cc20034852dee.png
[20201025134402196.png]: /images/20221122/6894e3f0858548648305a91bf9704fc3.png
[https_www.albertyy.com_2020_10_validate.html]: https://www.albertyy.com/2020/10/validate.html
[https_www.albertyy.com_2020_10_filter.html]: https://www.albertyy.com/2020/10/filter.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIzODUzNzQz_size_16_color_FFFFFF_t_70 1]: /images/20221122/71d139acda7f45c6a1fdf7fde00781f6.png