正则表达式

进阶JavaScript

正则表达式

1. 正则表达式概述

1.1 什么是正则表达式

image-20230501185504301

1.2 正则表达式的特点

image-20230501185511940

2. 正则表达式在js中的使用

2.1 创建正则表达式

image-20230501185525481

1
2
3
4
5
6
7
8
// 正则表达式在js中的使用

// 1.利用RegExp对象来创建正则表达式
var regexp = new RegExp(/123/)
console.log(regexp)

// 2.利用字面量创建正则表达式
var rg = /123/

2.2 测试正则表达式 test

image-20230501185621461

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 正则表达式在js中的使用

// 1.利用RegExp对象来创建正则表达式
var regexp = new RegExp(/123/)
console.log(regexp);

// 2.利用字面量创建正则表达式
var rg = /123/

// 3.测试正则表达式 test
// test() 正则对象方法，用于检测字符串是否符合该规则，该对象会返回 true 或 false，其参数是测试字符串。
// regexObj.test(str)
// 1. regexObj 是写的正则表达式
// 2. str 我们要测试的文本
// 3. 就是检测str文本是否符合我们写的正则表达式规范.
console.log(rg.test(123));
console.log(rg.test('abc'));

img4

3. 正则表达式中的特殊字符

3.1 正则表达式的组成

image-20230501185718008

3.2 边界符

image-20230501185724781

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 边界符
// ^  表示匹配行首的文本（以谁开始）
// $  表示匹配行尾的文本（以谁结束）
var rg = /abc/; // 正则表达式里面不需要加引号 不管是数字型还是字符串型
// /abc/ 只要包含有abc这个字符串返回的都是true
console.log(rg.test('abc'));// true
console.log(rg.test('abcd'));// true
console.log(rg.test('aabcd'));// true
console.log('---------------------------');
var reg = /^abc/;
console.log(reg.test('abc')); // true
console.log(reg.test('abcd')); // true
console.log(reg.test('aabcd')); // false
console.log('---------------------------');
var reg1 = /^abc$/; // 精确匹配 要求必须是 abc字符串才符合规范
console.log(reg1.test('abc')); // true
console.log(reg1.test('abcd')); // false
console.log(reg1.test('aabcd')); // false
console.log(reg1.test('abcabc')); // false

3.3 字符类

3.31 [] 方括号

image-20230501185831353

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//var rg = /abc/;  只要包含abc就可以 
// 字符类: [] 表示有一系列字符可供选择，只要匹配其中一个就可以了
var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回为true
console.log(rg.test('andy')); //true
console.log(rg.test('baby')); //true
console.log(rg.test('color')) //true
console.log(rg.test('red')); //false
console.log('------------------');

var rg1 = /^[abc]$/; // 多选一 只有是a 或者是 b  或者是c 这三个字母才返回 true
console.log(rg1.test('aa')); //false
console.log(rg1.test('a')); //true
console.log(rg1.test('b')); //true
console.log(rg1.test('c')); //true
console.log(rg1.test('abc')); //false
console.log('------------------');

3.32 [-] 方括号内部 范围符

image-20230501185913880

1
2
3
4
5
6
var reg = /^[a-z]$/; // 26个英文字母任何一个字母返回 true  - 表示的是a 到z 的范围  
console.log(reg.test('a')); //true
console.log(reg.test('z')); //true
console.log(reg.test(1)); //false
console.log(reg.test('A')); //false
console.log('------------------');

3.33 [^] 方括号内部 取反符^

image-20230501185957365

1
2
3
4
5
6
7
8
// 如果中括号里面有^ 表示取反的意思 千万和 我们边界符 ^ 别混淆
var reg2 = /^[^a-zA-Z0-9_-]$/;
console.log(reg2.test('a')); //false
console.log(reg2.test('B')); //false
console.log(reg2.test(8)); //false
console.log(reg2.test('-')); //false
console.log(reg2.test('_')); //false
console.log(reg2.test('!')); //true

3.34字符组合

image-20230501190053056

