前端0基础---day19正则表达式(javascript)

day09_正则

1. 什么是正则

• 正则表达式，又名 “规则表达式”

• 正则是JS中的数据类型, 是一个复杂数据类型

• 由我们自己来书写 “规则”，专门用来检测 字符串 是否符合 “规则” 使用的

• 我们使用一些特殊的字符或者符号定义一个 “规则公式”，然后用我们定义好的 “规则公式” 去检测字符串是不是合格

  var reg = /\d+/
  var str1 = '123'
  var str2 = 'abc'
  console.log(reg.test(str1)) // true
  console.log(reg.test(str2)) // false
  

  • 上面的变量 reg 就是定制好的规则
  • 检测 str1 这个字符串的时候，符合规则
  • 检测 str2 这个字符串的时候，不符合规则
  • \d 等价于 [0-9]，表示匹配一个数字，+ 表示一个或多个。所以 \d+ 就是“匹配一个或多个数字”，而 /\d+/ 则是用来匹配字符串中的一个或多个连续数字

2. 如何创建一个正则

• 想制定 “规则”，必须要按照人家要求的方式来制定
• 把一些字母和符号写在 // 中间的东西，叫做正则表达式，比如 /abcdefg/
• 创建正则表达式有两个方式 字面量 和 构造函数创建

1) 字面量创建

// 下面就是字面量创建一个正则表达式
var reg = /abcdefg/

• 这个正则表达式就可以去检测字符串了
• 这个正则表达式的意义是字符串中的必须要包含’abcdefg’这个片段

2) 构造函数创建

// 下面就是构造函数创建一个正则表达式
var reg = new RegExp('abcdefg')
console.log(reg) //  /abcdefg/

• 使用构造函数方式创建的和字面量创建的，得到的结果一样

3) 两种创建方法的区别

• 语法不一样
• 书写标识符的时候
  • 字面量方式直接书写在正则的后面
  • 内置构造函数, 以第二个参数的方式传递
• 拼接字符串
  • 字面量方式不接受拼接字符串
  • 内置构造函数方式, 可以拼接字符串
• 基本元字符书写
  • 字面量方式的时候, 直接书写 \s\d\w
  • 内置构造函数书写的时候, 需要书写 \s\d\w

//书写标识符的区别
var reg = /abcd/gi
console.log(reg)
var reg2 = new RegExp('abcd', 'gi')
console.log(reg2)


// 拼接字符串的区别
var s = 'HH'
var s2 = 'MM'
// 不能解析变量
var reg = /(s|s2)/ //会报错 不能解析变量
// var reg = /(HH|MM)/
console.log(reg)
// 因为第一个参数就是需要你以 字符串 的形式传递 所以可以拼接字符串
var reg2 = new RegExp('(' + s + '|' + s2 + ')')
console.log(reg2)


// 基本元字符的书写的区别
var reg = /\s\d\w/
console.log(reg)

var reg2 = new RegExp('\\s\\d\\w')
console.log(reg2)

3. 正则表达式的方法

• 正则提供了一些方法给我们使用
• 用来检测和捕获字符串中的内容的

1) test()方法 – 匹配

• 作用：test方法是用来检测字符串是否符合我们正则的标准
• 语法： 正则.test(字符串)
• 返回值： boolean

  • 如果该字符串符合正则的规则, 那么就是 true

  • 如果该字符串不符合正则的规则, 那么就是 false

console.log(/\d+/.test('123')) // true
console.log(/\d+/.test('abc')) // false

2) exec()方法 – 捕获

• 作用：exec方法是把字符串中满足条件的内容捕获出来

• 语法： 正则.exec(字符串)

