正则表达式，最近你@了吗？正则表达式是描述字符模式的对象。正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式

RegExp对象 正则表达式是描述字符模式的对象。正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。语法 1.字面量 / / 例如 let reg = /a-z/i

2.new RegExp() 例如 let reg = new RegExp(‘张三’, ‘g’)

注意： 当使用构造函数创造正则对象时，需要常规的字符转义规则(在前面加反斜杠)。比如，以下是等价的：

var reg = new RegExp("\w+") var reg = /\w+/;

修饰符 i: 执行对大小写不敏感的匹配 g: 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 m: 执行多行匹配。 方括号

用于查找某个范围内的字符： [abc] 查找方括号之间的任何字符 [^abc] 查找任何不在方括号之间的字符 [0-9] 查找任何从0至9的数字 [a-z] 查找从小写a到小写z的字符 [A-Z] 查找任何从大写A到大写Z的字符 [A-z] 查找任何从大写A到小写z的字符 [adgk] 查找给定集合内的任何字符

元字符 . 查找单个字符，除了换行和行结束符 \w 查找数字、字母、下划线 \W 与\w 取反 \d 匹配数字 \D 与\d取反 \s 匹配空白字符 \S 与\s取反 \n 匹配换行符

限定符

n+ : 匹配任何包含至少一个 n 的字符串。 n? : 匹配任何包含零个或者一个n的字符 n* : 匹配任何包含零个或者一个n的字符串 n{X} : 匹配包含X个n的序列的字符串 n{X} : X是一个正整数，前面的模式n连续出现至少X次是匹配。 n{X,Y} : X和Y为正整数。前面的模式n连续出现至少X次，至多Y次时匹配。 n$ : 匹配任何结尾为n的字符串 n^ : 匹配任何开头为n 的字符串

?=n : 匹配任何其后紧接字符串n的字符串 ?!n : 与?=n 取反

RegExp 对象方法

exec 检索字符串中指定的值，返回找到的值，并确定其位置。 test 检索字符串中指定的值。返回true或false

支持正则表达式的 String 对象的方法

search 检索与正则表达式相匹配的值。
match 找到一个或多个正则表示式的匹配。
replace 替换与正则表达式匹配的字符串
split 把字符串分割为字符串数组

以下的案例很重要喔

案例一：

   let reg = new RegExp('张三')
        let reg = /c$/i
          let str = 'aCCCC'
          console.log(reg.test(str));

          
        let reg = /^(\.|\[|\]|\{|\}|\|)$/i
        let str = '|    '
        console.log(reg.test(str));


        let  reg = /^[a-zA-Z]{1,5}$/i
        let reg = /^[a-zA-Z]{2,}$/i
        let reg = /^[a-a-zA-Z]{2,5)?$/i  //{0,1}
        let reg = /^183[a-zA-Z]*$/i  // {0,}
        let reg = /183[a-zA-Z]+$/i  //{1,}
        let str = '183abdckjgkjkjk'
          console.log(reg.test(str));
          
        let reg = /^1(83|56|89)\d{8}$/
        let str = '12904898749875'
        console.log(reg.test(str));



        
        let reg = /\w{0,20}@\w{0,10}\.(com|cn|net|org)$/
            
        let str = 'jake@qq.com'
        console.log(reg.test(str));

案例二： 生活场景：设置密码是密码框下显示密码强度框。

思路：1.HTML 密码强度框可以用一个大的div 套入一个小的div ,用小div的width来show不同的密码强度 2.CSS 小div width设置成100% + backgr—color 3.使用正则表达式，常用的元字符，方括号及对象方法test() 4.声明一个变量 5.jq css()方法,show()方法

<!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>
        #msg{
            width: 200px;
            height: 10px;
            border:3px solid orange;
            margin-top: 50px;
            display: none
        }
        #progress{
            width: 100%;
            height: 9px;
            background-color: orangered;
          
        }
    </style>
</head>
<body>
    密码：<input type="text" id ="pwd" placeholder="请输入密码">
    <div id="msg">
    <div id="progress"></div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
   $('#pwd').on("input",function(){
       let level = 0 
       let str = $(this).val()
       if(/\d/.test(str))  level++
       if(/[a-z]/.test(str))  level++
       if(/[A-Z]/.test(str))  level++
       if(str.length > 10)  level++
       if(/[\.\~\@\$\%\^\&\*]/.test(str))  level++
       $('#msg').show()
       let arr = ['red','orange','yellow','pink','oranged']
       $('#progress').css('width',(level / 5)*100 + "%").css('background-color',arr[level - 1])
   })



    </script>
</body>
</html>

正则表达式，最近你@了吗？

懂了一丢丢吗？一起加油！