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

| 概述

| 创建正则表达式

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

| 正则符号

什么是正则符号？

1.1.边界符 ^ $

1.2.连字符 -

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

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

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

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

3.1.量词符

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

4.1.预定义类

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

6.1.正则替换 replace()

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

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

| 概述

简介

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

特点

| 创建正则表达式

方法一：通过调用 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)

代码示例

<!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/ 。其中特殊字符也被称为元字符，在正则表达式中是具有特殊意义的专用符号，如 ^ 、$ 、+ 等
在线正则表达式测试网站：正则表达式在线测试 | 菜鸟工具
更多正则符号请参考菜鸟：正则表达式 – 运算符优先级 | 菜鸟教程

1.1.边界符 ^ $

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

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

代码示例

代码示例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]$/ 均可以

代码示例

代码示例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个英文字母任意一个都可以。
若 - 是在[ ]外部添加的，则代表的是：匹配的字符串中必须在那个位置有 - 短横线

代码示例

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.量词符

代码示例

        //量词符
        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.预定义类

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

代码示例

<!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>

案例：座机号验证

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>