• 返回值： 把字符串中符合正则要求的第一项以及一些其他信息，以数组的形式返回

  • 原始字符串中没有符合正则要求的字符串片段

    • null

  • 原始字符串中有符合正则要求的片段

    • 正则没有 () 也没有 全局标识符g

      • 返回值是一个数组

      • 索引 0 是从字符串中捕获出来的满足正则条件的第一个内容

      • 注意: 不管捕获多少次, 每次都是从原始字符串的索引 0 开始检索

    • 正则有全局标识符 g

      • 返回值是一个数组

      • 索引 0 是从字符串中捕获出来的满足正则条件的第一个内容

      • 注意: 第二次捕获是从第一次的结束位置开始向后查询, 直到最后捕获不到为止, 再下一次的时候, 又从字符串的 索引0 开始检索

    • 有 ()

      • 返回的是一个数组

      • 索引 0 是从字符串中捕获出来的满足正则条件的第一个内容

      • 从索引 1 开始, 依次是每一个小括号的单独内容

      • 注意: 按照小括号的开始标志, 来数是第几个小括号

  //1. 没有符合要求的片段
  var str = 'vgfdrtyuijkhvgfrtyu'
  var reg = /\d{3}/
  var res = reg.exec(str)
  console.log(res)
  
  
  //2. 有符合要求的片段
  //2-1. 没有 () 没有 g
  var str = 'tfyu123gvh456gfh789gyhj'
  var reg = /\d{3}/
  var res = reg.exec(str)
  console.log(res)
  
  //2-2. 有全局标识符 g
  var str = 'tfyu123gvh456gfh789gyhj'
  var reg = /\d{3}/g
  var res = reg.exec(str)
  console.log(res)
  console.log(reg.exec(str))
  console.log(reg.exec(str))
  console.log(reg.exec(str))
  console.log(reg.exec(str))
  
  //2-3. 有 ()
  var str = '11010820030223001x'
  var reg = /(\d{2})(\d{2})(\d{2})((\d{4})(\d{2})(\d{2}))\d{2}(\d)(?:\d|x)/
  var res = reg.exec(str)
  console.log(res)
  

• 扩展: () 有两个意义

  • 一个整体
  • 单独捕获
  • 如果你想只使用一个意义, 整体的所用, 不想在捕获的时候单独捕获出来
  • 你可以写成 (?:)表示匹配但不捕获

// 单独捕获
var reg = /(\d{2})(\d{2})(\d{2})(\d{4})(\d{2})(\d{2})\d{2}(\d)(\d|x)/
var res = reg.exec('13072220041010301x')
console.log(res);

4. 正则表达式里面的符号

• 知道了怎么创建一个正则表达式以后，我们就来详细的说一下正则表达式里面涉及到的一些符号了

1) 基本元字符

• . ： 匹配非换行的任意字符

• \ ： 转译符号，把有意义的 符号 转换成没有意义的 字符，把没有意义的 字符 转换成有意义的 符号

• \s ： 匹配空白字符（空格/制表符/…）

• \S ： 匹配非空白字符

• \d ： 匹配数字

• \D ： 匹配非数字

• \w ： 匹配数字字母下划线

• \W ： 匹配非数字字母下划线

• 有了元字符我们就可以简单的制定一些规则了

  var reg = /\s/
  var str = 'a b'
  var str2 = 'ab'
  console.log(reg.test(str)) // true
  console.log(reg.test(str2)) // false
  

  var reg = /\d/
  var str = 'abc1'
  var str2 = 'abc'
  console.log(reg.test(str)) // true
  console.log(reg.test(str2)) // false
  

  var reg = /\w/
  var str = 'a1'
  var str2 = '#@$'
  console.log(reg.test(str)) // true
  console.log(reg.test(str2)) // false
  

2) 限定符

注意: 一个限定符只能修饰符号前面的一个内容的出现次数

• * ： 前一个内容重复至少 0 次，也就是可以出现 0 ～ 正无穷 次

• + ： 前一个内容重复至少 1 次，也就是可以出现 1 ～ 正无穷 次

• ? ： 前一个内容重复 0 或者 1 次，也就是可以出现 0 ～ 1 次

• {n} ： 前一个内容重复 n 次，也就是必须出现 n 次

• {n,} ： 前一个内容至少出现 n 次，也就是出现 n ～ 正无穷 次

• {n,m} ： 前一个内容至少出现 n 次至多出现 m 次，也就是出现 n ～ m 次

• 限定符是配合元字符使用的

// 下面正则表示验证数字出现 0 ～ 正无穷次都可以
var reg = /\d*/
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
console.log(reg.test(str)) // true
console.log(reg.test(str2)) // true
console.log(reg.test(str3)) // true

// 下面正则表示验证数字出现 1 ～ 正无穷次都可以
var reg = /\d+/
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
console.log(reg.test(str)) // false
console.log(reg.test(str2)) // true
console.log(reg.test(str3)) // true

