一、认识正则

正则的定义：我们自己书写规则，然后专门检测字符串是否符合规则。
正则的创建：

创建方式一：var reg = /正则书写在这里/

var reg1 = /abc/

创建方式二：var reg = new RegExp('正则写在这里')

var reg2 = new RegExp('abcd')

二、正则的常用方法

匹配

语法：正则.test(字符串)
作用：用来检测匹配的字符串中是否符合正则的规则
返回值：true(符合规则) / false(不符合规则)

捕获

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

三、正则的普通元字符

\d 表示包含一位数字(0~9)

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

\D 表示包含一位非数字(也就是除了0~9)

    var reg = /\D/  // 匹配字符串包含一位非数字(也就是除了0~9)
    console.log(reg.test('abcd'))  //true
    console.log(reg.test('abcd$%%^'))  //true
    console.log(reg.test('12345'))  //false

\s 表示包含一位空白内容(空格、缩进)

    var reg = /\s/  //匹配字符串包含一位空白内容(空格、缩进)
    console.log(reg.test('abcd1234%^^'))  //false
    console.log(reg.test('abcd1234% ^^'))  //true
    console.log(reg.test(''))  //false
    console.log(reg.test(' ')) //true

\S 表示包含一位非空白内容

     var reg = /\S/  //匹配字符串包含一位非空白内容
    console.log(reg.test('abcd1234%^^'))  //true
    console.log(reg.test('abcd1234% ^^'))  //true 只要里边有内容，就是true
    console.log(reg.test(' a b 4 % ^ ^ '))  //true 只要里边有内容，就是true
    console.log(reg.test(''))  //false
    console.log(reg.test(' '))  //false

\w 表示包含数字、字母、下划线

    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('abc123_'))  //true 
    console.log(reg.test('^^&&'))  //false

\W 表示包含非数字、字母、下划线

    var reg = /\W/  //匹配字符串中包含非数字(0~9)、字母(a~z A~Z)、下划线(_) 
    console.log(reg.test('abc'))  //false
    console.log(reg.test('a1b2c3'))  //false 
    console.log(reg.test('abc123_'))  //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 reg1 = /\d.5/
    var reg2 = /\d\.5/
    var reg3 = /\d\.\d/
    
    console.log(reg.test('abc')) //false
    console.log(reg.test('5.7')) //true
    console.log(reg.test('12a34.8')) //true
    console.log(reg.test('12a34c.8')) //false
    console.log(reg.test('100'))   //false

四、正则的边界元字符

^ 表示开头

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

$ 表示结尾

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

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

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

五、正则的限定元字符

定义：限定了前一个字符出现多少次

* 表示0~无穷次

    var reg = /^\d*$/   //表示字符串必须是纯数字，可以出现0~无穷次
    console.log(reg.test('abc'))  //false
    console.log(reg.test('_99'))  //false
    console.log(reg.test('666'))  //true
    console.log(reg.test('6666789'))  //true

+ 表示1~正无穷次

    var reg = /^\d+$/  //表示字符串必须是纯数字，可以出现1~无穷次
    console.log(reg.test('abc'))  //false
    console.log(reg.test('_99'))  //false
    console.log(reg.test('666'))  //true
    console.log(reg.test('6666789'))  //true 
    console.log(reg.test(' '))  //false

? 表示0~1次

    var reg = /^\d?$/   //表示字符串必须是纯数字，出现0~1次
    console.log(reg.test('6'))  //true
    console.log(reg.test('99'))  //false

{n} 表示限定n次

    var reg = /^\d{3}$/  //要求数字出现3次
    console.log(reg.test('6'))  //false
    console.log(reg.test('99'))  //false
    console.log(reg.test('999'))  //true
    console.log(reg.test('0000'))  //false

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

    var reg = /^\d{3,}$/  //要求数字出现至少3次
    console.log(reg.test('6'))  //false
    console.log(reg.test('99'))  //false
    console.log(reg.test('999'))  //true
    console.log(reg.test('0000'))  //true

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

    var reg = /^\d{3,5}$/  ////要求数字出现至少3次,最多5次
    console.log(reg.test('6'))  //false
    console.log(reg.test('99'))  //false
    console.log(reg.test('999'))  //true
    console.log(reg.test('0000'))  //true
    console.log(reg.test('1111111'))  //false