1
2
3
4
5
6
7
8
9
// 字符组合
var reg1 = /^[a-zA-Z0-9_-]$/; // 26个英文字母(大写和小写都可以)任何一个字母返回 true  
console.log(reg1.test('a')); //true
console.log(reg1.test('B')); //true
console.log(reg1.test(8)); //true
console.log(reg1.test('-')); //true
console.log(reg1.test('_')); //true
console.log(reg1.test('!')); //false
console.log('----------------');

3.4 量词符

3.41 图解

image-20230501190133529

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// 量词符：用来设定某个模式出现的次数
// 简单理解：就是让下面的a这个字符重复多少次
// var reg = /^a$/;

// *      相当于>=0可以出现0次或者很多次
var reg = /^a*$/;
console.log(reg.test('')); //true
console.log(reg.test('a')); //true
console.log(reg.test('aaaaa')); //true
console.log('-------------------');

// +      相当于>=1可以出现1次或者很多次
var reg1 = /^a+$/;
console.log(reg1.test('')); //false
console.log(reg1.test('a')); //true
console.log(reg1.test('aaaaa')); //true
console.log('-------------------');

// ?      相当于1||0
var reg2 = /^a?$/;
console.log(reg2.test('')); //true
console.log(reg2.test('a')); //true
console.log(reg2.test('aaaaa')); //false
console.log('-------------------');

// {3}    就是重复3次
var reg3 = /^a{3}$/;
console.log(reg3.test('')); //false
console.log(reg3.test('a')); //false
console.log(reg3.test('aaaaa')); //false
console.log(reg3.test('aaa')); //true
console.log('-------------------');

// {3,}   大于等于3
var reg4 = /^a{3}$/;
console.log(reg4.test('')); //false
console.log(reg4.test('a')); //false
console.log(reg4.test('aaaaa')); //true
console.log(reg4.test('aaa')); //true
console.log('-------------------');

// {3,16} 大于等于3并且小于等于16
var reg5 = /^a{3,16}$/;
console.log(reg5.test('')); //false
console.log(reg5.test('a')); //false
console.log(reg5.test('aaaaa')); //true
console.log(reg5.test('aaa')); //true
console.log(reg5.test('aaaaaaaaaaaaaaaa')); //true
console.log(reg5.test('aaaaaaaaaaaaaaaaa')); //false
console.log('-------------------');

3.42 用户名验证案例

image-20230501190224944

image-20230501190229138

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!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
        // {6,16}  中间不要有空格
        // console.log(reg.test('a')); //flase
        // console.log(reg.test('8')); //flase
        // console.log(reg.test('18')); //false
        // console.log(reg.test('aa')); //false
        // console.log('-------------');
        // console.log(reg.test('andy-red')); //true
        // console.log(reg.test('andy_red')); //true
        // console.log(reg.test('andy007')); //true
        // console.log(reg.test('andy!007')); //false
        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 {
                console.log('错误的');
                span.className = 'wrong';
                span.innerHTML = '用户名格式输入不正确';
            }
        }
    </script>
</body>

</html>

image-20230501191256664

3.5 括号总结

image-20230501190302353

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 中括号 字符集合.匹配方括号中的任意字符. 
// var reg = /^[abc]$/;
// a 也可以 b 也可以 c 可以  a ||b || c

// 大括号  量词符. 里面表示重复次数
// var reg = /^abc{3}$/; // 它只是让c重复三次   abccc
// console.log(reg.test('abc')); //false
// console.log(reg.test('abcabcabc')); //false
// console.log(reg.test('abccc')); //true

// 小括号 表示优先级
var reg = /^(abc){3}$/; // 它是让abcc重复三次
console.log(reg.test('abc')); //false
console.log(reg.test('abcabcabc')); //true
console.log(reg.test('abccc')); //false

3.6 预定义类

3.61 图解

image-20230501190413406

1
2
3
4
5
6
7
8
9
10
11
12
13
// 座机号码验证:  全国座机号码  两种格式:   010-12345678  或者  0530-1234567
// 正则里面的或者 符号  |  
// var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/;
var reg = /^\d{3,4}-\d{7,8}$/;


