DMOZ中文网站分类目录-免费收录各类优秀网站的中文网站目录.
  • DmozDir.org
DMOZ目录快速登录入口-免费收录各类优秀网站的中文网站目录.由人工编辑,并提供网站分类目录检索及地区分类目录检索,是站长免费推广网站的有力平台!

JavaScript进阶教程(7)

  • JavaScript进阶教程(7)

  • 已被浏览: 51 次2020年10月25日    来源:  https://blog.csdn.net/qq_23853743/article/details/109267876
  • 引言 正则表达式在各种编程语言中 都有广泛的应用。在JavaScript中更是不可或缺 正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。例如验证表单 用户名表单只能输入英文字母、数字或者下划线 昵称输入框中可以输入中文。此

    引言

    正则表达式在各种编程语言中,都有广泛的应用。在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 什么是正则表达式

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

    1.2 正则表达式的作用

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

    1.3 正则表达式的特点

    1. 灵活性、逻辑性和功能性非常的强
    2. 可以迅速地用极简单的方式达到字符串的复杂控制
    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}$/。

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


    以上信息来源于网络,如有侵权,请联系站长删除。

    TAG:进阶 教程 JavaScript

  • 上一篇:我的第一篇博客
  • 与“JavaScript进阶教程(7)”相关的资讯
  • JavaScript中的链式调用
  • Java进阶专题(十七) 系统缓存架构设计 (上)
  • 实战教程:如何将自己的Python包发布到PyPI上
  • Postman设置自动捕获传递Cookie教程
  • 还不懂你现在学习的编程语言能做什么?还不懂如何进阶?过来看图