【第六部分 | JavaScript高级】3：正则表达式

朱雀 2023-09-23 16:18 116阅读 0赞

**目录**

【第三章】正则表达式（重点）

| 概述

| 创建正则表达式

| 测试某个字符串是否符合正则

| 正则符号

什么是正则符号？

1.1.边界符 ^ $

1.2.连字符 -

2.1.字符类—方括号符 \[\]

2.2.字符类—方括号符内 范围符 - （易错）

2.3.字符类—方括号符内 取反符^ （易错）

2.4.字符类—方括号符内 字符组合

3.1.量词符

3.2.量词符作用：规定某个模式的次数范围

4.1.预定义类

5.1.正则表达式中的括号总结 // \[\] \{\} () 及 |

6.1.正则替换 replace()

案例：验证用户输入的用户名是否符合规范

--------------------

## 【第三章】正则表达式（重点） ##

### | 概述 ###

![1938be7ea9fd47f2925f1e22949498fa.png][]

简介

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

特点

![b3181dedf2a74633870c6485a57cc10c.png][]

###    **| 创建正则表达式** ###

方法一：通过调用 RegExp 对象的构造函数创建

*  **正则表达式不需要加引号**
 *  必须使用/ /括起来

var 变量名 = new RegExp(/表达式/);

方法二：通过字面量创建

var 变量名 = /表达式/;

代码示例

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            //创建正则表达式 第一种方法
            var regexp = new RegExp(/123/);
            console.log(regexp); //   /123/
    
            //创建正则表达式 第二种方法
            var regexp2 = /456/;
            console.log(regexp2);//   /456/
    
            
        </script>
    </head>
    <body>
        
    </body>
    </html>

### | 测试某个字符串是否符合正则 ###

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

regexObj.test(str)

![d5f5c7a51e6442299b77e7509ecc0df9.png][]

代码示例

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            var regexp = /123/;
            console.log(regexp.test(123)); //true
            console.log(regexp.test(234)); //false
        </script>
    </head>
    <body>
        
    </body>
    </html>

### | 正则符号 ###

#### 什么是正则符号？ ####

*  一个正则表达式可以由简单的字符构成，比如 /abc/，也可以是简单和特殊字符的组合，比如 /ab\*c/ 。其中 特殊字符也被称为元字符，在正则表达式中是具有特殊意义的专用符号，如 ^ 、$ 、+ 等
 *  在线正则表达式测试网站：[正则表达式在线测试 | 菜鸟工具][Link 1]
 *  更多正则符号请参考菜鸟：[正则表达式 – 运算符优先级 | 菜鸟教程][_ _ _]

--------------------

#### 1.1.边界符 ^ $ ####

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

![a06248fe27c04996bd8f83d191467ff3.png][]

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

代码示例

![5c8e0b2a0bf44ae9a4de9db9e860a2f2.png][]

代码示例2

//边界符 ^ $
            var regexp1 = /^a/;
            console.log(regexp1.test('ab'));//true
            console.log(regexp1.test('ba'));//false

#### 1.2.连字符 - ####

*  若在 / / 内， \[ \]外添加的 短横线，则代表这个地方必须写上一个横线。否则为false

代码示例

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            var r1 = /^A-B$/;
            console.log(r1.test('A-B'));//true
            console.log(r1.test('A'));//false
        </script>
    </head>
    <body>
        
    </body>
    </html>

--------------------

#### 2.1.字符类—方括号符 \[\] ####

*  字符类表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内。
 *  需要注意的是：如果供选择的字符是数字，写成 /^\[1|2|3\]$/ 或者 /^\[123\]$/ 均可以

代码示例

![b6b45b337b7e40d6aebec94b0e5743d7.png][]

代码示例2

//方括号符 []
            var regexp2 = /[a-b]/;
            console.log(regexp2.test('bc'));//true 包含a
            console.log(regexp2.test('cd'));//false 不包含a、b的任何一个

#### **2.2.字符类—方括号符内 范围符 - （易错）** ####

*  方括号内部加上 - 表示范围，如 /^\[a-z\]$/ 表示 a 到 z 26个英文字母任意一个都可以。
 *  若 \- 是在\[ \]外部添加的，则代表的是：匹配的字符串中必须在那个位置有 - 短横线

代码示例

![5bb164d7115d44f183e4588a505ce1f6.png][]

--------------------

#### **2.3.字符类—方括号符内 取反符^ （易错）** ####

*  方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 false 。
 *  注意和边界符区分！！ 取反符是写在 \[ \] 内部的！ 而边界符是写在 / / 的最左侧的

语法

/[^abc]/.test('andy') // 方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 false 。

代码示例

