JS正则表达式

正则表达式俗称火星文（也可能就我这么俗称），正则表达式是一种特殊的字符串模式，用于匹配一组字符串，就好比用模具做产品，而正则就是这个模具，定义一种规则去匹配符合规则的字符。

正则表达式的创建也有两种，常见的字面量以及构造函数

var reg=/\d/
var reg=new RegExp("\\d")
var reg=new RegExp(/\d/) 三者都是等价

个人认为 正则说太多的概念反而影响学习，通过代码一步步深入，一步步了解来的更好！！

正则的方法

之前我们讲解了JavaScript中的对象，我们都知道继承的方法都是在prototype中的，那么我们可以看看RegExp的原型方法

    console.log(RegExp.prototype)

可以看到两个函数，一个是exec和test ，这两个是内置方法，我们重点讲这两个方法！！

正则的表达式

正则的创建更多都是使用字面量来的明了，表达式直接量定义为包含在一对斜杆（/）之间

var reg=/\d/

http://tool.oschina.net/uploads/apidocs/jquery/regexp.html
https://www.cnblogs.com/luoshufang/p/5685784.html

字符与元字符的集合 可以参考上方的链接，我这里就不写了，下面例子用到的字符我都会解释，尽量每个字符都撸一遍，如果看完我下面的内容能看到上面第二个链接的内容，你的正则就已经很Ok了，只需看懂即可

字符类

将直接量字符串单独放进方括号内就组成了字符类，一个字符类可以匹配它所包含的任意字符。比如我新建一个正则表达式是/[abc]/，那这个表达式就和字母“a”、“b”、“c”中的任何一个都匹配，[]里面的内容代表一个集合，符合里面任意字符的正则表达式即可匹配

   var reg=/[abc]/;
   var str='abcd'
   console.log(reg.test(str))//true  匹配成功则返回true

   var reg=/[abc]/;
   var str='a'
   console.log(reg.test(str)) //满足其中一项即可

如果使用了^符，表示不存在，不能有，[^...]表示不在集合内的任意字符

   var reg=/[^abc]/;
   var str='a'
   console.log(reg.test(str)) //false 出现任何一个都不可以

字符类可以使用连字符来表示字符范围， 比如我们要匹配拉丁字母中的小写字母就使用a-z

    var reg=/[^a-z]/;
    var str='A'
    console.log(reg.test(str)) //true  匹配除a-z以外的字符

    var reg=/[^a-zA-Z0-9]/; //a-z  A-Z 0-9 都不能匹配
    var str='A'
    console.log(reg.test(str))//这个就狠了 fasle

因为我们的JavaScript是用Unicode字符集编写的，所以JavaScript是可以编译Unicode的，比如我们匹配一个换行符使用\n
也可以写成（\u000A），这个了解一下即可

根据刚才这个例子我简单写几个常见的字符类

   var reg=/\w/   //任何ASCII字符组成的单词，等价于[a-zA-Z0-9]
   var reg=/\W/   //大写的W，任何不是ASCII字符组成的单词，等价于[^a-zA-Z0-9]
   var reg=/\s/   //任何Unicode空白符
   var reg=/\S/   //任何非Unicode空白符
   var reg=/\d/   //任何ASCII数字，等价与[0-9]
   var reg=/\D/   //除了ASCII数字以外的任何字符，等价于[^0-9]
   var reg=/[\b]/ //退格直接量（特例） 这个用的很少 可以百度自行了解

\ 是用来转译的，好比上面的字母是有特殊意义的，\就是为了让它发挥它的意义，转译也可以在[]中，比如[\s\d]就表示匹配任意空白符或者数字

   var regs=/\w/
   var str='a'
   console.log(regs.test(str)) //true

   var regs=/w/
   var str='a'
   console.log(regs.test(str)) //false  匹配成只找w这个字母了

重复

其实正则最常用的就是表单验证，既然是验证可能有局限。好比我们刚才学的\d，有没有发现它只有一个存在，其实我们的字符串与正则是一一对应的，看例子

   var regs=/\d/
   var str='1a'
   console.log(regs.test(str)) //true 很容易理解，因为里面有个1

   var regs=/\d\d/
   var str='1a'
   console.log(regs.test(str)) //false 我们字符串中没有存在两两连续的数字情况，所以未匹配到

   var regs=/\d\d/
   var str='11a'
   console.log(regs.test(str))//true

   var regs=/\da\d/
   var str='1a1'
   console.log(regs.test(str)) //true 只有找到相同的匹配格式才返回true

   var regs=/\d[a]\d/
   var str='1a1'
   console.log(regs.test(str)) //true 有时候[]也起到一个分隔作用，好分辨一些

