创建正则

定义:我们自己来书写规则,然后专门用来检测字符串是否符合规则
创建正则
1. var reg = /正则在这里面/
2. var reg = new RegExp('正则写在这里面')

    //1.
    var reg = /abc/ 
    console.log(reg)

    //2.
    var reg2 = new RegExp('abcd')
    console.log(reg2)

正则的常用方法

匹配
- test 匹配字符串是否符合正则规则
  - true 符合规则 (包含且连在一块)
  - false 不符合规则

    var reg = /abc/  //匹配一段字符串中是否包含'abc'

    var str1 = 'a'
    var str2 = 'ab'
    var str3 = 'abc'
    var str4 = 'abcd'
    var str5 = 'a1b2c3d'

    console.log(reg.test(str1)) // false
    console.log(reg.test(str2)) // false
    console.log(reg.test(str3)) // true
    console.log(reg.test(str4)) // true
    console.log(reg.test(str5)) // false

捕获

正则的元字符

正则表达式的符号,由两种符号组成
1. 元字符
  - 正则的规则符号
  - 普通文本--正则的规定符号
2. 修饰符
  - 修饰整个正则表达式的符号

普通元字符

\d 表示一位数字(0-9)

    var reg = /\d/ // 匹配字符串中 包含一位 数字
    console.log(reg.test('abcd')) // false
    console.log(reg.test('abcd$%^#$%#')) // false
    console.log(reg.test('123456789')) // true

\D 表示一位非数字(除了0-9)

    var reg = /\D/
    console.log(reg.test('abcd')) // true
    console.log(reg.test('abcd$%^#$%#')) // true
    console.log(reg.test('123456789')) // false

\s 表示一位空白内容(空格, 缩进)

    var reg = /\s/
    console.log(reg.test('123456789%^&%^$qwert')) // false
    console.log(reg.test('123456789% ^&%^$qwert')) // true

\S 表示一位非空白内容

    var reg = /\S/
    console.log(reg.test('123456789%^&%^$qwert')) // true
    console.log(reg.test('123456789% ^&%^$qwert')) // true
    console.log(reg.test(' ')) // false

\w 表示一位数字(0-9)字母(a-z A-Z)下划线(_)

    var reg = /\w/ // 匹配字符串中包含一位 数字(0-9)字母(a-z A-Z)下划线(_)
    console.log(reg.test('abc')) // true
    console.log(reg.test('a1b2c3')) // true
    console.log(reg.test('a1b_2c3')) // true
    console.log(reg.test('@$%#^%$^')) // false

\W 表示一位非数字字母下换线

    var reg = /\W/ // 匹配字符串中 包含一位 非数字字母下换线
    console.log(reg.test('abc')) // false
    console.log(reg.test('a1b2c3')) // false
    console.log(reg.test('a1b_2c3')) // false
    console.log(reg.test('@$%#^%$^')) // true
    console.log(reg.test(' ')) // true

. 表示一位非换行内容

    var reg = /./
    console.log(reg.test('#%^#%$^')) // true
    console.log(reg.test('asdf')) // true
    console.log(reg.test('1234')) // true
    console.log(reg.test('\n')) // false   \n 在JS中代表换行

\ 表示转义符

    var reg = /\d\.\d/ // \. 表示一个小数点,没有任何特殊含义
    /**
     * var reg = /4.5/
     * var reg = /\d.5/
     * var reg = /\d\.5/
     * var reg = /\d\.\d/
    */
    
    console.log(reg.test('abc')) // false
    console.log(reg.test('5.7')) // true
    console.log(reg.test('100')) // false

正则的边界元字符

^ 表示开头

    var reg = /^\d/ // 表示 字符串开头需要是一位数字
    console.log(reg.test('100abc')) // true
    console.log(reg.test('abc100')) // false

$ 表示结尾

    var reg = /\d$/ // 表示 字符串结尾需要是一个数字
    console.log(reg.test('100abc')) // false
    console.log(reg.test('abc100')) // true

