正则表达式

什么是正则

正则就是一种规则的的表达式,书写一段规则,用于匹配一段字符串是否符合规则
创建正则表达式（two way）

字面量的形式
内置构造函数的形式

<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)
2. \D ------ 表示一位非数字(除了0~9)
3. \w ------ 表示数字(0~9)字母(a-zA-Z)下划线(_) 其中的一个
4.\W ------ 表示除了数字(0~9)字母(a-zA-Z)下划线这些的某一个字符
5. \s ------ 表示一位空白字符
6. \S ------ 表示一位非空白字符
7.. ------ 表示一位非换行的任意字符
8.\------ 表示转义符
有意义的符号, 转为没有意义的文本
没有意义的文本, 转为有意义的符号

<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.$ ------ 表示结尾

<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~正无穷次
2. +------ 表示 1~正无穷次
3. ? ------ 表示 0~1次
4. {n} ------ 表示限定 n 次, 不能多也不能少
5. {n,} ------ 表示最少 n 次
6. {n,m} ------ 表示最少 n 次, 最多 m 次

<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>

修饰符

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

i 忽略大小写
g 全局

<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(字符串)

没有捕获到: 直接返回一个 null
捕获到
2.1 没有小括号也没g 的情况, 永远捕获的都是下标0开始的第一个符合条件的
2.2 没有小括号, 但是有修饰符g 的情况
第一次捕获完成后, 第二次开始的时候, 会从第一次捕获结束的位置开始
第三次开始的时候, 会从第二次捕获结束的位置开始
当所有的匹配项都匹配完成后, 会返回一个 null
当再次捕获的时候, 就从下标0重新开始
2.3有小括号,下标0 还是我们正常捕获到的内容,从下标1开始, 就是每个小括号捕获到的内容

<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.贪婪
每次在捕获的时候, 会尽可能的多捕获一些东西
解决方法: 在原有的修饰符后添加一个 ? 然后相当于开启非贪婪模式

<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>

正则与字符串方法

<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>

好多元字符元字符

密码强度验证案例👇

<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>