我们知道手机号都是数字，难道我们要写11个\d吗，显然是不对滴 ，我们看看正则的重复字符语法

   var regs=/\d{2,4}/ //匹配数字至少2到4个数字
   var str='11'
   console.log(regs.test(str)) //true

   var regs=/\d{2,4}/ //匹配数字至少2到4个数字
   var str='1'
   console.log(regs.test(str)) //false

   var regs=/\d{2,4}/ //匹配数字至少2到4个数字
   var str='1aaaa11'
   console.log(regs.test(str)) //true 只要匹配到了2-4个数字都为true

   var regs=/\d{2,}/ //匹配数字至少2个
   var str='aaa4'
   console.log(regs.test(str)) //true 跟起始位置无关

   var regs=/\d?/ //匹配前面0个或一个  这个一般都是true了
   var str='a'
   console.log(regs.test(str)) //true

   var regs=/\d+/  至少一个 相当于{1, } 跟?稍微区别一下 
   var str='a'
   console.log(regs.test(str)) // false

写两个稍微复杂一点的

   var regs=/\w{3}\d?/ //至少在可有可无的数字前面出现三个字母 
   var str='abc'
   console.log(regs.test(str)) //true

   var regs=/\w{3}\d?/ //至少在可有可无的数字前面出现三个字母 
   var str='ab1c'
   console.log(regs.test(str)) //还是true  因为数字可有可无

   var regs=/\w{3}\d+/ //至少在一个数字前面出现三个字母 
   var str='ab1c'
   console.log(regs.test(str)) //false  必须在数字前面出现三个字母

   var regs=/\w{3}\d+/ //至少在一个数字前面出现三个字母 
   var str='adb1c'
   console.log(regs.test(str)) //true

   var regs=/\s+java\s+/ //匹配前后带有一个或多个空格的字符串java
   var str='java '
   console.log(regs.test(str)) //false 前面未加空格

   var regs=/\s+java\s+/ //匹配前后带有一个或多个空格的字符串java
   var str=' java '
   console.log(regs.test(str)) //true

选择、分组和引用

正则表达式的语法还包括指定选择项，子表达式和引用前一子表达式的特殊字符。|用于分隔供选择的字符。此处就不演示了，比如/ab|cd|ef/ 可以匹配字符串“ab” 也可以匹配“cd” “ef”

选择项的匹配是从左到右，如果左边匹配成功之后就忽略右边的匹配项，即使它产生更好的匹配。比如/a|ab/匹配字符串“ab”时，它只能匹配第一个字符

圆括号

正则表达式中的圆括号有多种作用，一个作用是把单独的项组合成子表达式，以便像处理一个独立的单元一样使用 | * + ？等来对单元的项处理

   var regs=/java(script)?/
   var str='java'
   console.log(regs.test(str))  //true

script就是可有可无的存在了

   var regs=/(ab|cd)+|ef/
   var str='ab'
   console.log(regs.test(str)) //true  

第一个作用就是变成一个项，独立出来可匹配

另一个作用是可以在完整的模式中定义子模式，当一个正则表达式成功匹配时，可以从目标串中抽出和圆括号中的子模式相匹配的部分（这个后续取），比如我们匹配了/[a-z]+\d+/,匹配成功之后我们 想了解匹配尾部的数字，就可以放在括号中/[a-z]+(\d+)/，稍后单独拿出来介绍

第三个用途是允许在同一正则表达式的后部引用前面的子表达式。通过 \ 后加一位或多位数字来实现 。这个数字指定了 带 圆括号的子表达式在正则中的位置

这个用的比较少，简单了解一下,看例子

   var regs=/([a-z])\1/
   var str="a"
   console.log(regs.test(str)) //false

   var regs=/([a-z])\1/
   var str="aa"
   console.log(regs.test(str)) //true  

此时我们括号里有一个[a-z]，那么此时的\1表示就是括号中的第一项，其实此时的正则是这样的/[a-z][a-z]/，这种用法比较少，简单了解一下，会看懂即可

   var regs=/([a-z]([A-Z])\2)/
   var str="aAA"
   console.log(regs.test(str)) //true   匹配的一定是括号内的，如果[a-z]不在括号内，则只有一项

   var regs=/([a-z](?:[A-Z])\2)/
   var str="aAA"
   console.log(regs.test(str)) //false

?:将不参与匹配，也就是没办法使用\d数字来获取组合，只是一个简单的（）组合，简单了解一下，看到?:不要怕

   var regs=/([a-z](?:[A-Z])\1)/
   var str="aAa"
   console.log(regs.test(str)) //true

| 选择，（...）组合 （？:...）只组合 \n匹配 n指的是数字

指定匹配位置