// 下面正则表示验证数字出现 0 ~ 1 次都可以
var reg = /\d?/
var str = 'abc'
var str2 = 'abc1'
console.log(reg.test(str)) // true
console.log(reg.test(str2)) // true

// 下面正则表示验证数字必须出现 3 次
var reg = /\d{3}/
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
console.log(reg.test(str)) // false
console.log(reg.test(str2)) // false
console.log(reg.test(str3)) // true

// 下面正则表示验证数字出现 3 ～ 正无穷次
var reg = /\d{3,}/
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
var str4 = 'abcd1234567'
console.log(reg.test(str)) // false
console.log(reg.test(str2)) // false
console.log(reg.test(str3)) // true
console.log(reg.test(str4)) // true

// 下面正则表示验证数字只能出现 3 ～ 5 次
var reg = /\d{3,5}/
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
var str4 = 'abc12345'
console.log(reg.test(str)) // false
console.log(reg.test(str2)) // false
console.log(reg.test(str3)) // true
console.log(reg.test(str4)) // true

3) 边界符

• ^ ： 表示开头

• $ ： 表示结尾

• 边界符是限定字符串的开始和结束的

  // 下面表示从开头到结尾只能有数字，并且出现 3 ～ 5 次
  var reg = /^\d{3,5}$/
  var str = 'abc'
  var str2 = 'abc123'
  var str3 = '1'
  var str4 = '1234567'
  var str5 = '123'
  var str6 = '12345'
  console.log(reg.test(str)) // false
  console.log(reg.test(str2)) // false
  console.log(reg.test(str3)) // false
  console.log(reg.test(str4)) // false
  console.log(reg.test(str5)) // true
  console.log(reg.test(str6)) // true
  

4) 特殊符号

• () ： 限定一组元素

• [] ： 字符集合，表示写在 [] 里面的任意一个都行

• [^] ： 反字符集合，表示写在 [^] 里面之外的任意一个都行

• - ： 范围，比如 a-z 表示从字母 a 到字母 z 都可以

• | ： 或，正则里面的或 a|b 表示字母 a 或者 b 都可以

• 现在我们就可以把若干符号组合在一起使用了

// ()
var reg = /^(abc){2}$/
console.log(reg.test('abcabc'));
console.log(reg.test('aabbcc'));
console.log(reg.test('abcc'));

// |
var reg = /^abc|def$/
console.log(reg.test('abcabc'));
console.log(reg.test('abc'));
console.log(reg.test('def'));
console.log(reg.test('abcdef'));
console.log(reg.test('defdef'));
console.log(reg.test('sddhdggfhdgsf'));

var reg = /^(abc|def)$/
console.log(reg.test('abcabc'));
console.log(reg.test('abcdef'));
console.log(reg.test('defdef'));
console.log(reg.test('abcsddhdggfhdgsf'));
console.log(reg.test('sddhdggfhdgsdef'));
console.log(reg.test('abc'));
console.log(reg.test('def'));

 // []
var reg = /^[abcd]$/
console.log(reg.test('a'));
console.log(reg.test('b'));
console.log(reg.test('c'));
console.log(reg.test('d'));
console.log(reg.test('e'));

// [^]
var reg = /^[^abcd]$/
console.log(reg.test('a'));
console.log(reg.test('b'));
console.log(reg.test('c'));
console.log(reg.test('d'));
console.log(reg.test('e'));

// -
var reg = /^[0-9]$/
console.log(reg.test('01'));
console.log(reg.test('1'));
console.log(reg.test('2'));
console.log(reg.test('3'));
console.log(reg.test('4'));
console.log(reg.test('5'));
console.log(reg.test('6'));
console.log(reg.test('7'));
console.log(reg.test('8'));
console.log(reg.test('9'));

// 下面是一个简单的邮箱验证
// 非_$开头，任意字符出现至少6次，一个@符号，(163|126|qq|sina)中的任意一个，一个点，(com|cn|net)中的任意一个
var reg = /^[^_$].{6,}@(163|126|qq|sina)\.(com|cn|net)$/

5) 标示符

• 书写在正则表达式的外面, 专门用来修饰整个正则表达式的符号
• i ： 表示忽略大小写
  • 这个 i 是写在正则的最后面的
  • /\w/i
  • 就是在正则匹配的时候不去区分大小写
