正则

lucky_cxmei
113 阅读5分钟

创建

字面量

  • 语法：var reg = /匹配内容/修饰符

内置构造函数

  • 语法：var reg = new RegExp("匹配内容","修饰符")

修饰符（3个）

  • i ignore 忽略大小写
  • g global 全局，全球
  • m 换行

正则的方法(2个)

test()

  • 条件满足,返回 true ,否则返回 false

用法案例：

  • 校验表单是否存在某些值

  • reg.test(参数)：用来校验是否存在reg这个正则表达式中的值

    • 返回值为：true 和 false
<input type="text" required name="" id="username">
<script>
var reg = /cxm/
    username.onblur = function(){
        console.log(username.value)
        console.log(reg.test(username.value))
    }
</script>

image.png

exec()

  • 条件满足,返回数组，不满足返回 null

用法案例

  • 案例描述：获取到一段字符串中的时间信息，并以2000/01/01的方式输出

  • 标识符：加在正则表达式的后面，有两个标识符

    • g：全局标识符，一般搭配exec用于捕获字符串中所有符合正则表达式的元素
    • i：忽略字母的大小写
<script>
    var str = "time is from 2023-08-04 to 2023-08-25"
    //g为全局标识符，
    //正则表达式只有加上了g,exec捕获才能捕获到第一个以后符合条件的元素
    //不加g则每次捕获到的都是第一个
    var reg = /\d{4}-\d{1,2}-\d{1,2}/g
    var time1 = reg.exec(str)
    console.log(time1[0])
    var time2 = reg.exec(str)
    console.log(time2[0])
    console.log(time1[0].split("-").join("/"))
    console.log(time2[0].split("-").join("/"))
</script>

image.png

元字符

基本元字符

\d：数字

  • 一位数字（0-9）

  • 用法：var reg = /\d/

    • 【注】在/ /中写几个\d就是判断要包含几个连续的数字
 <script>
            //判断是否存在一位数字
            var reg = /\d/
            console.log(reg.test("abc"))
            console.log(reg.test("1abc"))
            console.log(reg.test("123"))
            console.log("=-======================")
            //判断是否存在两位连续的数字
            var reg2 = /\d\d/
            console.log(reg.test("abc"))
            console.log(reg.test("1abc"))
            console.log(reg.test("123"))
            console.log(reg2.test("1ui2"))
        </script>

image.png

\D：非数字

  • 一位非数字
  • 用法：var reg = /\D/

\s：空白

  • 一位空白（空格、缩进、换行（换行符\n））

\S：非空白

  • 一位非空白

\w：字母、数字、下划线

  • 一位字母、数字、下划线
  • 相当于[a-zA-Z0-9_]

\W：非（字母、数字、下划线）

  • 一位非（字母、数字、下划线）
  • 相当于[ ^ a-zA-Z0-9_]

. 任意内容

  • 一个任意字符（不包含换行）

\ 转义字符

边界符

  • 限制字符串开头和结尾必须是一个什么字符

^ 开头

  • var reg = /^\d/

    • 限制开头必须是数字，满足为true，不满足为false

$ 结尾

  • var reg = /\d$/

    • 限制结尾必须是数字，满足为true，不满足为false

开头结尾组合使用

  • var reg = /^abc$/

    • 限制字符是abc

  • var reg = /^a\dc$/

    • 限制开头必须为a，结尾必须为c，中间只要包含一个数字，满足以上三个条件就为true

限定符

  • 【注】只限定，限定符前面的一个字符

* 0~n次

  • var reg = /\d*/

    • 包含0~n个数字都为true

+ 1~n次

  • var reg = /\d+/

    • 包含1~n个数字都为true

? 0~1次

  • var reg = /\d?/

    • 包含0~1个数字都为true

{n} 指定次数

  • var reg = /\d{3}/

    • 必须包含3个连续的数字，结果才为true

{n,} 大于等于n次

  • var reg = /\d{3,}/

    • 最少包含3个连续的数字，结果才为true

{n,m} n~m次

  • var reg = /\d{3,5}/

    • 最少包含3个连续的数字，结果才为true

特殊符号

（）表示一个整体

  • var reg = /abc{2}/

    • 包含连续的ab和2个c，结果才为true

  • var reg = /(abc){2}/

    • 包含2次连续的abc,结果才为true