// 预定义类指的是某些常见模式的简写方式。
// \d 匹配0-9之间的任一数字，相当于[0-9]
// \D 匹配所有0-9以外的字符，相当于[^0-9]
// \w 匹配任意的字母、数字和下划线，相当于[A-Za-z0-9」
// \W 除所有字母、数字和下划线以外的字符，相当于[^A-Za-z0-9_]
// \s 匹配空格（包括换行符、制表符、空格符等），相等于[\t\r\n\v\f]
// \S 匹配非空格的字符，相当于[^\t\r\n\v\f]

3.62 表单验证

image-20230501190459127

  • Html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <!-- 初始化css -->
    <link rel="stylesheet" href="css/base.css">
    <!-- register css文件 -->
    <link rel="stylesheet" href="css/register.css">
    <script src="js/reg.js"></script>
</head>

<body>
    <div class="w">
        <!-- header -->
        <div class="header">
            <div class="logo">
                <a href="index.html">
                    <img src="img/logo.png" alt="">
                </a>
            </div>
        </div>
        <!-- registerarea -->
        <div class="registerarea">
            <h3>
                注册新用户
                <em>
                    我有账号，去<a href="login.html">登陆</a>
                </em>
            </h3>
            <div class="reg_form">

                <form action="https://solar.sunrainzc.cn">
                    <ul>
                        <li>
                            <label for="tel">手机号:</label>
                            <input type="text" class="inp" id="tel" required>
                            <span class="tip"></span>
                        </li>
                        <li>
                            <label for="qq">QQ:</label>
                            <input type="text" class="inp" id="qq" required>
                            <span class="tip"></span>
                        </li>
                        <li>
                            <label for="nc">昵称:</label>
                            <input type="text" class="inp" id="nc" required>
                            <span class="tip"></span>
                        </li>
                        <li>
                            <label for="msg">短信验证码:</label>
                            <input type="text" class="inp" id="msg" required>
                            <span class="tip"></span>
                        </li>
                        <li>
                            <label for="pwd">登陆密码:</label>
                            <input type="text" class="inp" id="pwd" required>
                            <span class="tip"></span>
                        </li>
                        <li class="safe">
                            安全程度
                            <em class="ruo">弱</em>
                            <em class="zhong">中</em>
                            <em class="qiang">强</em>
                        </li>

                        <li>
                            <label for="surepwd">确认密码:</label>
                            <input type="password" class="inp" id="surepwd" required>
                            <span class="tip"></span>
                        </li>
                        <li class="agree">
                            <!-- <input type="checkbox" class="look" required>同意协议并注册 -->
                            <input type="checkbox" class="look" required>同意协议并注册
                            <a href="#">《知果果用户协议》</a>
                        </li>
                        <li>
                            <input type="submit" value="完成注册" class="over">
                        </li>
                    </ul>
                </form>

            </div>
        </div>
        <div class="footer">
            <p class="links">
                关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U
            </p>

            <p class="copyright">
                地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
                京ICP备08001421号京公网安备110108007702
            </p>
        </div>
    </div>
</body>

</html>
  • CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
