前端正则表达式

1.定义正则表达式

<script>

    // const 变量名 = /表达式/
    // const reg = /前端/g

    // ------------test------------
    // let res = reg.test('学前端，找小狂人') // 匹配到返回true 匹配不到返回false
    // console.log(res);

    // ------------exec------------
    // const res = reg.exec('学前端，找小狂人') // 返回一个数组
    // console.log(res); // ['前端', index: 1, input: '学前端，找小狂人', groups: undefined]

    // ------------replace------------
    // const str = '学前端，找小狂人，前端发展前景好，前端工资高'
    // const res = str.replace(reg, '后端') // replace 是字符串的api
    // console.log(res) // 学后端，找小狂人，前端发展前景好，前端工资高

    // ------------match------------
    // const reg = /前端/g
    // const str = '学前端，找小狂人，前端发展前景好，前端工资高'
    // console.log(str.match(reg)); // ['前端', '前端', '前端']
    
  </script>

2.修饰符

<script>
        // i：忽略大小写
        // const reg = /a/i
        // console.log(reg.test('a')); // true
        // console.log(reg.test('abc')); // true
        // console.log(reg.test('ABC')); // true


        // g：全局匹配
        // const reg = /java/ig
        // const str = '学java，Java就业好，JAVA工资高'
        // console.log(str.replace(reg, '前端'));
    </script>

3.元字符-边界符

<script>
        // 边界单词 \b
        // const reg = /\bcat\b/g
        // let str = 'have cat and dhcatkkkk iuook'
        // console.log(str.replace(reg, 'dog'));


        // 字符串边界 ^ $
        // const reg = /^a/
        // console.log(reg.test('a'))
        // console.log(reg.test('abc'))
        // console.log(reg.test('a'))

        // const reg = /c$/

        // const reg = /^a$/ // 加在^和$之间表示精确匹配
        // console.log(reg.test('a')); // true
        // console.log(reg.test('abc')); // false


    </script>

4.元字符-量词

<script>
        //  *：表示0次或者更多次
        // const reg = /^a*$/
        // console.log(reg.test('a')); // true
        // console.log(reg.test('')); // true
        // console.log(reg.test('aaa')); // true
        // console.log(reg.test('b')); // false

        //  +：表示1次或者更多次
        // const reg = /^a+$/
        // console.log(reg.test('a')); // true
        // console.log(reg.test('')); // false
        // console.log(reg.test('aaa')); // true
        // console.log(reg.test('b')); // false

        //  ?：表示0次或者1次
        // const reg = /^a?$/
        // console.log(reg.test('a')); // true
        // console.log(reg.test('')); // true
        // console.log(reg.test('aaa')); // false
        // console.log(reg.test('b')); // false

        // {n}：只能有n次
        // const reg = /^a{3}$/
        // console.log(reg.test('a')); // false
        // console.log(reg.test('')); // false
        // console.log(reg.test('aaa')); // true
        // console.log(reg.test('aaaa')); // false

        // {n,}：表示大于等于n次
        // const reg = /^a{3,}$/
        // console.log(reg.test('a')); // false
        // console.log(reg.test('')); // false
        // console.log(reg.test('aaa')); // true
        // console.log(reg.test('aaaa')); // true

        // {n, m}: 表示n-m次
        // const reg = /^a{2,4}$/
        // console.log(reg.test('a')); // false
        // console.log(reg.test('')); // false
        // console.log(reg.test('aaa')); // true
        // console.log(reg.test('aaaa')); // true

    </script>

5.元字符-字符类

<script>
        // []
        // const reg = /[abc]/ // 匹配abc中的任意一个
        // console.log(reg.test('abc')) // true
        // console.log(reg.test('andy')) // true
        // console.log(reg.test('ddy')) // false

        // [a-z]
        // const reg = /[a-z]/ // a-z的26个小写英文字母
        // const reg = /[A-Z]/ // A-Z的26个大写英文字母
        // const reg = /[0-9]/ // 0-9的数字中的任意一个

        // const reg = /[a-zA-Z0-9_]/ // 表示a-zA-Z0-9以及_的任意一个字符
        // console.log(reg.test('abcAAAA')); // true
        // console.log(reg.test('_')); // true

        // [] 中添加^ 表示取反
        // const reg = /[^abc]/ 
        // console.log(reg.test('a')); // false
        // console.log(reg.test('dfff')); // true
        // console.log(reg.test('11111')); // true

        // const reg = /[^0-9]/
        // console.log(reg.test('111')); // false
        // console.log(reg.test('aaa')); // true

        // .匹配到是换行符(\n, \r)之外的任意一个字符
        // const reg = /./
        // console.log(reg.test('')); // false
        // console.log(reg.test('1')); // true
        // console.log(reg.test('aaa')); // true
        // console.log(reg.test('\n')); // false
        // console.log(reg.test('\r')); // false

        // 预定义
        // const reg = /\d/ // 等同于 /[0-9]/
        // const reg = /\D/ // 等同于 /[^0-9]/
        // const reg = /\w/ // 匹配任意的字符，数字和下划线 相当于 [a-zA-Z0-9_]
        // const reg = /\W/ // 匹配除字母，数字下划线以外的指法，相当于 [^a-zA-Z0-9_]
        // const reg = /\s/ // 匹配空格（包含换行，空格，制表符等），相当于[\t\r\n\v\f]
        // const reg = /\S/ // 匹配非空格的字符，相当于[^\t\r\n\v\f]
        

    </script>

6.分组和分支结构

<script>
        // 分组
        // const reg = /(ab)+/ // ()中的表示一个整体
        // console.log(reg.test('ab')); // true
        // console.log(reg.test('abab')); // true
        // console.log(reg.test('abac')); // true
        // console.log(reg.test('cdb')); // false

        // 分组捕获
        // const reg = /^(\d{4})-(\d{2})-(\d{2})$/
        // const date = '2023-06-15'
        // console.log(date.replace(reg, '$2/$3/$1')); // 06/15/2023

        // 分支结构 | 或者
        // const reg = /前端|后端|Java/

    </script>

7.案例

<script>
        // 1. 匹配十六进制的颜色
        // const reg = /^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/

        // 2. 匹配24小时时间
        const reg = /^([01][0-9]:[0-5][0-9])|([2][0-3]:[0-5][0-9])$/

    </script>