正则表达式

W`hite2023-12-09 9:00

什么是正则

  • 正则就是一种规则的的表达式,书写一段规则,用于匹配一段字符串是否符合规则
    创建正则表达式（two way）
  1. 字面量的形式
  2. 内置构造函数的形式
html 复制代码 
<script>
    *1.字面量的形式
    const reg = /abc/

    *2.内置构造函数的形式
    const reg1 = new RegExp('abc')

    console.log(reg)  // /abc/
    console.log(reg1)  // /abc/
</script>

正则的常用方法

1.匹配（test）

匹配字符串是否符合正则规则

符合--->true

不符合--->false

语法: 正则.test(字符串)
2.捕获

语法:正则.exec(字符串)

元字符

组成

1.元字符：正则表达式的规则符号

2.修饰符：修饰整个正则表达式的符号

1.普通元字符

1.\d ------ 表示一位(一个)数字(0~9)

  1. \D ------ 表示 一位 非数字(除了0~9)

  2. \w ------ 表示 数字(0~9)字母(a-zA-Z)下划线(_) 其中的 一个

4.\W ------ 表示 除了 数字(0~9)字母(a-zA-Z)下划线 这些的某一个字符

  1. \s ------ 表示 一位 空白字符

  2. \S ------ 表示 一位 非空白字符

7.. ------ 表示 一位 非换行的任意字符

8.\------ 表示转义符

有意义的符号, 转为没有意义的文本

没有意义的文本, 转为有意义的符号

html 复制代码 
<script>
        const reg = /\d/    // 表示字符串中 至少包含一个 数字(0~9)

        console.log(reg.test('qwertyuiop')) // false
        console.log(reg.test('!@#$%^&*')) // false
        console.log(reg.test('1000')) // true

        const reg1 = /\D/   // 表示字符串中 至少出现一个 非数字的内容
        console.log(reg1.test('qwertyuiop')) // true
        console.log(reg1.test('!@#$%^&*')) // true
        console.log(reg1.test('1000')) // false

        const reg = /\w/    // 表示字符串中 至少包含一个 数字(0~9)字母(a-zA-Z)下划线(_) 其中的 一个

        console.log(reg.test('@#$%^&*'))    // false
        console.log(reg.test('@#$%_^&*'))    // true
        console.log(reg.test('y@#$%^&*'))    // true
        console.log(reg.test('6@#$%^&*'))    // true
        console.log(reg.test('abc_123'))    // true

        const reg1 = /\W/   //表示 字符串中 至少出现一个  数字(0~9)字母(a-zA-Z)下划线(_) 以外的 字符
        console.log(reg1.test('@#$%^&*'))    // true
        console.log(reg1.test('@#$%_^&*'))    // true
        console.log(reg1.test('y@#$%^&*'))    // true
        console.log(reg1.test('6@#$%^&*'))    // true
        console.log(reg1.test('abc_123'))    // false

        const reg = /\s/    // 表示字符串中 至少出现一个 空白字符
        console.log(reg.test('asd'))    // false
        console.log(reg.test('213'))    // false
        console.log(reg.test('#$%'))    // false
        console.log(reg.test('#$ %'))    // true

        const reg1 = /\S/   // 表示字符串 至少出现一个 非空白字符
        console.log(reg1.test('asd'))    // true
        console.log(reg1.test('213'))    // true
        console.log(reg1.test('#$%'))    // true
        console.log(reg1.test('#$ %'))    // true
        console.log(reg1.test(' '))    // false

        const reg = /./ // 表示字符串 至少出现一个 非换行的任意字符
        console.log(reg.test('\n')) // false
        console.log(reg.test('123\n')) // true

        const reg1 = /\./   // 表示字符串中至少出现一个 小数点
        console.log(reg1.test('100'))   // false
        console.log(reg1.test('1.00'))   // true
</script>

2.边界元字符

1.^ ------ 表示开头

2.$ ------ 表示结尾

html 复制代码 
<script>
        const reg1 = /\d/    // 表示字符串至少出现一个数字
        console.log(reg1.test('abc123def'))  // true
        
        const reg2 = /^\d/    // 表示字符串开头是一个数字
        console.log(reg2.test('abc123def')) // false
        console.log(reg2.test('123def'))    // true

        const reg3 = /\d$/    // 表示字符串结尾是一个数字
        console.log(reg3.test('abc123def')) // false
        console.log(reg3.test('abc123')) // true

        const reg4 = /^\d$/    // 表示字符串只能是一个数字
        console.log(reg4.test('abc123def')) // false
        console.log(reg4.test('123def'))    // false
        console.log(reg4.test('123'))       // false
        console.log(reg4.test('1'))         // true
</script>

3.限定元字符

表示前边一个符号代表的内容出现多少次

1.* ------ 表示0~正无穷次

  1. +------ 表示 1~正无穷次

  2. ? ------ 表示 0~1次

  3. {n} ------ 表示 限定 n 次, 不能多也不能少

  4. {n,} ------ 表示 最少 n 次

  5. {n,m} ------ 表示 最少 n 次, 最多 m 次

html 复制代码 
<script>
        const reg1 = /^\d*$/  // 这个字符串的数字只能出现 0~正无穷次
        console.log(reg1.test('1'))   // true
        console.log(reg1.test('1a'))   // false

        const reg2 = /^\d+$/ // 这个字符串的数字只能出现1~正无穷
        console.log(reg2.test('100'))    // true
        console.log(reg2.test('qwer'))    // false
        console.log(reg2.test('999qwer'))    // false

        const reg3 = /^\d?$/ // 这个字符串的数字只能出现 0~1 次
        console.log(reg3.test('666'))    // false
        console.log(reg3.test('6'))    // true

        const reg4 = /^\d{2}$/   // 这个字符串的数字只能出现 2 次
        console.log(reg4.test('666'))    // false
        console.log(reg4.test('66'))    // true
        console.log(reg4.test('6'))    // false

        const reg5 = /^\d{2,}$/   // 这个字符串的数字最少出现 2 次
        console.log(reg5.test('666'))    // true
        console.log(reg5.test('66'))    // true
        console.log(reg5.test('6'))    // false

        const reg6 = /^\d{2,3}$/   // 这个字符串的数字最少出现 2 次 最多出现3次
        console.log(reg6.test('6666'))    // false
        console.log(reg6.test('666'))    // true
        console.log(reg6.test('66'))    // true
        console.log(reg6.test('6'))    // false
</script>

4.特殊符号

1.()

  • 当成一个整体
  • 单独捕获(欠着)

2.|

  • 或
    字符为 或 左右两边的 都行

3.[ ]

  • 包含
    注意: [abcd] 包含其中一个即可 [] 实际代表的就是 一位字符

4.[^]

  • 非
    注意: [^abcd] 只要不是他们四个中的一个即可 [^] 实际代表的就是 一位字符

5.-

  • 到(至)
    通常与 包含 和 非 一起使用
    [0-9] 数字 0~9 中的一个 \d
    [^0-9] 不是数字 0~9 中的 一个 \D
    [a-z] 小写 字母a~z
    [A-Z] 大写 字母A~Z
html 复制代码 
<script>
        const reg = /(abc){2}/  // 表示 abc 这个整体 一定出现 2 次
        console.log(reg.test('abcdef')) // false
        console.log(reg.test('abcab')) // false
        console.log(reg.test('abcabc')) // true

        const reg = /(abc|def){2}/  // 这个字符串需要 abc 或者 def 出现两次
        console.log(reg.test('abcabc')) // true
        console.log(reg.test('abcdef')) // true
        console.log(reg.test('defabc')) // true
        console.log(reg.test('defdef')) // true

        const reg = /^[a-c]$/   // 这个字符串只能是 a-c 其中的任意一个字符
        console.log(reg.test('abc'))    // false
        console.log(reg.test('a'))    // true
        console.log(reg.test('b'))    // true
        console.log(reg.test('c'))    // true
        console.log(reg.test('@'))    // false
</script>

修饰符

书写在正则表达式的外面,用于描述整个正则表达式

  1. i 忽略大小写
  2. g 全局
html 复制代码 
<script>
       const reg = /^[a-c]$/
       console.log(reg.test('a'))  // true
       console.log(reg.test('A'))  // false

        
       const reg1 = /^[a-c]$/i // 忽略大小写
       console.log(reg1.test('a'))  // true
       console.log(reg1.test('A'))  // true
</script>

正则表达式----捕获exec

语法:正则.exec(字符串)

  1. 没有捕获到: 直接返回一个 null
  2. 捕获到
    2.1 没有小括号也没g 的情况, 永远捕获的都是下标0开始的第一个符合条件的
    2.2 没有小括号, 但是有修饰符g 的情况
    第一次捕获完成后, 第二次开始的时候, 会从第一次捕获结束的位置开始
    第三次开始的时候, 会从第二次捕获结束的位置开始
    当所有的匹配项都匹配完成后, 会返回一个 null
    当再次捕获的时候, 就从下标0重新开始
    2.3有小括号,下标0 还是我们正常捕获到的内容,从 下标1开始, 就是每个小括号捕获到的内容
html 复制代码 
<script>
        // 1. 没有捕获到
        const reg = /\d{3}/
        console.log(reg.exec('zxcvbnm'))    // null

        // 2.1 没有小括号, 也没有 g
        const reg = /\d{3}/
        console.log(reg.exec('z123xc456vb789nm000'))  //123
        console.log(reg.exec('z123xc456vb789nm000'))  //123
        console.log(reg.exec('z123xc456vb789nm000'))  //123

        // 2.2 有修饰符 g
        const reg = /\d{3}/g
        console.log(reg.exec('z123xc456vb789nm000'))    // 123
        console.log(reg.exec('z123xc456vb789nm000'))    // 456
        console.log(reg.exec('z123xc456vb789nm000'))    // 789
        console.log(reg.exec('z123xc456vb789nm000'))    // 000
        console.log(reg.exec('z123xc456vb789nm000'))    // null
        console.log(reg.exec('z123xc456vb789nm000'))    // 123

        // 2.3 有小括号
        const reg = /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/
        const str = '我的身份证号是 411371200411081234'
        console.log(reg.exec(str))  //['411371200411081234', '4113', '71', '20', '04', '11', '08', '12', '34']

        const reg1 = /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2}|\dx)/
        const str1 = '我的身份证号是 41137120041108123x'  //['411371200411081234', '4113', '71', '20', '04', '11', '08', '12', '3x']
        console.log(reg1.exec(str1))
</script>

正则的两大特性

1.懒惰

正常捕获字符串的时候, 每次都从下标0开始

解决方式: 给正则添加一个修饰符 g

2.贪婪

每次在捕获的时候, 会尽可能的多捕获一些东西

解决方法: 在原有的修饰符后添加一个 ? 然后相当于开启非贪婪模式

html 复制代码 
<script>
         *      贪婪限定符
         *          *
         *          +
         *          ?
         *          {n,}
         *          {n,m}
         * 
         *      非贪婪限定符
         *          *?
         *          +?
         *          ??
         *          {n,}?
         *          {n,m}?
        const str = '<div class="box" id="box1"><span></span></div>'

        const reg = /<div.*>/   // 贪婪模式
        console.log(reg.exec(str))
        // ['<div class="box" id="box1"><span></span></div>']

        const reg1 = /<div.*?>/ // 非贪婪模式
        console.log(reg1.exec(str))
        //['<div class="box" id="box1">']
</script>

正则与字符串方法

html 复制代码 
<script>
	//正则.test(字符串)
	//正则。exec(字符串)


	//字符串.replace search match

	var str = "adearfa"

	//var newstr = str.replace("a","*")
	//var newstr = str.replace(a/g,"*")
	//console.log(newstr)
	
	//search

	console.log(str.search("a"))
	console.log(str.search(/a/))
	console.log(str.search(/ax/))


	//match 捕获内容
	var datestr = "time is from 2029-01-01 12:20:20 to 2029-11-01 12:20:20"

	//console.log(str.match("ad"))

	console.log(datestr.match(/(\d{4})-(\d{1,2})-(\d{1,2})/))
</script>

好多元字符元字符
密码强度验证案例👇

html 复制代码 
<head>
	<style>
        *{
            margin:0;
            padding: 0;
        }
        form{
            width:500px;
            padding: 20px;
            border: 3px solid #333;
            margin: 50px auto;
        }
        form > label{
            width: 100%;
            height: 70px;
        }
        form > label > input{
            width:100%;
            box-sizing: border-box;
            padding-left:30px;
            font-size: 20px;
            height:50px;
        }
        form > p{
            width:100%;
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
        }
        form > p > span{
            width:30%;
            background-color: #ccc;
            color: #fff;
            height:30px;
            font-size: 20px;
            line-height: 30px;
            text-align: center;
        }
        form > p > span:nth-child(1).active{
            background-color: red;
        }
        form > p > span:nth-child(2).active{
            background-color: orange;
        }
        form > p > span:nth-child(3).active{
            background-color: green;
        }
    </style>
</head>
<body>
    <form>
        <label>
            <input type="text">
        </label>
        <p> 
            <span>弱</span>
            <span>中</span>
            <span>强</span>
        </p>
    </form>


    <script>
        var oinput = document.querySelector("input")
        var reg1 = /\d/
        var reg2 = /[a-z]/i
        var reg3 = /[~@#$%^&*()]/

        var ospan=document.querySelectorAll("span")
        oinput.oninput = function(evt){
            console.log(this.value)
            //console.log(evt.target.value)
            var level = 0

            if(reg1.test(this.value)) level++
            if(reg2.test(this.value)) level++
            if(reg3.test(this.value)) level++

            //console.log(level)
            for(var i=0;i<ospan.length;i++){
                ospan[i].classList.remove("active")
                if(i<level){
                    ospan[i].classList.add("active")
                }
            }
        }
    </script>
</body>
相关推荐
余生H9 分钟前
前端Python应用指南（二）深入Flask：理解Flask的应用结构与模块化设计
前端·后端·python·flask·全栈
outstanding木槿14 分钟前
JS中for循环里的ajax请求不数据
前端·javascript·react.js·ajax
酥饼~21 分钟前
html固定头和第一列简单例子
前端·javascript·html
一只不会编程的猫24 分钟前
高德地图自定义折线矢量图形
前端·vue.js·vue
所以经济危机就是没有新技术拉动增长了25 分钟前
二、javascript的进阶知识
开发语言·javascript·ecmascript
m0_7482509326 分钟前
html 通用错误页面
前端·html
来吧~35 分钟前
vue3使用video-player实现视频播放(可拖动视频窗口、调整大小)
前端·vue.js·音视频
Bubluu35 分钟前
浏览器点击视频裁剪当前帧，然后粘贴到页面
开发语言·javascript·音视频
鎈卟誃筅甡1 小时前
Vuex 的使用和原理详解
前端·javascript
呆呆小雅1 小时前
二、创建第一个VUE项目
前端·javascript·vue.js
热门推荐
01大模型国产化适配7-华为昇腾LLM落地可选解决方案（MindFormers、ModelLink、MindIE）02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03玄机平台应急响应—webshell查杀04电赛2024年H题智能小车基于MSPM0G3507主控MCU（利用8路灰度加上MPU6050的解决方式）具体项目报告05组基轨迹建模 GBTM的介绍与实现（Stata 或 R）06支付宝短视频平台创作分成激励项目07怎么找小红书美食探店博主合作？08【一文读懂】NTN（非地面网络）技术介绍09优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间10STM32 无法烧录