正则表达式(规则表达式)

我们自己来书写规则,然后专门用来检测字符串是否符合规则

1.创建正则

var reg = /正则在这里面/
var reg = new RegExp('正则写在这里边')

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

var reg = new RegExp('abcd')
console.log(reg);// /abcd/

2.正则的常用方法

匹配

test 匹配字符串是否符合正则规则(true 符合 false 不符合)

捕获

        var reg = /abc/  //匹配一段字符串中是否包含'abc'
        var str1 = 'a'
        var str2 = 'ab'
        var str3 = 'abc'
        var str4 = 'abcd'
        var str5 = 'a1b2c3'

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

3.普通元字符

元字符

正则的规则符号普通文本--正则的规定符号

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

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

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

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

\s 表示一位空白内容

var reg = /\s/
console.log(reg.test('123456%$#ascd'));//false
console.log(reg.test('123456%$# ascd'));//true

\S 表示一位非空白内容

 var reg = /\S/
 console.log(reg.test('123456%$#ascd'));//true
 console.log(reg.test('123456%$# ascd'));//true
 console.log(reg.test(' '));//false

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

 var reg = /\w/
 console.log(reg.test('abc'));//true
 console.log(reg.test('123'));//true
 console.log(reg.test('_'));//true
 console.log(reg.test('a1b2c3'));//true
 console.log(reg.test('$%^'));//false

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

var reg = /\W/
console.log(reg.test('abc'));//false
console.log(reg.test('123'));//false
console.log(reg.test('_'));//false
console.log(reg.test('a1b2c3'));//false
console.log(reg.test('$%^'));//true

. 表示一位非换行内容

var reg = /./
console.log(reg.test('#$%&')); //true
console.log(reg.test('asdf')); //true
console.log(reg.test('123')); //true
console.log(reg.test('\n')); //false  \n代表换行

\ 表示转义符

var reg = /\d\.\d/   //\.表示一个小数点,没有任何特殊含义

        /*
        var reg = /4.5/
        var reg = /\d\.5/
        var reg = /\d\.\d/

        */
console.log(reg.test('abc'));//false
console.log(reg.test('1.2'));//true
console.log(reg.test('100'));//false

修饰符

修饰整个正则表达式的符号

4.边界元字符

^ 表示开头

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

$ 表示结尾

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

var reg = /^abc$/  //表示字符串中包含abc就行
console.log(reg.test('abcd'));  //false

5.限定字符

*表示 0-正无穷次

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

+表示1-正无穷次

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

? 表示0-1次

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

{n}表示限定 n 次

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

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

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

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

var reg = /^\d{3,4}$/
console.log(reg.test('99'));//false
console.log(reg.test('12345'));//false
console.log(reg.test('888'));//true
console.log(reg.test('8888'));//true

6..特殊元字符

()

含义1: 单独捕获

含义2: 一个整体

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

|

含义: 或

表示左右两边满足一个就行,/a|b/ 表示满足 a 或者 b 哪个都可以

 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('abc12345678'))    // true
console.log(reg.test('12345678def'))    // true
console.log(reg.test('1234abcdef5678'))    // 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('abcd'))  // false

[^]

非不包含

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

 var reg = /^[^abcd]$/   // 字符串不是 a b c d 即可
        console.log(reg.test('a'))  // false
        console.log(reg.test('c'))  // 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

7.重复元字符

\数字

含义: 表示重复第 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

/**
         *  要求 字符串是 span 标签 或者 p标签
        */

        var reg = /<(span|p)><\/\1>/
        /**
         *  流程:
         *      1. var reg = /<span></span>/
         *          !!! 因为 span 的结束标签前有一个 /  JS会把它识别为正则的结束, 所以需要加一个转义符
         *      
         *      2. var reg = /<span><\/span>/
         *          !!! 因为 span 或者 p 标签都可以, 所以 需要将 span 标签开头添加一个 元字符或
         *      
         *      3. var reg = /<(span|p)><\/span>/
         *          !!! 因为 结束标签的文本一定和开始标签相同, 所以可以在结束标签后 写一个 \1  表示重复第一个小括号的内容
         * 
         *      4. var reg = /<(span|p)><\/\1>/
        */
        console.log(reg.test('<span></span>'))
        console.log(reg.test('<p></p>'))
        console.log(reg.test('<div></div>')

8. 正则的标识符

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

i

表示忽略大小写

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

g

9.捕获

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

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

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

正则没有小括号,没有标识符g

捕获到的是一个数组, 下标0 是我们捕获到的值,但是不管捕获多少次, 都是从下标[0]开始, 第一个满足条件的

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

有小括号

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

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

有标识符g

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

 var reg = /\d{3}/g
        var str = 'qwe123rty456uiop789'
        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

10.正则的两大特性

懒惰

每次捕获都是在下标[0]的位置开始捕获

解决: 在正则后添加全局标识符g

贪婪

每次捕获内容的时候,尽可能的多去捕获

解决:使用非贪婪限定符 (在原有的限定符后添加一个?)

 /*      贪婪限定符
         *          *
         *          +
         *          ?
         *          {n,}
         *          {n,m}
         *      非贪婪限定符
         *          *?
         *          {n,}?
        */

        var str = '<div class="box" id="id_box"><span></span></div>'

        // 贪婪捕获
        var reg1 = /<div.*>/
        console.log(reg1.exec(str)[0])

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

正则表达式