正则——RegExp

●正则也叫正则表达式，又名 “规则表达式”
●正则是JS中的数据类型, 是一个复杂数据类型
●由我们自己来书写 “规则”，专门用来检测字符串是否符合 “规则” 使用的
●我们使用一些特殊的字符或者符号定义一个 “规则公式”，然后用我们定义好的 “规则公式” 去检测字符串是不是合格

var reg = /\d+/
var str1 = '123'
var str2 = 'abc'
console.log(reg.test(str1)) // true
console.log(reg.test(str2)) // false

●上面的变量 reg 就是定制好的规则
●检测 str1 这个字符串的时候，符合规则
●检测 str2 这个字符串的时候，不符合规则

创建一个正则表达式
●想制定 “规则”，必须要按照人家要求的方式来制定
●把一些字母和符号写在 // 中间的东西，叫做正则表达式，比如 /abcdefg/
●创建正则表达式有两个方式字面量和构造函数创建

字面量创建

// 下面就是字面量创建一个正则表达式
var reg = /abcdefg/

●这个正则表达式就可以去检测字符串了
●这个正则表达式的意义是字符串中的必须要包含'abcdefg'这个片段

构造函数创建

// 下面就是构造函数创建一个正则表达式
var reg = new RegExp('abcdefg')
console.log(reg) //  /abcdefg/

●使用构造函数方式创建的和字面量创建的，得到的结果一样

两种创建方式的区别
●语法不一样
●书写标识符的时候
○字面量方式直接书写在正则的后面
○内置构造函数, 以第二个参数的方式传递
●拼接字符串
○字面量方式不接受拼接字符串
○内置构造函数方式, 可以拼接字符串
●基本元字符书写
○字面量方式的时候, 直接书写 \s\d\w
○内置构造函数书写的时候, 需要书写 \s\d\w





    
    
    
    Document



    <script>
        //书写标识符的区别
        var reg = /abcd/gi
        console.log(reg)
        var reg2 = new RegExp('abcd', 'gi')
        console.log(reg2)


        // 拼接字符串的区别
        var s = 'HH'
        var s2 = 'MM'
        // 不能解析变量
        var reg = /(s|s2)/ //会报错 不能解析变量
        // var reg = /(HH|MM)/
        console.log(reg)
        // 因为第一个参数就是需要你以 字符串 的形式传递 所以可以拼接字符串
        var reg2 = new RegExp('(' + s + '|' + s2 + ')')
        console.log(reg2)


        // 基本元字符的书写的区别
        var reg = /\s\d\w/
        console.log(reg)

        var reg2 = new RegExp('\\s\\d\\w')
        console.log(reg2)
    </script>

正则表达式的方法

●正则提供了一些方法给我们使用
●用来检测和捕获字符串中的内容的
test()方法——匹配
●作用：test方法是用来检测字符串是否符合我们正则的标准
●语法：正则.test(字符串)
●返回值： boolean
○如果该字符串符合正则的规则, 那么就是 true
○如果该字符串不符合正则的规则, 那么就是 false

console.log(/\d+/.test('123')) // true
console.log(/\d+/.test('abc')) // false

exec()方法——捕获

