正则表达式

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

<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>
相关推荐
崔庆才丨静觅4 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60615 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了5 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅5 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅5 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅6 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment6 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅6 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊6 小时前
jwt介绍
前端
爱敲代码的小鱼6 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示