JavaScript正则表达式：正则表达式中的特殊字符

最新推荐文章于 2024-04-27 13:30:00 发布

晴雨相拥，同心逐梦

最新推荐文章于 2024-04-27 13:30:00 发布

阅读量5.7k

点赞数 2

分类专栏： js高级面向对象+ES6 文章标签：正则表达式

本文链接：https://blog.csdn.net/weixin_64612659/article/details/128113251

版权

js高级面向对象+ES6 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

正则表达式的组成

一个正则表达式可以由简单的字符构成，比如 /abc/，也可以是简单和特殊字符的组合，比如 /ab*c/ 。其中特殊字符也被称为元字符，在正则表达式中是具有特殊意义的专用符号，如 ^ 、$ 、+ 等。

特殊字符非常多，可以参考：

MDN：正则表达式 - JavaScript | MDN (mozilla.org)

jQuery 手册：正则表达式部分

正则测试工具: 在线正则表达式测试

这里我们把元字符划分几类学习。

边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符。

如果 ^ 和 $ 在一起，表示必须是精确匹配。

字符类

字符类表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内。

1. [] 方括号（就是或者的意思）

/[abc]/.test('andy')     // true

后面的字符串只要包含 abc 中任意一个字符，都返回 true 。

2. [-] 方括号内部范围符-

/^[a-z]$/.test(c')     // true

方括号内部加上 - 表示范围，这里表示 a 到 z 26个英文字母都可以。

3. [^] 方括号内部取反符^

   /[^abc]/.test('andy')     // false

方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 false 。

注意和边界符 ^ 区别，边界符写到方括号外面。

外边是边界符是开头的意思里面是取反的意思

上面正则表达式的意思为一个字符不能是大小写字母数字_-

4. 字符组合

/[a-z1-9]/.test('andy')     // true

方括号内部可以使用字符组合，这里表示包含 a 到 z 的26个英文字母和 1 到 9 的数字都可以。

量词符

量词符用来设定某个模式出现的次数。

* 相当于 >= 0 可以出现0次或者很多次

+ 相当于 >= 1 可以出现1次或者很多次

? 相当于 1 || 0

{3} 就是重复3次

{3, } 大于等于3

{3,16} 大于等于3 并且小于等于16

用户名验证

功能需求:

1. 如果用户名输入合法 , 则后面提示信息为 : 用户名合法 , 并且颜色为绿色

2. 如果用户名输入不合法 , 则后面提示信息为 : 用户名不符合规范 , 并且颜色为绿色

案例：用户名验证分析

分析:

1.用户名只能为英文字母,数字,下划线或者短横线组成, 并且用户名长度为 6~16位.

2.首先准备好这种正则表达式模式 /$[a-zA-Z0-9-_]{6,16}^/

3.当表单失去焦点就开始验证.

4.如果符合正则规范, 则让后面的span标签添加 right 类.

5. 如果不符合正则规范 , 则让后面的 span 标签添加 wrong 类 .

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span {
            color: #aaa;
            font-size: 14px;
        }
        
        .right {
            color: green;
        }
        
        .wrong {
            color: red;
        }
    </style>
</head>

<body>
    <input type="text" class="uname"> <span>请输入用户名</span>
    <script>
        var reg = /^[a-zA-Z0-9_-]{6,16}$/; // 这个模式用户只能输入英文字母 数字 下划线 短横线但是有边界符和[] 这就限定了只能多选1
        var uname=document.querySelector(".uname");
        var span=document.querySelector("span")
        uname.onblur=function(){
            if(reg.test(this.value)){
                console.log('正确的');
                span.className='right'
                span.innerHTML='用户名格式输入正确'
            }else{
                span.className='wrong'
                span.innerHTML='用户名格式输入不正确'
            }
        }
    </script>
</body>

</html>

括号总结

1. 大括号量词符 . 里面表示重复次数

2. 中括号字符集合。匹配方括号中的任意字符 .(多选一)

3. 小括号表示优先级

var reg = /^abc{3}$/; // 它只是让c重复三次 abccc

如果想要abc重复，那就需要使用() 例如 var reg = /^(abc){3}$/; // 它是让abcc重复三次

可以在线测试 : 菜鸟工具 - 不止于工具

预定义类

预定义类指的是某些常见模式的简写方式。

发现菜鸟的正则表达式测试并不好用，下面的是新的测试工具

在线正则表达式测试 (oschina.net)

分析:

1. 手机号码 : /^ 1[3|4|5|7|8][0-9]{9 }$/

2. QQ: [1-9 ][0-9]{4,} ( 腾讯 QQ 号从 10000 开始 )

3. 昵称是中文 : ^[\u4e00-\u9fa5 ]{2,8}$

window.onload = function() {
    var regtel = /^1[3|4|5|7|8]\d{9}$/; // 手机号码的正则表达式
    var regqq = /^[1-9]\d{4,}$/; // 10000
    var regnc = /^[\u4e00-\u9fa5]{2,8}$/;
    var regmsg = /^\d{6}$/;
    var regpwd = /^[a-zA-Z0-9_-]{6,16}$/;
    var tel = document.querySelector('#tel');
    var qq = document.querySelector('#qq');
    var nc = document.querySelector('#nc');
    var msg = document.querySelector('#msg');
    var pwd = document.querySelector('#pwd');
    var surepwd = document.querySelector('#surepwd');
    regexp(tel, regtel); // 手机号码
    regexp(qq, regqq); // qq号码
    regexp(nc, regnc); // 昵称
    regexp(msg, regmsg); // 短信验证
    regexp(pwd, regpwd); // 密码框
    // 表单验证的函数
    function regexp(ele, reg) {
        ele.onblur = function() {
            if (reg.test(this.value)) {
                // console.log('正确的');
                this.nextElementSibling.className = 'success';
                this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 恭喜您输入正确';
            } else {
                // console.log('不正确');
                this.nextElementSibling.className = 'error';
                this.nextElementSibling.innerHTML = '<i class="error_icon"></i> 格式不正确，请从新输入 ';
            }
        }
    };

    surepwd.onblur = function() {
        if (this.value == pwd.value) {
            this.nextElementSibling.className = 'success';
            this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 恭喜您输入正确';
        } else {
            this.nextElementSibling.className = 'error';
            this.nextElementSibling.innerHTML = '<i class="error_icon"></i> 两次密码输入不一致';

        }
    }

}

晴雨相拥，同心逐梦

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
JavaScript正则表达式：正则表达式中的特殊字符

正则表达式的组成一个正则表达式可以由简单的字符构成，比如 /abc/，也可以是简单和特殊字符的组合，比如 /ab*c/ 。其中特殊字符也被称为元字符，在正则表达式中是具有特殊意义的专用符号，如 ^ 、$ 、+ 等。特殊字符非常多，可以参考： MDN：正则表达式 - JavaScript | MDN (mozilla.org)jQuery 手册：正则表达式部分正则测试工具: 在线正则表达式测试这里我们把元字符划分几类学习。边界符正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符。如果 ^
复制链接

扫一扫