• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

互联网 diligentman 1个月前 (10-26) 24次浏览

引言

正则表达式在各种编程语言中,都有广泛的应用。在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 匹配数字
  • abd 匹配 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);
}

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

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

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

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>

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

5 总结

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

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


喜欢 (0)