六、正则的特殊元字符

含义1：单独捕获
含义2：一个整体

//当“一个整体”来看时：
   var reg = /^(abc){2}$/  //表示把‘abc’看作一个整体，要求出现2次
   console.log(reg.test('abc')) //false
   console.log(reg.test('abcabc')) //true
   console.log(reg.test('abcabcd')) //false

含义：或

   var reg = /a|b/  //表示匹配a或b
   console.log(reg.test('a')) //true
   console.log(reg.test('b')) //true
   console.log(reg.test('ab')) //true
   console.log(reg.test('c')) //false

元字符或的分界线：

1. 或的分界线为小括号

    var reg = /^ab(c|d)ef$/   //开头ab 结尾ef 包含c或者d 
    //以ab开头，以ef结尾,中间只能是c或者d。即：abcef或abdef
    console.log(reg.test('abcef'))  //true
    console.log(reg.test('abdef'))  //true
    console.log(reg.test('qwef'))  //false
    console.log(reg.test('abqwe'))  //false

1. 或的分界线为正则的边界

    var reg = /^abc|def$/   //包含  ^abc  或  def$
    //以abc开头 或者 以def结尾
    console.log(reg.test('abc123456'))  //true
    console.log(reg.test('123456def'))  //true
    console.log(reg.test('123abcdef456'))  //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  全包含的时候返回false
  console.log(reg.test('ab'))  //false  包含多个的时候返回false 
  // 只有包含中括号内的其中一个，才返回true

含义：非(不包含的意思),在中括号可以书写任意数量的符号，只要字符串不是其中的某一个就行

  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  全包含的时候返回false
  console.log(reg.test('ab'))  //false  包含多个的时候返回false 
  // 只有包含中括号内的其中一个，才返回true

含义：到至，通常和包含[] 、不包含[^]连用

  var reg = /[0-9]/  //正则代表含义：数字0~9，等价于 \d
  var reg = /[^0-9]/  //正则代表含义：非数字0~9，等价于 \D
  var reg = /[a-z]/  //表示a~z
  var reg = /[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

案例需求：要求字符串是span标签或者p标签

var reg = /<span></span>/   
//该写法存在问题，</span> 内的反斜杠与正则混淆，所以用转义符进行转换
var reg1 = /<span><\/span>/

var reg2 = /<(span|p)><\/(span|p)>/
//该写法存在问题，无法保证前后标签一一对应，所以要用重复元字符

//最终写法：
var reg3 = /<(span|p)<\/\1/

八、正则的标识符

定义：书写在正则外面，用来描述整个正则表达式

含义：表示忽略大小写

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

含义：表示全局

九、正则的捕获

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

  var reg = /\d{3}/  //表示限定3个数字
  console.log(reg.exec('qwerty'))  //null

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

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

  var reg = /\d{3}/  //表示限定3个数字
  var str = 'qwer123cfg5678'
  console.log(reg.exec(str))   //[0]:123
  console.log(reg.exec(str))   //[0]:123

有小括号

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

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

4.有标识符g

第二次捕获的时候，会从第一次捕获结束的位置开始进行捕获

  var reg = /\d{3}/g
  var str = 'qwer123cfg5678'
  console.log(reg.exec(str))   //[0]:123
  console.log(reg.exec(str))   //[0]:567
  console.log(reg.exec(str))   //null
  console.log(reg.exec(str))   //[0]:123   8就不满足条件了，甩出去

输出结果：

十、正则的两大特性

懒惰

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

贪婪

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

关于正则

一、认识正则

二、正则的常用方法

三、正则的普通元字符

四、正则的边界元字符

五、正则的限定元字符

六、正则的特殊元字符

七、正则的重复元字符

八、正则的标识符

九、正则的捕获

十、正则的两大特性