●作用：exec方法是把字符串中满足条件的内容捕获出来
●语法：正则.exec(字符串)
●返回值：把字符串中符合正则要求的第一项以及一些其他信息，以数组的形式返回
○原始字符串中没有符合正则要求的字符串片段
■null
○原始字符串中有符合正则要求的片段
■正则没有 () 也没有全局标识符g
●返回值是一个数组
●索引 0 是从字符串中捕获出来的满足正则条件的第一个内容
●注意: 不管捕获多少次, 每次都是从原始字符串的索引 0 开始检索
■正则有全局标识符 g
●返回值是一个数组
●索引 0 是从字符串中捕获出来的满足正则条件的第一个内容
●注意: 第二次捕获是从第一次的结束位置开始向后查询, 直到最后捕获不到为止, 再下一次的时候, 又从字符串的索引0 开始检索
■有 ()
●返回的是一个数组
●索引 0 是从字符串中捕获出来的满足正则条件的第一个内容
●从索引 1 开始, 依次是每一个小括号的单独内容
●注意: 按照小括号的开始标志, 来数是第几个小括号





    
    
    
    Document



    <script>
        //1. 没有符合要求的片段
        var str = 'vgfdrtyuijkhvgfrtyu'
        var reg = /\d{3}/
        var res = reg.exec(str)
        console.log(res)


        //2. 有符合要求的片段
       //2-1. 没有 () 没有 g
        var str = 'tfyu123gvh456gfh789gyhj'
        var reg = /\d{3}/
        var res = reg.exec(str)
        console.log(res)

        //2-2. 有全局标识符 g
        var str = 'tfyu123gvh456gfh789gyhj'
        var reg = /\d{3}/g
        var res = reg.exec(str)
        console.log(res)
        console.log(reg.exec(str))
        console.log(reg.exec(str))
        console.log(reg.exec(str))
        console.log(reg.exec(str))

        //2-3. 有 ()
        var str = '11010820030223001x'
        var reg = /(\d{2})(\d{2})(\d{2})((\d{4})(\d{2})(\d{2}))\d{2}(\d)(?:\d|x)/
        var res = reg.exec(str)
        console.log(res)
    </script>

●扩展: () 有两个意义
○一个整体
○单独捕获
○如果你想只使用一个意义, 整体的所用, 不想在捕获的时候单独捕获出来
○你可以写成 (?:)表示匹配但不捕获

// 单独捕获
var reg = /(\d{2})(\d{2})(\d{2})(\d{4})(\d{2})(\d{2})\d{2}(\d)(\d|x)/
var res = reg.exec('13072220041010301x')
console.log(res);

正则表达式里面的符号

●知道了怎么创建一个正则表达式以后，我们就来详细的说一下正则表达式里面涉及到的一些符号了
元字符
基本元字符
●. ：匹配非换行的任意字符表示字符串中至少要有一个非换行的内容
●\ ：转译符号，把有意义的符号转换成没有意义的字符，把没有意义的字符转换成有意义的符号
●\s ：匹配空白字符（空格/缩进/制表符/...）表示字符串中至少包含一位空白内容
●\S ：匹配非空白字符
●\d ：匹配数字表示字符串中至少包含一位数字(0-9)
●\D ：匹配非数字表示字符串中至少包含一位非数字内容
●\w ：匹配数字字母下划线表示一位数字(0-9)字母(a-zA-Z)下划线(_) 中的任意一个
●\W ：匹配非数字字母下划线表示一位非数字字母下划线中的任意一个
●有了元字符我们就可以简单的制定一些规则了

// 基本元字符
// \d
// 表示验证的字符串内必须包含一位数字
var reg = /\d/
console.log(reg.test('sfdgdfgfdhfgh'));
console.log(reg.test('sfdgdfgfg4dhfgh7'));
console.log(reg.test('123sfdgdfgfg4dhfgh7'));
// \D
// 表示验证的字符串中必须包含一位非数字
var reg = /\D/
console.log(reg.test('45613165465'));
console.log(reg.test('45613 165465'));
console.log(reg.test('45613d165465'));
console.log(reg.test('45613%165465'));
// \s
// 表示验证的字符串中必须要包含一位空白内容
var reg = /\s/
console.log(reg.test('sgsdfhfgh'));
console.log(reg.test('sgsdf hfgh'));
console.log(reg.test('sgsdf     hfgh'));
console.log(reg.test(`sdgs
dfg`));
// \S
// 表示验证的字符串中必须要包含一位非空白内容
var reg = /\S/
console.log(reg.test('             '));
console.log(reg.test('      d       '));
console.log(reg.test('      #       '));
console.log(reg.test('      .       '));
// \w
// 表示验证的字符船串中必须要包含一位数字字母和下划线
var reg = /\w/
console.log(reg.test('@#%#$%&^*&(*'));
console.log(reg.test('@#%#$%&^2*&(*'));
console.log(reg.test('@#%#$%&^b*&(*'));
console.log(reg.test('@#%#$%&^_*&(*'));
// \W
// 表示验证的字符串中必须要包含一位非数字字母和下划线
var reg = /\W/
console.log(reg.test('asgd353454__'));
console.log(reg.test('asgd353 454__'));
console.log(reg.test('asgd353$454__'));
// .
// 表示验证的字符串中必须要包含一位非换行以外的内容
var reg = /./
console.log(reg.test('\n'));
console.log(reg.test('\ns'));
console.log(reg.test('\n '));
console.log(reg.test('\n@'));
// \
// 表示把有意义的点转成了没有意义的点
var reg = /\d\.\d/
console.log(reg.test('1.5'));
console.log(reg.test('1#5'));

