当前位置：首页 > article >正文

JS中的正则表达式

article 2024/11/2 10:10:30

1.概述

正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript 中，正则表达式是一个对象，它可以用来进行文本搜索和文本替换等操作。

例如，我们想要检查一个字符串是否包含某个特定的单词，或者验证用户输入的电话号码、电子邮件地址等是否符合特定的格式，正则表达式就可以发挥很大的作用。

此外正则表达式还可以替换一些敏感词，或者从字符串中获取我们想要的特点部分（字符串内容提取）等。

2.特点

灵活性、逻辑性和功能性强
可以迅速地用极简单地方式达到字符串地复杂控制
上手容易

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

3.1正则表达式的创建

方式一

利用RegEXP对象创建

var reg = new RegExp(规则)

方式二

字面量方法

var reg = /正则表达式/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01正则表达式的创建方式</title>
</head>
<body>
    <script>
        //1.利用RegExp对象来创建正则表达式
        var reg1 = new RegExp(/123/);
        console.log(reg1);

        //2.利用字面量的方式创建正则表达式
        var reg2 = /123/
        console.log(reg2);

        //3. 在正则表达式中有一个test方法可以用来检测字符串是否符合正则表达式
        console.log(reg1.test(123));
        console.log(reg1.test('abc'));
    </script>
</body>
</html>

3.2正则表达式的特殊字符

3.2.1正则表达式的组成

MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_expressions

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