注意:当开头与结尾共同使用时,表示字符串必须是规则里的内容

    var reg = /abc/ // 表示字符串里面包含'abc'就行
    console.log(reg.test('abcd')) // true
    var reg1 = /^abc$/ // 表示字符串里面必须是'abc'
    console.log(reg1.test('abcd')) // false

正则的限定元字符

含义:限定了 前一个符号 出现多少次

*表示 0~正无穷次

    var reg = /^\d*$/
    console.log(reg.test('abc')) // false
    console.log(reg.test('_99')) // false
    console.log(reg.test('666')) // true

+表示 1~正无穷次

    var reg = /^\d+$/
    console.log(reg.test('abc')) // false
    console.log(reg.test('_99')) // false
    console.log(reg.test('666')) // true
    console.log(reg.test(' ')) // false
    console.log(reg.test('!')) // false

?表示 0~1 次

    var reg = /^\d?$/
    console.log(reg.test('6')) // true
    console.log(reg.test('99')) // false

{n} 表示限定n 次

    var reg = /^\d{3}$/
    console.log(reg.test('6')) // false
    console.log(reg.test('99')) // false
    console.log(reg.test('999')) // true
    console.log(reg.test('9999')) // false

{n,} 表示限定最少n 次

    var reg = /^\d{3,}$/
    console.log(reg.test('6')) // false
    console.log(reg.test('99')) // false
    console.log(reg.test('999')) // true
    console.log(reg.test('9999')) // true

{n,m} 表示限定最少n 次, 最多 m 次

    var reg = /^\d{3,4}$/
    console.log(reg.test('6')) // false
    console.log(reg.test('99')) // false
    console.log(reg.test('999')) // true
    console.log(reg.test('9999')) // true
    console.log(reg.test('99991')) // false

正则的特殊元字符

()
- 含义1: 单独捕获
- 含义2: 一个整体

    var reg = /^(abc){2}$/
    console.log(reg.test('abc')) // false
    console.log(reg.test('abcabc')) // true
    console.log(reg.test('abcqwe')) // false

    var reg = /a|b/
    console.log(reg.test('a')) // true
    console.log(reg.test('b')) // true
    console.log(reg.test('c')) // false

元字符或的分界线在哪里

或的分界线为 小括号 或者 正则的边界

    //边界
    var reg = /^abc|def$/
    /**
     * 分析:
     *    /^abc|def$/
     * 
     *      ^abc      或者      def$
    */
    console.log(reg.test('abc123456789')) // true
    console.log(reg.test('123456789def')) // true
    console.log(reg.test('1234abcdef56789')) // false

    //小括号
    var reg = /^ab(c|d)ef$/
    /**
     * 分析:
     *     ^ab    c   ef$
     *     ^ab    d   ef$
    */
    console.log(reg.test('abcef')) // true
    console.log(reg.test('abdef')) // true
    console.log(reg.test('qwef')) // false
    console.log(reg.test('abqwe')) // false

[] 包含中括号内其中一个即可
- 在中括号中可以书写任意数量的符号,但是字符串中只要满足其中一个即可

    var reg = /^[abcd]$/
    /**
     * 含义:  
     *      字符串中,包含 a b c d 任意一个即可
    */
    console.log(reg.test('a')) // true
    console.log(reg.test('b')) // true
    console.log(reg.test('c')) // true
    console.log(reg.test('d')) // true
    console.log(reg.test('ab')) // false
    console.log(reg.test('abcd')) // false

[^] 非不包含
- 在中括号内可以书写任意数量的字符,只要字符串不是其中的某一个就行

  var reg = /^[^abcd]$/ // 字符串不是 a b c d 即可
  console.log(reg.test('a')) // false
  console.log(reg.test('ab')) // false
  console.log(reg.test('abc')) // false
  console.log(reg.test('abcd')) // false
  console.log(reg.test('abdw')) // false
  console.log(reg.test('aw')) // false
  console.log(reg.test('w')) // true

-到至

通常和 [] [^] 连用
/[0-9]/ 正则代表的含义数字 0-9, 等价于 \d
/[^0-9]/ 正则代表的含义非数字 0-9, 等价于 \D
/[a-z]/ 正则代表的含义字母 a-z
/[0-9a-zA-Z_]/ 等价于 \w