限定符
注意: 一个限定符只能修饰符号前面的一个内容的出现次数
●* ：前一个内容重复至少 0 次，也就是可以出现 0 ～正无穷次
●+ ：前一个内容重复至少 1 次，也就是可以出现 1 ～正无穷次
●? ：前一个内容重复 0 或者 1 次，也就是可以出现 0 ～ 1 次
●{n} ：前一个内容重复 n 次，也就是必须出现 n 次
●{n,} ：前一个内容至少出现 n 次，也就是出现 n ～正无穷次
●{n,m} ：前一个内容至少出现 n 次至多出现 m 次，也就是出现 n ～ m 次
●限定符是配合元字符使用的

// 下面正则表示验证数字出现 0 ～ 正无穷次都可以
var reg = /\d*/
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
console.log(reg.test(str)) // true
console.log(reg.test(str2)) // true
console.log(reg.test(str3)) // true

// 下面正则表示验证数字出现 1 ～ 正无穷次都可以
var reg = /\d+/
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
console.log(reg.test(str)) // false
console.log(reg.test(str2)) // true
console.log(reg.test(str3)) // true

// 下面正则表示验证数字出现 0 ~ 1 次都可以
var reg = /\d?/
var str = 'abc'
var str2 = 'abc1'
console.log(reg.test(str)) // true
console.log(reg.test(str2)) // true

// 下面正则表示验证数字必须出现 3 次
var reg = /\d{3}/
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
console.log(reg.test(str)) // false
console.log(reg.test(str2)) // false
console.log(reg.test(str3)) // true

// 下面正则表示验证数字出现 3 ～ 正无穷次
var reg = /\d{3,}/
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
var str4 = 'abcd1234567'
console.log(reg.test(str)) // false
console.log(reg.test(str2)) // false
console.log(reg.test(str3)) // true
console.log(reg.test(str4)) // true

// 下面正则表示验证数字只能出现 3 ～ 5 次
var reg = /\d{3,5}/
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
var str4 = 'abc12345'
console.log(reg.test(str)) // false
console.log(reg.test(str2)) // false
console.log(reg.test(str3)) // true
console.log(reg.test(str4)) // true

边界符
●^ ：表示开头
●$ ：表示结尾
●边界符是限定字符串的开始和结束的

// 下面表示从开头到结尾只能有数字，并且出现 3 ～ 5 次
var reg = /^\d{3,5}$/
var str = 'abc'
var str2 = 'abc123'
var str3 = '1'
var str4 = '1234567'
var str5 = '123'
var str6 = '12345'
console.log(reg.test(str)) // false
console.log(reg.test(str2)) // false
console.log(reg.test(str3)) // false
console.log(reg.test(str4)) // false
console.log(reg.test(str5)) // true
console.log(reg.test(str6)) // true

特殊符号
●() ：限定一组元素
●[] ：字符集合，表示写在 [] 里面的任意一个都行
●[^] ：反字符集合，表示写在 [^] 里面之外的任意一个都行
●- ：范围，比如 a-z 表示从字母 a 到字母 z 都可以
●| ：或，正则里面的或 a|b 表示字母 a 或者 b 都可以
●现在我们就可以把若干符号组合在一起使用了