| 或

  • 【注】整体 | 整体

  • var reg = /a|b/

    • 只要包含a、b中的一个，就为true

  • var reg = /abc| def/

    • 只要包含abc或def两个整体中的一个，就为true

[] 和 -

  • var reg = /[abcdef]/

    • 一个[]表示一个字符
    • 只要包含abcedf中的任意一个字母，就为true

  • var reg = /[0-9]/

    • 只要包含0~9之间的任意数字，就为true

[^] 取反

  • 不在这个范围内

  • var reg = /[ ^ abc ] /

    • 只要包含除了abc之外的任意字符，就为true

特性

懒惰

  • 解决方案：使用g全局标识符

贪婪

  • 解决方案：?:
//捕获性分组
var pattern = /(\d+)([a-z])/;    //一个或多个数字,和一个a-z的字母
var str = "123abc";
console.log(pattern.exec(str)); //"123a,123,a"
        
//非捕获性分组   ?:
var pattern = /(?:\d+)(?:[a-z])/;    //一个或多个数字,和一个a-z的字母
var str = "123abc";
console.log(pattern.exec(str)); //"123a"

image.png

字符串支持正则的方法（4个）

replace() 替换

var str = "adboaca"
console.log(str.replace('a','*'))  //普通写法，只能替换遇到的第一个a
console.log(str.replace(/a/,'&'))  //正则写法，只能替换遇到的第一个a
console.log(str.replace(/a/g,'#'))  //加一个全局标识符g，就可以替换所有a

image.png

search() 查找

  • 条件满足返回下标，不满足返回-1
  • search只能查找遇到的第一个，如果没有找到返回-1
var str = "adboacab"
console.log(str.search('b'))  
console.log(str.search(/b/)) 
console.log(str.search(/b/g))

image.png

match() 捕获内容

  • 条件满足返回数组，条件不满足返回null
var str = "time is from 2023-08-04 to 2023-08-25"
console.log(str.match(/\d{4}-\d{1,2}-\d{1,2}/g))

image.png

split() 切割

var str = "abcacdaef"
console.log(str.split("a"))
console.log(str.split(/a/))
console.log(str.split(/a/g))

image.png

案例：密码强度验证

  • 案例描述：在input输入框中输入密码，判断密码强弱，包含数字、字母、特殊符号的为强，包含两个为中，只包含一个为弱
   <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 310px;
            border: 1px solid gray;
            padding: 20px;
        }

        input {
            display: block;
            width: 300px;
            height: 30px;
        }

        span {
            display: inline-block;
            width: 100px;
            text-align: center;
            background: rgb(189, 189, 189);
            height: 25px;
            margin-top: 20px;
            color: white;
        }

        .active1 {
            background: red;
        }

        .active2 {
            background: orange;
        }

        .active3 {
            background: green;
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="text" name="" id="code">
        <span>弱</span>
        <span>中</span>
        <span>强</span>
    </div>
    <script>
        var ocode = document.querySelector("#code")
        var ospan = document.querySelectorAll(".box span")
        // 正则1：判断是否有一个数字
        var reg1 = /[0-9]/
        // 正则2：判断是否有一个字母
        var reg2 = /[a-z]/i
        // 正则3：判断是否包含一个特殊字符
        var reg3 = /[~`!@#$%^&*()+-]/
        ocode.addEventListener("input", function () {
            // 定义一个变量初始值为0
            var count = 0
            // 判断输入框中是否有正则中的条件，有就count++
            if (reg1.test(this.value)) count++
            if (reg2.test(this.value)) count++
            if (reg3.test(this.value)) count++

            //排他思想
            for (var i = 0; i < ospan.length; i++) {
                //先把颜色全部移除
                ospan[i].classList.remove("active" + [i + 1])
                //判断输入框中的文字满足几个正则
                // 假如只满足一个,那么if判断就只能进去一次，也就是i=0的时候可以进去，
                // 给下标为0的span添加类名 .active1
                if (i < count) {
                    ospan[i].classList.add("active" + [i + 1])
                }
            }
        })
    </script>
</body>

</html>    

image.png

avatar
文章
阅读
粉丝