前端学习第十四天——强大的正则表达式-CSDN博客

本文链接：https://blog.csdn.net/qq_43493084/article/details/112756041

前端学习第十四天——强大的正则表达式

正则表达式

正则表达式(regular expression)：描述字符串的“构成模式”，经常被用于检查字符串是否符合预定的格式要求

正则表达式的创建

使用/内容/的语法形式，可以快速创建正则表达式
也可以使用new RegExp()的形式，创建正则表达式

元字符

元字符	工能
`\d`	匹配一个数字
`\D`	匹配一个非数字字符
`\w`	匹配一个单字符（字母、数字或下划线）
`\W`	匹配一个非单字字符
`\s`	匹配一个空白字符，包括空格、制表符、换行符
`.`	任意字符
`^`	匹配开头
`$`	匹配结尾

如果使用new RegExp()写法，反斜杠需要多写一个
比如：/^\d$/和new RegExp('^\\d$')是相同的意思

字符的转义

在特殊字符前的反斜杠\表示下一个字符不是特殊字符。

方括号标表示法

使用方括号，比如[xyz]，可以创建一个字符集合，表示匹配方括号中的任意字符

可以使用短横"-"来指定一个字符的范围，^表示否定

元字符	等价的方法括号表示
`\d`	[0-9]
`\D`	[^0-9]
`\w`	[A-Za-z0-9_]
`\W`	[^A-Za-z0-9_]

量词

量词	意义
`*`	匹配前一个表达式0次或多次。等价于{0,}
`+`	匹配前一个表达式1次或多次。等价于{1,}
`?`	匹配前一个表达式0次或1次。等价于{0,1}
`{n}`	n是一个正整数，匹配了前面一个字符刚好出现了n次
`{n,}`	n是一个正整数，匹配了前面一个字符至少出现了n次
`{n,m}`	n和m是一个正整数，匹配了前面一个字符至少出现了n次，最多m次

修饰符

修饰符也叫作标志(flags),用于使用正则表达式实现高级搜索

修饰符	意义
`i`	不区分大小写搜索
`g`	全局搜索

正则表达式的相关方法

正则表达式可以“打点”调用的方法

方法	简介
`test()`	测试某个字符串是否匹配正则表达式，返回布尔值
`exec()`	根据正则表达式，在字符串中进行查找，返回结果数组或null

    <script>
        var str = 'abc123def456ghi789';
        var regexp = /\d+/g;    // +表示贪婪的，尽可能多的匹配
        var result1 = regexp.exec(str);
        var result2 = regexp.exec(str);
        var result3 = regexp.exec(str);
        var result4 = regexp.exec(str);
        console.log(result1);
        console.log(result2);
        console.log(result3);
        console.log(result4);

        // 使用循环语句来循环执行exec，寻找所有的匹配结果
        var result;
        while (result = regexp.exec(str)) {
            console.log(result);
        }
    </script>

方法	简介
`search()`	在字符串中根据正则表达式进行查找匹配，返回首次匹配到的位置索引，找不到则返回-1
`match()`	在字符串中根据正则表达式进行查找匹配，返回一个数组，找不到返回null
`replace()`	使用替换字符串替换掉匹配到的字符串，可以使用正则表达式
`split()`	分隔字符串为数组，可有使用正则表达式

表单验证

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"   content="width=device-width,  initial-scale=1.0">
        <title>表单验证</title>
        <style>
            .warning {
                color: red;
                display: none;
            }
        </style>
    </head>
    <body>
        <div>
            <p>
                请输入中文姓名：
                <input type="text" id="nameField">
                <span class="warning"   id="nameWarning">输入的姓名不合法</   span>
            </p>
            <p>
                请输入手机号码：
                <input type="text" id="telField">
                <span class="warning"   id="telWarning">输入的手机号码不合法  </span>
            </p>
            <p>
                请输入Email：
                <input type="text" id="emailField">
                <span class="warning"   id="emailWarning">输入的Email不合法</ span>
            </p>
        </div>
        <script>
            var nameField = document.getElementById ('nameField');
            var telField = document.getElementById  ('telField');
            var emailField = document.getElementById    ('emailField');
            var nameWarning = document. getElementById('nameWarning');
            var telWarning = document.getElementById    ('telWarning');
            var emailWarning = document.    getElementById('emailWarning');
    
            // 当文本框失去焦点，就是光标不在文本框中了
            nameField.onblur = function () {
                // 得到姓名
                var name = nameField.value;
                if (/^[\u4E00-\u9FA5]{2,4}$/.test   (name)) {
                    // 如果通过校验
                    nameWarning.style.display =     'none';
                } else {
                    // 如果没有通过校验
                    nameWarning.style.display =     'inline';
                }
            };
    
            telField.onblur = function () {
                // 得到电话
                var tel = telField.value;
                if (/^1\d{10}$/.test(tel)) {
                    // 如果通过校验
                    telWarning.style.display =  'none';
                } else {
                    // 如果没有通过校验
                    telWarning.style.display =  'inline';
                }
            };
    
            emailField.onblur = function () {
                // 得到email
                var email = emailField.value;
                // 合法的email都是abc_def123@abc.net
    
                if (/^\w{2,}\@\w{2,}\.[a-z]{2,4}(\. [a-z]{2,4})?$/.test(email)) {
                    // 如果通过校验
                    emailWarning.style.display =    'none';
                } else {
                    // 如果没有通过校验
                    emailWarning.style.display =    'inline';
                }
            };
        </script>
    </body>
    </html>