一、正则表达式

1.1、概述

​ 正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象。
​ 正则表达式通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。

​ 其他语言也会使用正则表达式，本阶段我们主要是利用 JavaScript 正则表达式完成表单验证。

1.2、正则表达式的特点

  • 灵活性、逻辑性和功能性非常的强。
  • 可以迅速地用极简单的方式达到字符串的复杂控制。
  • 对于刚接触的人来说，比较晦涩难懂。比如： ^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
  • 实际开发,一般都是直接复制写好的正则表达式。但是要求会使用正则表达式并且根据实际情况修改正则表达式. 比如用户名: /^[a-z0-9_-]{3,16}$/

二、正则表达式在 JS中的使用

2.1、创建正则表达式

2.1.1、说明

​ 在 JavaScript 中，可以通过两种方式创建一个正则表达式。

2.1.2、调用 RegExp 对象的构造函数创建

1
2
3
4
5
<body>
    <script>
        var rege = new RegExp(/表达式/);
    </script>
</body>

2.1.3、通过字面量创建

1
2
3
4
5
6
<body>
    <script>
        var rege = /表达式/;
    </script>
</body>

2.2、测试正则表达式

2.2.1、说明

​ test()是正则对象方法，用于检测字符串是否符合该规则，该对象会返回 true 或 false，其参数是测试字符串。

1
2
3
4
5
# 语法
	 regexObj.test(str) 
	1. regexObj 是写的正则表达式
	2. str 我们要测试的文本
	3. 就是检测str文本是否符合我们写的正则表达式规范.

2.2.2、案例1

1
2
3
4
5
6
7
8
9
10
11
<body>
    <script>
        // 正则表达式里面不需要加引号 不管是数字型还是字符串型
        var reg1 = new RegExp(/123/);
        console.log(reg1.test(123));
        console.log(reg1.test(1234));
        console.log(reg1.test(123));
        
        // 总结: 只要包含123就可以。
    </script>
</body>

2.2.3、案例2

1
2
3
4
5
6
7
8
9
10
11
<body>
    <script>
        // 正则表达式里面不需要加引号 不管是数字型还是字符串型
        var reg1 = /abc/;
        console.log(reg1.test('abc'));
        console.log(reg1.test('abcd'));
        console.log(reg1.test('ab'));
        
        // 总结: 只要包含字符串abc就可以。
    </script>
</body>

三、正则表达式中的特殊字符

3.1、正则表达式的组成

3.1.1、概述

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

​ 特殊字符非常多，可以简单的划分为几类。

3.2、边界符

3.2.1、说明

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

0126

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

3.2.2、案例1

1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <script>
        // 边界符
        // >> 以谁开头 ^
        var reg1 = /^abc/;
        console.log(reg1.test('abc'));
        console.log(reg1.test('abcd'));
        console.log(reg1.test('aabc'));

        // 总结: 必须以abc字符串开头
    </script>
</body>

3.2.3、案例2

1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <script>
        // 边界符
        // >> 以谁结尾 $
        var reg1 = /abc$/;
        console.log(reg1.test('abc'));
        console.log(reg1.test('abcc'));
        console.log(reg1.test('aabc'));

        // 总结: 必须以abc字符串结尾，而不是仅仅的c结尾
    </script>
</body>

3.2.4、案例3

1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <script>
        // 边界符
        // >> 混合使用
        var reg1 = /^abc$/;
        console.log(reg1.test('abc'));
        console.log(reg1.test('abcabc'));
        console.log(reg1.test('aabc'));

        // 总结: 必须是字符串abc。如果 ^ 和 $ 在一起，表示必须是精确匹配。
    </script>
</body>

3.3、字符类

3.3.1、说明

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

3.3.2、[] 方括号

1
2
3
# 语法
	/[abc]/.test('andy')     // true
	后面的字符串只要包含 abc 中任意一个字符，都返回 true 。
1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <script>
        // [] 表示有一系列字符可供选择， 只要匹配其中一个就可以了。

        // 只要包含有a 或者 包含有b 或者包含有c 都返回为true
        var reg = /[abc]/;
        console.log(reg.test('abc'));
        console.log(reg.test('a'));
        console.log(reg.test('aa'));
        console.log(reg.test('green'));
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
<body>
    <script>
        // [] 表示有一系列字符可供选择， 只要匹配其中一个就可以了。

        // 只要包含有a 或者 包含有b 或者包含有c，但是必须以a或者b或者c开头的字符串 都返回为true
        var reg = /^[abc]/;
        console.log(reg.test('aaHello'));
        console.log(reg.test('cJava'));
        console.log(reg.test('dada'));
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
<body>
    <script>
        // [] 表示有一系列字符可供选择， 只要匹配其中一个就可以了。

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

3.3.3、[-] 方括号内部 范围符-

1
2
3
# 语法
	/[a-z]/;
	方括号内部加上 - 表示范围，这里表示 a 到 z 26个英文字母都可以。