正则的重复元字符

符号: \数字
含义: 表示重复第 n 个小括号的内容,并且要求和小括号的内容完全一致

    var reg = /^(abc|def)\1$/
    /**
     *  \1 重复前边第一个小括号的内容,小括号内如果是'abc' 那么 \1 的值也需要是'abc'
    */

    console.log(reg.test('abcabc')) // true
    console.log(reg.test('defdef')) // true
    console.log(reg.test('abcdef')) // false
    console.log(reg.test('defabc')) // false

正则的标识符

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

i
- 表示忽略大小写
g
- 表示全局

    var reg = /^[abcd]$/i
    console.log(reg.test('a')) // true
    console.log(reg.test('A')) // true
    console.log(reg.test('w')) // false

正则的捕获

语法: 正则.exec(字符串)

字符串没有符合正则规则的内容
- 捕获的结果为null

     var reg = /\d{3}/
     console.log(reg.exec('qwertyuiop')) // null

正则没有小括号,没有标识符 g
- 捕获到的是一个数组,下标0 是我们捕获到的值,但是不管捕获多少次,都是从 [0]开始,第一个满足条件的

    var reg = /\d{3}/
    console.log(reg.exec('qwe123rt456yui789op'))
    console.log(reg.exec('qwe123rt456yui789op'))

有小括号
- 下标0 是符合正则规则的字符串
- 从下标1 开始,是每个小括号单独捕获出来的内容

    var reg = /(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/
    var num = '140423200401311234'
    console.log(reg.exec(num))

有标识符g
- g 叫做全局标识符
- 第二次捕获的时候,会从第一次捕获结束的位置开始进行捕获
- 直到找不到内容会返回一个 null
- 然后再下一次捕获的时候,会从字符串开始位置重新捕获

    var reg = /\d{3}/g
    var str = 'qwe123rt456yui789op'
    console.log(reg.exec(str)) // [0]: 123
    console.log(reg.exec(str)) // [0]: 456
    console.log(reg.exec(str)) // [0]: 789
    console.log(reg.exec(str)) // null
    console.log(reg.exec(str)) // [0]: 123

正则的两大特性

懒惰

每次捕获都是在下标[0] 的位置开始捕获
解决: 在正则后添加全局标识符 g

贪婪

每次捕获内容的时候,尽可能多去捕获内容
解决: 使用非贪婪限定符(在原有的限定符后添加一个?)

    var str = '<div class="box" id="id_box"><span></span></div>'
    //贪婪捕获
    var reg1 = /<div.*>/
    console.log(reg1.exec(str)[0]) // <div class="box" id="id_box"><span></span></div>

    //非贪婪捕获
    var reg2 = /<div.*?>/
    console.log(reg2.exec(str)[0]) // <div class="box" id="id_box">

正则创建方式的区别

书写标识符
- 字面量的方式,直接在正则后书写标识符
- 内置构造函数的方式,需要写在第二个参数中

    let reg1 = /abc/ig
    let reg2 = new RegExp('qwe','ig')

书写元字符

    let reg1 = /\d\w.\./
    console.log(reg1)

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

* 在字符串中,如果书写了\ 那么相当于转义符,将后边的字符转换为有意义的字符
* 但是转换完成之后, \ 就会自动消失,那么正则拿到的就是一个具有特殊意义的字符 d
* 但是又因为 正则中元字符必须是 \ + d    结合在一起才是一个元字符,如果只有一个 d 那么就是一个普通的字母,没有任何 特殊含义
*  **解决方式**:
    *  在原本的反斜杠\ 前 再添加一个\
        *  第一个\ 将第二个\ 转换为没有任何意义的普通文本,最终拿到的就是一个 没有特殊含义的 \ + d
        *  然后按照正则的规则中,\+d就是一个元字符代表的是数字0-9

JS 正则表达式

创建正则

正则的常用方法

正则的元字符

普通元字符

正则的边界元字符

正则的限定元字符

正则的特殊元字符

正则的重复元字符

正则的标识符

正则的捕获

正则的两大特性

正则创建方式的区别