//方括号符-取反符  [^]
            var regexp3 = /[^a-b]/
            console.log(regexp3.test('a'));//false
            var regexp4 = /^[^a-b]/ //必须包含（不含a-b的字符，即：只要不包含a、b即为true）
            console.log(regexp4.test('a'));//false
            console.log(regexp4.test('c'));//true

#### 2.4.字符类—方括号符内 字符组合 ####

*  方括号内部可以使用字符组合，相当于多个范围

代码示例

/[a-z1-9]/.test('andy')  //示包含 a 到 z 的26个英文字母或 1 到 9 的数字都

/a-zA-Z1-9/  //代表只要是a-z A-Z 1-9中的任何一个字符即可

#### 3.1.量词符 ####

![52eb4f2f56234854b9bca8a2451c237f.png][]

代码示例

//量词符
            var regexp5 = /^a*$/ //含义：符号*前面的a可以重复0次/多次 才true
            console.log(regexp5.test(''));//true
            console.log(regexp5.test('aaaa'));//true
    
            var regexp6 = /^a+$/ //+前面的a必须出现大于等于1次才true
            console.log(regexp6.test(''));//false 
            console.log(regexp6.test('a'));//true
    
            var regexp7 = /^a?$/ //?前面的a 要么出现1次，要么不出现。若大于一次，则false
            console.log(regexp7.test(''));//true
            console.log(regexp7.test('a'));//true
            console.log(regexp7.test('aa'));//false
    
            var regexp8 = /^a{3}$/ //{3}前面的a需要重复三次才true
            console.log(regexp8.test('aa'));//false
            console.log(regexp8.test('aaa'));//true
            console.log(regexp8.test('aaaa'));//false
    
            var regexp9 = /^a{3,}$/ //{3,}前面的a需要重复三次或者更多次才true
            console.log(regexp9.test('aa'));//false
            console.log(regexp9.test('aaa'));//true
            console.log(regexp9.test('aaaa'));//true
    
            var regexp10 = /^a{3,4}$/ //{3,}前面的a需要重复三次或者4次才true
            console.log(regexp10.test('aa'));//false
            console.log(regexp10.test('aaa'));//true
            console.log(regexp10.test('aaaa'));//true
            console.log(regexp10.test('aaaaa'));//false

#### **3.2.量词符作用：规定某个模式的次数范围** ####

*  如用户名：每个字符只能输入 A-Z a-z 0-9 \_ - 且位数为6-18位。
 *  上述要求，可以通过正则符号中的 【字符类】+【量词符】做到。前者规定每个**字符（只能输入一个）**输入的规范，后者规定字符的个数范围

代码示例

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            var regexp = /^[A-Za-z0-9_-]{6,18}$/ //每个字符规定为A-Z a-z 0-9 下划线 短横线。  字符的长度规定为[6，18]
    
            var userName1 = 'AAAzzz998';
            console.log(regexp.test(userName1));//true：每个字符都符合规定，且字符串长度也符合规定
    
            var userName2 = 'abcde';
            console.log(regexp.test(userName2));//false：虽然每个字符都符合规定，但是字符串长度不符合规定
    
            var userName3 = '*AAAAAAA'; 
            console.log(regexp.test(userName3));//false：第一个字符 * 不符合规定
            
        </script>
    </head>
    <body>
        
    </body>
    </html>

#### 4.1.预定义类 ####

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

![ddcb5b251d3d4613a1dcdbc130ad23ee.png][]

代码示例

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            var regexp = /^\W$/ //除所有 字母、数字、下划线以外的字母
            console.log(regexp.test('a'));//false
            console.log(regexp.test('-'));//true
        </script>
    </head>
    <body>
        
    </body>
    </html>

案例：座机号验证

![1ad1c59d778d45e396d9b4718c041354.png][]

#### **5.1.正则表达式中的括号总结 // \[\] \{\} () 及 |** ####

/ / 正则表达式的总括号

\[ \] 匹配方括号内规则的**字符**

\{ \} 量词符，表示重复的次数 注意： /^abc\{3,5\}$/ 代表的是 c应出现3-5次而不是abc

( ) 小括号表示优先级  上述若想abc出现3次，则应该写成 /^(abc)\{3,5\}$/

| 表示“或”

辨析：

/^abc\{3,5\}$/ ab + 3-5个c

/^【abc】\{3,5\}$/ 3-5个字符，字符规则：a、b、c任意一个

/^(abc)\{3,5\}$/ 3-5个abc

--------------------

#### **6.1.正则替换 replace()** ####

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

方法一（只能匹配第一个符合的）

语法（第一个参数: 被替换的字符串 或者 正则表达；第二个参数: 替换为的字符串；返回值是一个替换完毕的新字符串）