1
2
3
4
5
6
7
8
9
10
11
<body>
    <script>
        // [] 表示有一系列字符可供选择， 只要匹配其中一个就可以了。

        // 测试的字符串只要包含26个英文字母范围内选取任何一个字母就返回true
        var reg = /[a-z]/;
        console.log(reg.test('abc'));
        console.log(reg.test('ad'));
        console.log(reg.test('red'));
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
<body>
    <script>
        // [] 表示有一系列字符可供选择， 只要匹配其中一个就可以了。

        // 26个英文字母任何一个字母返回 true  - 表示的是a 到z 的范围 
        var reg = /^[a-z]$/;
        console.log(reg.test('abc'));
        console.log(reg.test('a'));
        console.log(reg.test('red'));
    </script>
</body>

3.3.4、 方括号内部 取反符^

1
2
3
4
5
# 语法
	/[^a-z]/
	方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 false 。
# 注意
	注意和边界符 ^ 区别，边界符写到方括号外面。  
1
2
3
4
5
6
7
8
9
10
11
<body>
    <script>
        // [] 表示有一系列字符可供选择， 只要匹配其中一个就可以了。

        // 如果中括号里面有^ 表示取反的意思
        var reg = /[^a-z]/;
        console.log(reg.test('abc'));
        console.log(reg.test('a'));
        console.log(reg.test('r2'));
    </script>
</body>

3.3.5、字符组合

1
2
3
# 语法
	/[a-z1-9]/
	方括号内部可以使用字符组合，这里表示包含 a 到 z 的26个英文字母和 1 到 9 的数字都可以。
1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <script>
        // [] 表示有一系列字符可供选择， 只要匹配其中一个就可以了。

        var reg = /[a-zA-Z0-9]/;
        console.log(reg.test('abc'));
        console.log(reg.test('a'));
        console.log(reg.test('r2'));
        console.log(reg.test('_'));
        console.log(reg.test('a_'));
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <script>
        // [] 表示有一系列字符可供选择， 只要匹配其中一个就可以了。

        // 如果中括号里面有^ 表示取反的意思
        var reg = /^[a-zA-Z0-9]/;
        console.log(reg.test('abc'));
        console.log(reg.test('a'));
        console.log(reg.test('a_'));
        console.log(reg.test('_a'));
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <script>
        // [] 表示有一系列字符可供选择， 只要匹配其中一个就可以了。

        // 如果中括号里面有^ 表示取反的意思
        var reg = /[^a-zA-Z0-9]/;
        console.log(reg.test('abc'));
        console.log(reg.test('a'));
        console.log(reg.test('a_'));
        console.log(reg.test('_a'));
    </script>
</body>

3.4、量词

3.4.1、说明

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

0127

1
2
3
// 量词符: 用来设定某个模式出现的次数
// 简单理解: 就是让下面的a这个字符重复多少次
// var reg = /^a$/;

3.4.2、案例1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <script>
        // 量词符: 用来设定某个模式出现的次数
        // 简单理解: 就是让下面的a这个字符重复多少次
        // var reg = /^a$/;

        // * 相当于 >= 0 可以出现0次或者很多次 
        var reg = /^a*/;
        console.log(reg.test(''));
        console.log(reg.test('a'));
        console.log(reg.test('ab'));
        console.log(reg.test('_a'));
    </script>
</body>

3.4.3、案例2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
    <script>
        // 量词符: 用来设定某个模式出现的次数
        // 简单理解: 就是让下面的a这个字符重复多少次
        // var reg = /^a$/;

        // + 相当于 >= 1 可以出现1次或者很多次 
        var reg = /^a+/;
        console.log(reg.test(''));
        console.log(reg.test('a'));
        console.log(reg.test('ab'));
        console.log(reg.test('aab'));
        console.log(reg.test('_a'));
    </script>
</body>

3.4.4、案例3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
    <script>
        // 量词符: 用来设定某个模式出现的次数
        // 简单理解: 就是让下面的a这个字符重复多少次
        // var reg = /^a$/;

        // ?  相当于 1 || 0，要么1次，要么0次
        var reg = /^a?$/;
        console.log(reg.test(''));
        console.log(reg.test('a'));
        console.log(reg.test('aa'));
        console.log(reg.test('_a'));
        console.log(reg.test('aaa'));
    </script>
</body>

3.4.5、案例4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
    <script>
        // 量词符: 用来设定某个模式出现的次数
        // 简单理解: 就是让下面的a这个字符重复多少次
        // var reg = /^a$/;

        // ?  {3} 就是重复3次
        var reg = /^a{3}$/;
        console.log(reg.test(''));
        console.log(reg.test('a'));
        console.log(reg.test('aa'));
        console.log(reg.test('aaa'));
        console.log(reg.test('_a'));
        console.log(reg.test('aaaa'));
    </script>
</body>

3.4.6、案例5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
    <script>
        // 量词符: 用来设定某个模式出现的次数
        // 简单理解: 就是让下面的a这个字符重复多少次
        // var reg = /^a$/;

        // {3, }  大于等于3
        var reg = /^a{3,}$/;
        console.log(reg.test(''));
        console.log(reg.test('a'));
        console.log(reg.test('aa'));
        console.log(reg.test('aaa'));
        console.log(reg.test('_a'));
        console.log(reg.test('aaaa'));
    </script>