// ()
    var reg = /^(abc){2}$/
    console.log(reg.test('abcabc'));
    console.log(reg.test('aabbcc'));
    console.log(reg.test('abcc'));

    // |
    var reg = /^abc|def$/
    console.log(reg.test('abcabc'));
    console.log(reg.test('abc'));
    console.log(reg.test('def'));
    console.log(reg.test('abcdef'));
    console.log(reg.test('defdef'));
    console.log(reg.test('sddhdggfhdgsf'));

    var reg = /^(abc|def)$/
    console.log(reg.test('abcabc'));
    console.log(reg.test('abcdef'));
    console.log(reg.test('defdef'));
    console.log(reg.test('abcsddhdggfhdgsf'));
    console.log(reg.test('sddhdggfhdgsdef'));
    console.log(reg.test('abc'));
    console.log(reg.test('def'));

    // []
    var reg = /^[abcd]$/
    console.log(reg.test('a'));
    console.log(reg.test('b'));
    console.log(reg.test('c'));
    console.log(reg.test('d'));
    console.log(reg.test('e'));

    // [^]

    var reg = /^[^abcd]$/
    console.log(reg.test('a'));
    console.log(reg.test('b'));
    console.log(reg.test('c'));
    console.log(reg.test('d'));
    console.log(reg.test('e'));

    // -
    var reg = /^[0-9]$/
    console.log(reg.test('01'));
    console.log(reg.test('1'));
    console.log(reg.test('2'));
    console.log(reg.test('3'));
    console.log(reg.test('4'));
    console.log(reg.test('5'));
    console.log(reg.test('6'));
    console.log(reg.test('7'));
    console.log(reg.test('8'));
    console.log(reg.test('9'));

标识符(修饰符)
●书写在正则表达式的外面, 专门用来修饰整个正则表达式的符号
●i ：ignore的简写表示忽略大小写
○这个 i 是写在正则的最后面的
○/\w/i
○就是在正则匹配的时候不去区分大小写
●g ： global的简写表示全局匹配
○这个 g 是写在正则的最后面的
○/\w/g
○就是全局匹配字母数字下划线

var reg = /^[a-z]$/i
console.log(reg.test('s'));
console.log(reg.test('g'));
console.log(reg.test('y'));
console.log(reg.test('u'));
console.log(reg.test('A'));

// 有全局修饰符 g
var str = 'sda123fdhm456fnbvb789gdghj345khmgn666bxcvxb'
var reg = /\d{3}/g
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));

字符串和正则合用的方法

●字符串中有一些方法也是可以和正则一起使用的
search
●作用：search 是查找字符串中是否有满足正则条件的内容
●语法：
○字符串.search(正则)
○字符串.search(字符串片段)
●返回值：有的话返回开始索引，没有返回 -1

var reg = /\d{3}/
var str = 'hello123'
var str2 = 'hello'
console.log(str.search(reg)) // 5
console.log(str2.search(reg)) // -1

match

●作用：match 找到字符串中符合正则条件的内容返回
●语法：
○字符串.match(正则)
○字符串.match(字符串片段)
●返回值：
○没有标示符 g 的时候，是和 exec 方法一样
○有标示符 g 的时候，是返回一个数组，里面是匹配到的每一项

var reg = /\d{3}/
var str = 'hello123world456'
var str2 = 'hello'
console.log(str.match(reg))
// ["123", index: 5, input: "hello123wor456", groups: undefined]
console.log(str2.match(reg)) // null


var reg = /\d{3}/g
var str = 'hello123world456'
var str2 = 'hello'
console.log(str.match(reg))
// ["123", "456"]
console.log(str2.match(reg)) // null

replace

●作用：replace 是将字符串中满足正则条件的字符串替换掉
●语法：
○字符串.replace('换下字符', '换上字符')
○字符串.replace(正则表达式, '换上字符')
●返回值：替换后的字符串
○当你的第一个参数传递字符串的时候, 只能替换一个
○当你的第一个参数传递正则表达式的时候, 只能替换一个
○但是如果你的正则表达式有全局标识符 g, 那么有多少替换多少

<script>
    var str = 'fctyHHguHHijHHknHHjgHHhfMMctMMdrMMf'
    console.log(str) //fctyHHguHHijHHknHHjgHHhfMMctMMdrMMf

    var r1 = str.replace('HH', '**')
    console.log(r1) //fcty**guHHijHHknHHjgHHhfMMctMMdrMMf

    var r2 = str.replace(/HH/, '**')
    console.log(r2) //fcty**guHHijHHknHHjgHHhfMMctMMdrMMf

    var r3 = str.replace(/HH/g, '**')
    console.log(r3) //fcty**gu**ij**kn**jg**hfMMctMMdrMMf