stringObject.replace(regexp/substr,replacement)

若有多个敏感词，可以在正则表达式中用 | 分割

str.replace(/敏感词A|敏感词B|……|敏感词n/,替换为)

示例

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            var oldstr = '我cnm！cnm！';
    
            //单个匹配
            console.log(oldstr.replace(/cnm/,'***')); //我***！cnm!
        </script>
    </head>
    <body>
        
    </body>
    </html>

方法二（可以全局匹配）

语法（就是在正则表达式后面加个 标识符 g 或 i 或 gi）

/表达式/[switch]

*  switch(也称为修饰符) 按照什么样的模式来匹配
 *  有三种值： g：全局匹配 i：忽略大小写 gi：全局匹配 + 忽略大小

示例

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            var oldstr = '我cnm！cnm！';
            //全局匹配
            console.log(oldstr.replace(/cnm/gi,'***')); //我***！***！
            
        </script>
    </head>
    <body>
        
    </body>
    </html>

#### 案例：验证用户输入的用户名是否符合规范 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            /* 表单父盒子 */
            .input1 {
                width: 800px;
                height: 40px;
                margin: 200px auto;      
            }
    
            /* 输入框 */
            .input1 input {
                width: 300px;
                height: 30px;
                margin-left: 10px;
                background-color: rgb(209, 227, 248);
            }
    
            /* 获得焦点的时候 取消输入框的边框 */
            .input1 input:focus {
                outline: none;
            }
    
            /* 提示输入 */
            .input1 .tip {
                font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                font-weight: 500;
                color: rgb(115, 168, 228);
            }
    
            /* 错误信息 */
            .input1 .error {
                font-family: 'Microsoft YaHei';
                font-weight: 300;
                font-size: 13px;
                margin-left: 10px;
                color: red;
                visibility: hidden;
            }
    
            
        </style>
    
        <script>
            window.addEventListener('load',function(){
                var inputObj = document.querySelector('.input1 input');
                var errortipObj = document.querySelector('.input1 .error');
    
                inputObj.addEventListener('blur',function(){
                    var content = inputObj.value;
                    console.log(content);
                    //正则表达式
                    var regexp = /^[a-zA-Z0-9_-]{6,18}$/;
                    if(!regexp.test(content)){
                        //若不符合规则，则span变红，让 .input1 .error的visibility为visible（注意：这个是style里的样式属性，需要obj.style.xxx）
                        errortipObj.style.visibility = 'visible';
                    }else{
                        errortipObj.style.visibility = 'hidden';
                    }
                })
            })
        </script>
    </head>
    <body>
        <div class="input1">
            <span class="tip">设置用户名</span> <input type="text" placeholder="英文字母、数字、下划线，6-18位">  
            <span class="error"> X Error （请检查英文字母、数字、下划线、6-18位）</span>
        </div>
    </body>
    </html>

[1938be7ea9fd47f2925f1e22949498fa.png]: https://img-blog.csdnimg.cn/1938be7ea9fd47f2925f1e22949498fa.png
[b3181dedf2a74633870c6485a57cc10c.png]: https://img-blog.csdnimg.cn/b3181dedf2a74633870c6485a57cc10c.png
[d5f5c7a51e6442299b77e7509ecc0df9.png]: https://img-blog.csdnimg.cn/d5f5c7a51e6442299b77e7509ecc0df9.png
[Link 1]: https://c.runoob.com/front-end/854/
[_ _ _]: https://www.runoob.com/regexp/regexp-operator.html
[a06248fe27c04996bd8f83d191467ff3.png]: https://img-blog.csdnimg.cn/a06248fe27c04996bd8f83d191467ff3.png
[5c8e0b2a0bf44ae9a4de9db9e860a2f2.png]: https://img-blog.csdnimg.cn/5c8e0b2a0bf44ae9a4de9db9e860a2f2.png
[b6b45b337b7e40d6aebec94b0e5743d7.png]: https://img-blog.csdnimg.cn/b6b45b337b7e40d6aebec94b0e5743d7.png
[5bb164d7115d44f183e4588a505ce1f6.png]: https://img-blog.csdnimg.cn/5bb164d7115d44f183e4588a505ce1f6.png
[52eb4f2f56234854b9bca8a2451c237f.png]: https://img-blog.csdnimg.cn/52eb4f2f56234854b9bca8a2451c237f.png
[ddcb5b251d3d4613a1dcdbc130ad23ee.png]: https://img-blog.csdnimg.cn/ddcb5b251d3d4613a1dcdbc130ad23ee.png
[1ad1c59d778d45e396d9b4718c041354.png]: https://img-blog.csdnimg.cn/1ad1c59d778d45e396d9b4718c041354.png