指定匹配发生的合法位置，我们称这些元素为正则表达式的锚，最常用的锚元素是^，它用来匹配字符串的开始，锚元素$ 用以匹配结束

比如我们要匹配单词 JavaScript

   var regs=/^JavaScript$/
   var str="JavaScript"
   console.log(regs.test(str)) //true

开始到结尾必须是匹配字符，错一个都不行

   var regs=/^\d+JavaScript$/
   var str="1111JavaScript"
   console.log(regs.test(str)) //true

开头到结尾是定死的

断言

任意的正则表达式都可以 作为锚点条件， 如果在符号(?= )中加入一个表达式，它就是一个先行断言， 也称之为零宽断言， 也叫零宽正向断言，零宽负向断言（?! ） 看例子

    var regs=/javaScript(?=\:)/
    var str="javaScript"
    console.log(regs.test(str)) //false

    var regs=/javaScript(?=\:)/
    var str="javaScript:"
    console.log(regs.test(str)) //true  因为刚才少了一个冒号

    var regs=/javaScript(?!\:)/
    var str="javaScript"
    console.log(regs.test(str)) //true

    var regs=/javaScript(?!\:)/
    var str="javaScript:"
    console.log(regs.test(str)) //false 不能有： 很好理解

^匹配字符串的开头，在多行检索中，匹配一行的开头
$匹配字符串的结尾，在多行检索中，匹配一行的结尾
（?=p）零宽正向先行断言，要求接下来的字符都与p匹配，但不能包括匹配p的那些字符
（?!p）零宽负向先行断言，要求接下来的字符不与p匹配

修饰符

i 执行不区分大小写
g 执行一个全局匹配，找到所有的匹配，而不是找到第一个就停止
m 多行匹配模式，^匹配一行的开头和字符串的开头，$匹配行的结束和字符串的结束

讲到方法的时候我们再实际运用一下

字符串匹配检索

很多时候我们编辑正则是为了匹配字符串
String支持四种正则表达式的方法，最简单的是search（） 它的参数是正则表达式，如果不是正则表达式，就会通过RegExp构造函数转换正则表达式，search方法不支持全局检索 ，它会忽略参数中的修饰符g

    var regs=/a/

    var str="abcd"
    console.log(str.search(regs)) // 0 第一个就找到了

    var regs=/b/
    var str="abcd"
    console.log(str.search(regs)) // 1 第二个找到了

    var regs=/f/
    var str="abcd"
    console.log(str.search(regs)) // -1 未找到

    var regs=/b/g
    var str="babcd"
    console.log(str.search(regs)) // 0 只找一项 忽略修饰符g

replace（）方法比较常见，字符串的替换方法

    var regs=/javascript/gi //全局匹配 不分大小写
    var str="javascript-----JAVASCRIPT"
    console.log(str.replace(regs,'JavaScript')) // JavaScript-----JavaScript全局匹配 不分大小写 找到字母转成以下的内容

replace的第二个参数也可以是函数，不知道的小伙伴可以自行百度了解一下，毕竟我们还是讲正则重要
之前提到了两个正则方法，test与exec ，test应该都知道了，主要是判断是否匹配到字符串， 我们来看看exec方法

exec

提到exec方法就得提一下字符串的match方法，因为它们很相似

match与exec在匹配成功时，返回的都是数组，在没匹配上返回的都是null

        var str='test'
        var reg=/\w/
        var strtest=str.match(reg)
        var regtest=reg.exec(str)
        console.log(strtest,regtest) //输出是相同的

        var str='test'
        var reg=/\w/g  //这里加了全局匹配
        var strtest=str.match(reg)
        var regtest=reg.exec(str)
        console.log(strtest,regtest)  //exec输出四个字母 t e s t  match不变

只介绍入门哈，希望快速上手并了解
字符串的split方法转数组，第二个参数也可以是正则,String.split（）还是很强大的，小伙伴可以自行深入了解

写个表单验证小实战，我们更多还是看懂正则即可

    <!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>
    </head>
    <body>
        <input type="text">
        <span></span>
    </body>
    <script>

            var oI=document.getElementsByTagName('input')[0]
            var oS=document.getElementsByTagName('span')[0]
            var reg=/^\d+$/ //及其简单的正则，就是从头到尾都是数字
            oI.oninput=function(){ //偷懒写input事件
            
            if(oI.value!==''){//有内容触发验证
            var str=oI.value
            if(reg.test(str)){ //满足要求 也就是符合我们编辑的规则 
                
                oS.innerHTML='√'
                oS.style.color='green'
            }else{
                oS.innerHTML='输入的内衣有误'
                oS.style.color='red'
            }
            }else{
                oS.innerHTML=''
            }
            }

    </script>
    </html>

小伙伴可以复制测试一下