</script>

案例——密码强度校验





    
    
    
    Document
    




    
        
        
            弱
            中
            强
        
    

    <script>

        // 密码强度校验
        // + 规则:
        //   => 密码的规则: 数字 字母 符号(@#%&)
        //   => 强度的规则:
        //     -> 弱: 有一类
        //     -> 中: 有两类
        //     -> 强: 全包含

        // 获取元素
        var inp = document.querySelector('input')
        var spans = document.querySelectorAll('span')

        // 准备正则
        // 只要包含一位数字就可以
        var r1 = /\d/
            // 只要包含一位字母就可以
        var r2 = /[a-z]/i
            // 只要包含一位符号就可以
        var r3 = /[@#%&]/

        // 1. 给 inp 绑定 input 事件
        // 随着输入或者删除内容实时触发
        inp.oninput = function() {
            // 2. 拿到 inp 内输入的内容
            var text = inp.value

            // 3. 准备一个表示级别的变量, 默认是 0
            var level = 0

            // 3-1. 依次使用正则校验
            if (r1.test(text)) level++
            if (r2.test(text)) level++
            if (r3.test(text)) level++

             // 在每一次添加类型之前, 给所有 span 清除掉类名
            for (var i = 0; i < spans.length; i++) {
                spans[i].classList.remove('active')
                if (i < level) spans[i].classList.add('active')
            }

        }
    </script>

案例——表单验证





    
    
    
    Document
    




    
        
            用户名: 
            请按照规则填写用户名
        
        
            密码: 
            请按照规则填写密码
        
        
            手机号: 
            请按照规则填写手机号
        
        
            邮箱: 
            请按照规则填写邮箱
        
        
    

    <script>
        // 方案2: 统一验证
        // 1. 给每一个 input 起一个单独的类名(或者标识, 用来区分)
        // 2. 准备正则, 以对象的形式准备正则, 对象的 键就使用 文本框的独立标识, 值就使用 正则
        // 当你的文本框 className === 'username' 的时候, 就使用 regObj 内的一个叫做 username 对应的正则去验证
        var regObj = {
            username: /^[0-9a-z]\w{5,11}$/i,
            password: /^\w{6,12}$/,
            phone: /^\d{11}$/,
            email: /^[0-9a-zA-Z]\w{5,11}@(qq|163|sina)\.(com|cn)$/
        }

        // 3. 获取到所有的文本框
        var inps = document.querySelectorAll('form input')
            // 3-2. 给每一个 input 绑定 表单输入 事件
        inps.forEach(function(item) {
            item.oninput = function() {
                // 4-1. 拿到你正在输入的这个 input 文本框内的文本
                var text = item.value
                    // 4-2. 拿到验证该文本框需要使用的正则
                var reg = regObj[item.className]
                    // 4-3. 拿到应该显示的那个对应的 span 标签
                var span = item.nextElementSibling

                // 4-4. 操作显示和隐藏
                span.style.display = reg.test(text) ? 'none' : 'block'
                    // if (reg.test(text)) {
                    //   span.style.display = 'none'
                    // } else {
                    //   span.style.display = 'block'
                    // }
            }
        })
    </script>

正则预查(扩展)
正向预查
●正向肯定预查:(?=)
●正向否定预查:(?!)
负向预查
●负向肯定预查:(?<=)
●负向否定预查:(?<!)

var str = 'windows2012windows2000windowsXPwindowsVistawindows98windows'
// 1. 正向肯定预查
// 需求: 我需要的是 windows, 但是是后面带有数字的 widnows
// var reg = /windows(?=\d+)/g
// 2. 正向否定预查
// 需求: 我需要的是 windows, 但是后面不是数字的 windows
// var reg = /windows(?!\d+)/g
// 3. 负向肯定预查
// 需求: 我需要的是 windows, 但是前面是数字的 windows
var reg = /(?<=\d+)windows/g
// 4. 负向否定预查
// 需求: 我需要的是 windows, 但是前面不是数字的 windows
var reg = /(?<!\d+)windows/g

JavaScript全解析——正则表达式（js正则表达式?）

正则——RegExp

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