• g ： 表示全局匹配
  • 这个 g 是写在正则的最后面的
  • /\w/g
  • 就是全局匹配字母数字下划线

var reg = /^[a-z]$/i
console.log(reg.test('s'));
console.log(reg.test('g'));
console.log(reg.test('y'));
console.log(reg.test('u'));
console.log(reg.test('A'));

// 有全局修饰符 g
var str = 'sda123fdhm456fnbvb789gdghj345khmgn666bxcvxb'
var reg = /\d{3}/g
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));

5. 字符串和正则一起使用

• 字符串中有一些方法也是可以和正则一起使用的

1) search

• 作用 : search 是查找字符串中是否有满足正则条件的内容

• 语法：

  • 字符串.search(正则)

  • 字符串.search(字符串片段)

• 返回值 ： 有的话返回开始索引，没有返回 -1

  var reg = /\d{3}/
  var str = 'hello123'
  var str2 = 'hello'
  console.log(str.search(reg)) // 5
  console.log(str2.search(reg)) // -1
  
  

2) match

• 作用 : match 找到字符串中符合正则条件的内容返回

• 语法：

  • 字符串.match(正则)

  • 字符串.match(字符串片段)

• 返回值 ：

  • 没有标示符 g 的时候，是和 exec 方法一样
  • 有标示符 g 的时候，是返回一个数组，里面是匹配到的每一项

  var reg = /\d{3}/
  var str = 'hello123world456'
  var str2 = 'hello'
  console.log(str.match(reg)) 
  // ["123", index: 5, input: "hello123wor456", groups: undefined]
  console.log(str2.match(reg)) // null
  

  var reg = /\d{3}/g
  var str = 'hello123world456'
  var str2 = 'hello'
  console.log(str.match(reg)) 
  // ["123", "456"]
  console.log(str2.match(reg)) // null
  

3) replace

• 作用 : replace 是将字符串中满足正则条件的字符串替换掉

• 语法：

  • 字符串.replace(正则，要替换的字符串)

  • 字符串.replace('换下字符','换上字符')

• 返回值 ： 替换后的字符串

  • 当你的第一个参数传递字符串的时候, 只能替换一个

  • 当你的第一个参数传递正则表达式的时候, 只能替换一个

  • 但是如果你的正则表达式有全局标识符 g, 那么有多少替换多少

var str = 'fctyHHguHHijHHknHHjgHHhfMMctMMdrMMf'
console.log(str) //fctyHHguHHijHHknHHjgHHhfMMctMMdrMMf

var r1 = str.replace('HH', '**')
console.log(r1) //fcty**guHHijHHknHHjgHHhfMMctMMdrMMf

var r2 = str.replace(/HH/, '**')
console.log(r2) //fcty**guHHijHHknHHjgHHhfMMctMMdrMMf

var r3 = str.replace(/HH/g, '**')
console.log(r3) //fcty**gu**ij**kn**jg**hfMMctMMdrMMf

5. 案例