正则表达式	说明
^	表示匹配行首的文本（以谁开始）
$`	表示匹配行尾的文本（以谁结束）

如果上面的两个在一起，表示必须是精确匹配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02边界符</title>
</head>
<body>
    <script>
        //正则表达式里面不需要加引号，不管是数字型还是字符串型
        //  /abc/  表达的意思是含有abc这个字符串都返回true
        var reg = /abc/;  
        console.log(reg.test('abc'));   //true
        console.log(reg.test('abcd'));  //true
        console.log(reg.test('aabcd')); //true

        //^表示匹配行首的文本（以谁开始）
        var reg1 = /^abc/
        console.log(reg1.test('abc'));   //true
        console.log(reg1.test('abcd'));  //true
        console.log(reg1.test('aabcd')); //false

        //$表示匹配行尾的文本（以谁结束）
        var reg1 = /abc$/
        console.log(reg1.test('abc'));   //true
        console.log(reg1.test('abcd'));  //false
        console.log(reg1.test('aabcd')); //false
        console.log(reg1.test('aabc')); //true

    </script>
</body>
</html>

3.3字符串类

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

3.3.1[]方括号

表示一系列字符可供选择，只要匹配其中的一个就可以了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03方括号</title>
</head>
<body>
    <script>
        // var reg = /abc/  只要包含abc就可以了
        // 字符类： [] 表示有一系列字符可供选择，只要匹配其中的一个就可以了返回true
        var reg = /[abc]/

        console.log(reg.test('admin')); //true
        console.log(reg.test('baby')); //true
        console.log(reg.test('color')); //true
        console.log(reg.test('red')); //false
        console.log('==========================================');
        // 三选一， 开始字符是三选一，结束的字符也是三选一 
        // 如果加了^ 和  $ 则限制了待校验的字符串的长度
        var reg1 = /^[abc]$/
        console.log(reg1.test('aa')); //false
        console.log(reg1.test('a'));    //true
        console.log(reg1.test('b'));//true
        console.log(reg1.test('c'));//true
        console.log(reg1.test('abc'));//false
        console.log('==========================================');
        // 26个英文字母任何一个就可以用 a-z A-Z  0-9
        var reg2 = /^[a-z]$/
        console.log(reg2.test('a'));  //true
        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('!'));    //false

        console.log('==========================================');
        //字符串组合
        var reg3 = /^[a-zA-Z0-9_-]$/
        console.log(reg3.test('a'));  //true
        console.log(reg3.test('B'));  //true
        console.log(reg3.test(8));      //true
        console.log(reg3.test('-'));    //true
        console.log(reg3.test(' '));    //false
        console.log(reg3.test('!'));    //false
        console.log('==========================================');
        //如果括号中出现了多个^,表示取反的意思，千万不要和边界符 ^混淆
        var reg4 = /^[^a-zA-Z0-9_-]$/
        console.log(reg4.test('a'));  //false
        console.log(reg4.test('B'));  //false
        console.log(reg4.test(8));      //false
        console.log(reg4.test('-'));    //false
        console.log(reg4.test(' '));    //true
        console.log(reg4.test('!'));    //true

    </script>
</body>
</html>

3.4量词符

设定某个模式出现的次数

量词	说明
*	0-n次
+	1-n次
？	0次或1次
{n}	n次
{n,}	n次或n次以上
{n,m}	n到m次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04量词</title>
</head>
<body>
    <script>
        //量词作用：用来确定某个模式出现的次数
        // var reg = /^a$/;
        // console.log(reg.test('a'));
        // console.log(reg.test('aa'));

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

        //2. + 相当于 >= 1 (可以出现1次或者是很多次)
        // var reg = /^a+$/;
        // console.log(reg.test('a'));         //true
        // console.log(reg.test('aa'));        //true
        // console.log(reg.test('aaaaaa'));    //true
        // console.log(reg.test(''));          //false

        //3.  ?  相当于  0 || 1
        //var reg = /^a?$/;
        // console.log(reg.test('a'));         //true
        // console.log(reg.test('aa'));        //false
        // console.log(reg.test('aaaaaa'));    //false
        // console.log(reg.test(''));          //true

        //4. {n}  就表示重复n次
        // var reg = /^a{3}$/;      //必须重复3次
        // console.log(reg.test('a'));         //false
        // console.log(reg.test('aa'));        //false
        // console.log(reg.test('aaa'));        //true
        // console.log(reg.test('aaaaaa'));    //false
        // console.log(reg.test(''));          //false

        //5. {n,}  相当于 >= n 表示重复次数是n次或更多次
        // var reg = /^a{3,}$/;      //必须重复3次或以上
        // console.log(reg.test('a'));         //false
        // console.log(reg.test('aa'));        //false
        // console.log(reg.test('aaa'));        //true
        // console.log(reg.test('aaaaaa'));    //true
        // console.log(reg.test(''));          //false

        //6. {n,m}  表达式大于等于n，并且小于或等于m
        var reg = /^a{3,6}$/;      //必须重复6次到6次
        console.log(reg.test('a'));         //false
        console.log(reg.test('aa'));        //false
        console.log(reg.test('aaa'));        //true
        console.log(reg.test('aaaaaa'));    //true
        console.log(reg.test('aaaaaaaaa'));    //false
        console.log(reg.test(''));          //false

    </script>
</body>
</html>

3.5案例（用户名校验）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05用户户名校验</title>
    <style>
        span{
            color: #aaa;
            font-size: 14px;
        }
        .right {
            color:green;
        }
        .wrong {
            color:red;
        }
    </style>
</head>
<body>
    <input type="text" class="username"><span>请输入用户名</span>
    <script>
        //正则表达式：只能是字母（大小写）数字或下划线，重复次数为6次到16次
        var reg = /^[a-zA-Z0-9_]{6,16}$/;

        //1.获取用户输入的用户名
        var username = document.querySelector('.username');
        var span = document.querySelector('span');

        //输入完后，失去焦点(blur)触发事件
        username.onblur = function(){
            if(this.value == ''){
                span.className = ''
                span.innerHTML = '请输入用户名'
                return false;
            }
            if(reg.test(this.value)){
                span.className = 'right'
                span.innerHTML = '用户名格式输入正确'
            } else {
                span.className = 'wrong'
                span.innerHTML = '用户名格式输入错误'
            }
        }
    </script>
</body>
</html>

3.6 括号总结

大括号：量词符，表示重复次数
中括号：字符集合，匹配方括号中的任意一个字符
小括号：表示优先级

工具大全[https://www.jyshare.com/]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //小括号表示优先级
        var reg = /^(abc){3}$/ // 表示abc重复3次
        console.log(reg.test('abc'));
        console.log(reg.test('abcabcabc'));
        console.log(reg.test('abccc'));
    </script>
</body>
</html>

3.7 预定义类

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

预定义类	说明
`\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]`

座机号校验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //小括号表示优先级
        // var reg = /^(abc){3}$/ // 表示abc重复3次
        // console.log(reg.test('abc'));
        // console.log(reg.test('abcabcabc'));
        // console.log(reg.test('abccc'));


        //校验座机号：全国的做记号有两种格式：
        //1）010-12345678
        //2）0710-1234567
        //var reg = /^[0-9]{3}-[0-9]{8}|[0-9]{4}-[0-9]{7}$/
        //var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/
        var reg = /^(\d{3}-\d{8})|(\d{4}-\d{7})$/
        //var reg = /^\d{3,4}-\d{7,8}$/
        console.log(reg.test('0710-8237789'));
        console.log(reg.test('0710-12345678'));
        console.log(reg.test('027-83891595'));
    </script>
</body>
</html>

3.8.表单校验案例

看代码，js部分

window.onload = function(){
    var tel = document.querySelector('#tel'); //手机号
    var qq = document.querySelector('#qq'); //qq号
    var nc = document.querySelector('#nc'); //昵称
    var msg = document.querySelector('#msg'); //短信验证码
    var pwd = document.querySelector('#pwd'); //登录密码
    var surepwd = document.querySelector('#surepwd'); //确认密码
    var regtel = /^1[3456789]\d{9}$/ //手机号正则表达式
    var regqq = /^[1-9]\d{3,}$/ //qq正则表达式
    var regnc = /^[\u4e00-\u9fa5]{2,8}$/ //昵称
    var regmsg = /^\d{4}$/ //短信验证码
    var regpwd = /^\w{6,11}$/ //密码

    regex(tel,regtel); //手机号校验
    regex(qq,regqq); //qq号校验
    regex(nc,regnc); //昵称校验
    regex(msg,regmsg); //验证码校验
    regex(pwd,regpwd); //密码校验

    // 表单校验函数
    function regex(ele,reg){
        ele.onblur = function(){
            if(reg.test(this.value)){
                this.nextElementSibling.className = 'success'
                this.nextElementSibling.innerHTML = '<i class="success_icon"></i>恭喜您输入正确'
            }else{
                this.nextElementSibling.className = 'error'
                this.nextElementSibling.innerHTML = '<i class="error_icon"></i>格式不正确，请重新输入'
            }
        }
    }


    surepwd.onblur = function(){
        if(regpwd.test(pwd.value) == false){ //密码校验不通过
            pwd.nextElementSibling.className = 'error'
            pwd.nextElementSibling.innerHTML = '<i class="error_icon"></i>格式不正确，请重新输入'
            pwd.focus();
            return false;
        }
        if(this.value == pwd.value){
            this.nextElementSibling.className = 'success'
            this.nextElementSibling.innerHTML = '<i class="success_icon"></i>恭喜您输入正确'
        }else{
            this.nextElementSibling.className = 'error'
            this.nextElementSibling.innerHTML = '<i class="error_icon"></i>格式不正确，请重新输入'
        }
    }

}

3.9 正则替换replace

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>09replace</title>
</head>
<body>
    <script>
        // var str = 'pink和redpink';
        // //replace对str这个字符串是没有做修改的
        // var newStr = str.replace('pink','blue');
        // console.log(newStr);
        // //等同于此处的pin可以写在正则表达式里
        // var newStr2 = str.replace(/pink/,'blue');
        // console.log(newStr2);

        //全部替换 
        var str = 'abcabc';
        var newStr = str.replace(/a/g,'哈哈');
        console.log(newStr);

        //忽略大小写 i
        var str2 = 'abcAbc';
        var newStr2 = str.replace(/a/gi,'哈哈');
        console.log(newStr2);
    </script>
</body>
</html>

3.10 过滤敏感词汇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10过滤敏感词汇</title>
</head>
<body>
    <textarea name="" id="message"></textarea><button>提交</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var message = document.querySelector('#message');
        var div = document.querySelector('div');
        btn.onclick = function(){
            div.innerHTML = message.value.replace(/蔡徐坤|鸡哥/g,'**');
        }
    </script>
</body>
</html>