// out:register.css
.w {
    width: 80%;
    margin: 0 auto;

    .header {
        padding: 10px 0 10px 0;
        border-bottom: 3px solid #af0609;
    }

    .registerarea {
        margin-top: 10px;
        border: 1px solid #ccc;

        h3 {
            background-color: #d1d3d0;
            padding: 10px;

            em {
                float: right;

                a {
                    color: #af0609;
                }
            }
        }

        .reg_form {
            width: 70%;
            margin: 0 auto;
            padding: 50px 0;

            form {
                ul li {
                    padding: 20px 0;
                    display: flex;

                    label {
                        text-align: right;
                        width: 100px;
                        display: block;
                        padding: 5px 10px 5px 0;
                    }

                    input {
                        width: 200px;
                        padding: 5px;
                    }

                    .tip {
                        margin-left: 5px;
                        padding-left: 25px;
                        display: flex;
                        align-items: center;
                    }

                    .tipRight {
                        background-image: url('../img/success.png');
                        background-position-y: 50%;
                        background-repeat: no-repeat;
                        color: #2daf06;
                    }

                    .tipWrong {
                        background-image: url('../img/error.png');
                        background-position-y: 50%;
                        background-repeat: no-repeat;
                        color: #af0609;
                    }
                }

                ul li.safe {
                    padding: 0;
                    width: 325px;
                    justify-content: flex-end;

                    em {
                        margin: 0 5px 0 5px;
                        padding: 0 10px;
                        color: white;
                    }

                    .ruo {
                        background-color: #af0609;
                    }

                    .zhong {
                        background-color: #2daf06;
                    }

                    .qiang {
                        background-color: #ddbd0a;
                    }
                }

                ul li.agree {
                    width: 325px;
                    justify-content: flex-end;

                    input {
                        width: auto;
                        margin-right: 10px;
                    }
                }

                ul li:last-child {
                    justify-content: space-around;

                    input {
                        background-color: #af0609;
                        border: none;
                        outline: none;
                        color: white;
                    }
                }
            }
        }
    }
}
  • JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
window.onload = function () {
    var regtel = /^1[3|4|5|8|9]\d{9}$/  //手机号码的正则表达式
    var regqq = /^[1-9]\d{4,}$/  //qq的正则表达式
    var regnc = /^[\u4e00-\u9fa5]{2,3}$/  //中文昵称的正则表达式
    var regmsg = /^\d{6}$/  //短信的正则表达式
    var regpwd = /^[a-zA-Z0-9_-]{6,16}$/  //密码的正则表达式
    var regsurepwd = /^[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')
    // var look = document.querySelector('.look')
    var over = document.querySelector('.over')
    var allSpan = document.querySelectorAll('.tip')

    check(tel, regtel)
    check(qq, regqq)
    check(nc, regnc)
    check(msg, regmsg)
    check(pwd, regpwd)
    check(surepwd, regsurepwd)

    function check(dom, reg) {
        dom.onblur = function () {
            if (reg.test(this.value)) {
                dom.nextElementSibling.className = 'tip tipRight'
                dom.nextElementSibling.innerHTML = '输入正确'
            } else {
                dom.nextElementSibling.className = 'tip tipWrong'
                dom.nextElementSibling.innerHTML = '请输入正确的格式'
            }
        }
    }
    surepwd.onblur = function () {
        if (this.value == pwd.value) {
            this.nextElementSibling.className = 'tip tipRight'
            this.nextElementSibling.innerHTML = '密码匹配正确'
        } else {
            this.nextElementSibling.className = 'tip tipWrong'
            this.nextElementSibling.innerHTML = '密码不匹配，再试一次'
        }
    }
}

image-20230501190736330

3.7 正则表达式中的替换

3.71 replace 替换

image-20230501191350338

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 替换 replace
var str = 'andy和red';
// var newStr = str.replace('andy', 'baby');
var newStr = str.replace(/andy/, 'baby');
console.log(newStr);

var str = 'andy和red';
var newStr = str.replace('andy', 'baby');
console.log(newStr)//baby和red
// //等同于 此处的andy可以写在正则表达式内
var newStr2 = str.replace(/andy/, 'baby');
console.log(newStr2)//baby和red
// //全部替换
var str = 'abcabc'
var nStr = str.replace(/a/,'哈哈')

3.72 正则表达式参数

image-20230501191542059

1
2
3
4
5
6
// //全部替换g
var nStr = str.replace(/a/a,'哈哈')
console.log(nStr) //哈哈bc哈哈bc
// //忽略大小写i
var str = 'aAbcAba';
var newStr = str.replace(/a/gi,'哈哈')//"哈哈哈哈bc哈哈b哈哈"

3.73 敏感词过滤案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!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>
        textarea {
            width: 300px;
            height: 100px;
            border: 1px solid #ccc;
        }
    </style>
</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/g, '**');
        }
    </script>
</body>

</html>

Solar-Rain程序 & 设计

随心所欲，不逾矩 ~