</body>

3.4.7、案例6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
    <script>
        // 量词符: 用来设定某个模式出现的次数
        // 简单理解: 就是让下面的a这个字符重复多少次
        // var reg = /^a$/;

        //  {3,6}  大于等于3 并且 小于等于6
        var reg = /^a{3,6}$/;
        console.log(reg.test(''));
        console.log(reg.test('a'));
        console.log(reg.test('aa'));
        console.log(reg.test('aaa'));
        console.log(reg.test('_a'));
        console.log(reg.test('aaaa'));
    </script>
</body>

3.5、案例

3.5.1、需求

​ 用户名验证。

​ 功能需求:

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

3.5.2、代码实现

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
<head>
    <style>
        span {
            color: #aaa;
            font-size: 14px;
        }
        
        .right {
            color: green;
        }
        
        .wrong {
            color: red;
        }
    </style>
</head>
<body>
    <input type="text" class="uname"> <span>请输入用户名</span>
    <script>
        // 这个模式用户只能输入英文字母 数字 下划线 短横线但是有边界符和[] 这就限定了只能多选1
        var reg = /^[a-zA-Z0-9_-]{6,16}$/;

        // 1、获取节点
        var inputObj = document.querySelector('input');
        var spanObj = document.querySelector('span');

        inputObj.onblur = function() {
            if (reg.test(this.value)) {
                spanObj.className = 'right';
                spanObj.innerHTML = '用户名格式输入正确';
            } else {
                spanObj.className = 'wrong';
                spanObj.innerHTML = '用户名格式输入不正确';
            }
        }
    </script>
</body>

3.6、小括号总结

3.6.1、说明

  • 大括号 量词符. 里面表示重复次数
  • 中括号 字符集合。匹配方括号中的任意字符.
  • 小括号 表示优先级

3.6.2、案例1

1
2
3
4
5
6
7
8
<body>
    <script>
        // 只是让c重复三次   abccc
        var reg = /^abc{3}$/;
        console.log(reg.test('abcabc'));
        console.log(reg.test('abccc'));
    </script>
</body>

3.6.3、案例2

1
2
3
4
5
6
7
8
9
<body>
    <script>
        // 只是让c重复三次   abccc
        var reg = /^(abc){3}$/;
        console.log(reg.test('abcabc'));
        console.log(reg.test('abccc'));
        console.log(reg.test('abcabcabc'));
    </script>
</body>

四、预定义类

4.1、概述

4.1.1、说明

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

0128

4.1.2、案例1

1
2
3
4
5
6
7
8
<body>
    <script>
        var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/;
        // var reg = /^\d{3,4}-\d{7,8}$/;
        console.log(reg.test("010-11111111"));
        console.log(reg.test("0101-1111111"));
    </script>
</body>

4.1.3、案例2

1
2
3
4
5
6
7
8
9
10
<body>
    <script>
        var reg = /^\d{3,4}-\d{7,8}$/;
        console.log(reg.test("010-11111111"));
        console.log(reg.test("0101-1111111"));

        console.log(reg.test("010-11111111"));
        console.log(reg.test("0101-11111111"));
    </script>
</body>

五、替换

5.1、replace 替换

5.1.1、说明

​ replace() 方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或是一个正则表达式。

1
2
3
4
5
6
7
# 语法
	stringObject.replace(regexp/substr,replacement)
# 说明
	1、第一个参数:   被替换的字符串 或者  正则表达式
	2、第二个参数:   替换为的字符串
	3、返回值是一个替换完毕的新字符串

5.1.2、案例1

1
2
3
4
5
6
7
8
<body>
    <script>
        var str = "HelloWorld";
        // 仅仅会把第一个o给替换掉
        var result = str.replace("o", 'A');
        console.log(result);
    </script>
</body>

5.1.3、案例2

1
2
3
4
5
6
7
8
<body>
    <script>
        var str = "HelloWorld";
        // 仅仅会把第一个o给替换掉
        var result = str.replace(/o/, 'B');
        console.log(result);
    </script>
</body>

5.2、正则表达式参数

5.2.1、说明

1
2
3
4
5
6
7
8
# 语法
	/表达式/[switch]
# 说明
	switch(也称为修饰符) 按照什么样的模式来匹配. 有三种值：
	g：全局匹配 
	i：忽略大小写 
	gi：全局匹配 + 忽略大小写

5.2.2、案例1

1
2
3
4
5
6
7
8
<body>
    <script>
        var str = "HelloWorld";
        // 搜索全部的o，进行替换
        var result = str.replace(/o/g, 'B');
        console.log(result);
    </script>
</body>

5.2.3、案例2

1
2
3
4
5
6
7
8
<body>
    <script>
        var str = "HelloWOrld";
        // 不区分大小写。
        var result = str.replace(/o/gi, 'B');
        console.log(result);
    </script>
</body>