引言

正则表达式在各种编程语言中，都有广泛的应用。在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.3 正则表达式的特点

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

1.4 正则表达式的组成

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

示例演示：

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

1.5 元字符串

1.5.1 常用元字符串

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

1.5.2 限定符

限定符	说明
*	重复零次或更多次
+	重复一次或更多次
?	重复零次或一次
{n}	重复n次
{n,}	重复n次或更多次
{n,m}	重复n到m次

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 参数

标志	说明
i	忽略大小写
g	全局匹配
gi	全局匹配+忽略大小写

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);
}

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);

4 案例

4.1 表单验证案例

演示地址：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

<!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>

5 总结

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

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

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

引言

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 总结

相关文章