1) 案例1 - 密码强度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 300px;
            height: 200px;
            border: 10px solid pink;
            margin: 20px auto;
            padding: 20px;
        }
        
        input {
            width: 100%;
            height: 50px;
            font-size: 24px;
            padding-left: 20px;
            box-sizing: border-box;
        }
        
        p {
            width: 100%;
            height: 30px;
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        
        p>span {
            width: 30%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ccc;
            color: #fff;
            font-size: 24px;
        }
        
        p>span:nth-child(1).active {
            background-color: red;
        }
        
        p>span:nth-child(2).active {
            background-color: orange;
        }
        
        p>span:nth-child(3).active {
            background-color: green;
        }
    </style>
</head>

<body>

    <div>
        <input type="text">
        <p>
            <span>弱</span>
            <span>中</span>
            <span>强</span>
        </p>
    </div>

    <script>
     
        // 密码强度校验
        // + 规则:
        //   => 密码的规则: 数字 字母 符号(@#%&)
        //   => 强度的规则:
        //     -> 弱: 有一类
        //     -> 中: 有两类
        //     -> 强: 全包含

        // 获取元素
        var inp = document.querySelector('input')
        var spans = document.querySelectorAll('span')

        // 准备正则
        // 只要包含一位数字就可以
        var r1 = /\d/
            // 只要包含一位字母就可以
        var r2 = /[a-z]/i
            // 只要包含一位符号就可以
        var r3 = /[@#%&]/

        // 1. 给 inp 绑定 input 事件
        // 随着输入或者删除内容实时触发
        inp.oninput = function() {
            // 2. 拿到 inp 内输入的内容
            var text = inp.value

            // 3. 准备一个表示级别的变量, 默认是 0
            var level = 0

            // 3-1. 依次使用正则校验
            if (r1.test(text)) level++
            if (r2.test(text)) level++
            if (r3.test(text)) level++

             // 在每一次添加类型之前, 给所有 span 清除掉类名
            for (var i = 0; i < spans.length; i++) {
                spans[i].classList.remove('active')
                if (i < level) spans[i].classList.add('active')
            }

        }
    </script>
</body>

</html>

2) 案例2 - 表单验证

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        form {
            width: 400px;
            border: 10px solid pink;
            padding: 20px;
        }
        
        label {
            display: block;
            height: 80px;
            position: relative;
        }
        
        input {
            height: 30px;
            font-size: 24px;
            padding-left: 20px;
        }
        
        label>span {
            position: absolute;
            left: 0;
            top: 35px;
            font-size: 20px;
            color: red;
            display: none;
        }
    </style>
</head>

<body>

    <form>
        <label>
            用户名: <input class="username" type="text">
            <span>请按照规则填写用户名</span>
        </label>
        <label>
            密码: <input class="password" type="text">
            <span>请按照规则填写密码</span>
        </label>
        <label>
            手机号: <input class="phone" type="text">
            <span>请按照规则填写手机号</span>
        </label>
        <label>
            邮箱: <input class="email" type="text">
            <span>请按照规则填写邮箱</span>
        </label>
        <input type="button" value="完善资料">
    </form>

    <script>
        // 方案2: 统一验证
        // 1. 给每一个 input 起一个单独的类名(或者标识, 用来区分)
        // 2. 准备正则, 以对象的形式准备正则, 对象的 键就使用 文本框的独立标识, 值就使用 正则
        // 当你的文本框 className === 'username' 的时候, 就使用 regObj 内的一个叫做 username 对应的正则去验证
        var regObj = {
            username: /^[0-9a-z]\w{5,11}$/i,
            password: /^\w{6,12}$/,
            phone: /^\d{11}$/,
            email: /^[0-9a-zA-Z]\w{5,11}@(qq|163|sina)\.(com|cn)$/
        }

        // 3. 获取到所有的文本框
        var inps = document.querySelectorAll('form input')
            // 3-2. 给每一个 input 绑定 表单输入 事件
        inps.forEach(function(item) {
            item.oninput = function() {
                // 4-1. 拿到你正在输入的这个 input 文本框内的文本
                var text = item.value
                    // 4-2. 拿到验证该文本框需要使用的正则
                var reg = regObj[item.className]
                    // 4-3. 拿到应该显示的那个对应的 span 标签
                var span = item.nextElementSibling

                // 4-4. 操作显示和隐藏
                span.style.display = reg.test(text) ? 'none' : 'block'
                    // if (reg.test(text)) {
                    //   span.style.display = 'none'
                    // } else {
                    //   span.style.display = 'block'
                    // }
            }
        })
    </script>
</body>

</html>

6. 正则扩展

1) 正则-正向预查

• 正向肯定预查:(?=)
• 正向否定预查:(?!)

2) 正则-负向预查

• 负向肯定预查:(?<=)
• 负向否定预查:(?<!)

var str = 'windows2012windows2000windowsXPwindowsVistawindows98windows'
// 1. 正向肯定预查
// 需求: 我需要的是 windows, 但是是后面带有数字的 widnows
// var reg = /windows(?=\d+)/g
// 2. 正向否定预查
// 需求: 我需要的是 windows, 但是后面不是数字的 windows
// var reg = /windows(?!\d+)/g
// 3. 负向肯定预查
// 需求: 我需要的是 windows, 但是前面是数字的 windows
var reg = /(?<=\d+)windows/g
// 4. 负向否定预查
// 需求: 我需要的是 windows, 但是前面不是数字的 windows
var reg = /(?<!\d+)windows/g