JS基础入门篇（三十三）—正则表达式

1.创建一个正则表达式

方法一：使用一个正则表达式字面量，其由包含在斜杠之间的模式组成。

var reg1 = /a/;
var reg2 = /ab+c/;

方法二：调用RegExp对象的构造函数

var reg1 = new RegExp( "a" );
var reg2 = new RegExp( "ab+c" );

2.正则表达式中的特殊字符

1.转义字符

\s: 空格
    \S: 非空格
    \d: 数字
    \D: 非数字
    \w: 字母，数字，下划线
    \W: 非字母，非数字，非下划线。
    \ 进行转换。模式 /a*/ 代表会匹配 0 个或者多个 a。相反，模式 /a\*/ 将 '*' 的特殊性移除，从而可以匹配像 "a*" 这样的字符串。
    . : 代表 任何一个字符
    \b: 起始,结束,空格。eg：/\bm/匹配“moon”中得‘m’；/oo\b/并不匹配"moon"中得'oo'，因为'oo'被一个“字”字符'n'紧跟着。


var str = "12 3123";
console.log( str.replace( /\b/g,"|" ) );//|12| |3123|

2.量词

{n,m}: n 和 m 都是整数。匹配前面的字符至少n次，最多m次。如果 n 或者 m 的值是0， 这个值被忽略。
     *: 匹配前一个表达式0次或多次。等价于 {0,}。
     +: 匹配前面一个表达式1次或者多次。等价于{1,}。
     ?: 匹配前面一个表达式0次或者1次。{0,1}。
     .: 匹配除换行符之外的任何单个字符。

注意：如果 ? 紧跟在任何量词 *、 +、? 或 {} 的后面，将会使量词变为非贪婪的（匹配尽量少的字符），和缺省使用的贪婪模式（匹配尽可能多的字符）正好相反。

3. 字符类
1.[ ]

[]：匹配[]中内容的一个字符.这指的是范围匹配。     
eg:/[a-zA-Z0-9]/:只要是数字，字母都能匹配上。
eg:/[abc]/:只要是a或者b或者c，其中一个都能匹配的上。
eg:/[a-z.]+/:都匹配“test.i.ng”中的所有字符。
[]:内部不需要加|，因为它就表示一个范围，有或者的含义。

举例说明1

var re = /0|1|2/g;
            var re = /[012]/g;
            var re = /[0-2]/g;
            以上三种正则表达是一个意思

举例说明2

var re = /^([0-9]|1[0-9])$/g; // 判断数字范围是否在 0-19 之间
          console.log( re.test(20) );//false
          console.log( re.test(2) );//true

2. ^

^ : 匹配输入的开始。
eg: /^A/ 并不会匹配 "an A" 中的 'A'，但是会匹配 "An E" 中的 'A'。^表示开始。

注意：^放在[]中，表示非的意思。

eg： 例如，[^abc] 和 [^a-c] 是一样的。他们匹配"brisket"中的‘r’，也匹配“chop”中的‘h’。 意思是：不是a不是b不是c，则匹配成功。

3. $

$ : 匹配输入的结束。
eg: /t$/ 并不会匹配 "eater" 中的 't'，但是会匹配 "eat" 中的 't'。

3.使用正则表达式的方法,正则的贪婪模式和非贪婪模式

1. test：使用正则匹配字符串,如果匹配 返回true,否则false
   使用：正则.test(字符串);

<script>
        //1.是否存在数字
        var re1=/\d/;
        console.log(re1.test("asbcc1"));//true
        console.log(re1.test("asbcd"));//false
        //2.是否全是数字
        var re2=/\D/;
        console.log(!re2.test("asbcc1"));//false
        console.log(!re2.test("123445"));//true
</script>

2.search:使用正则匹配字符串,如果匹配 返回对应位置,否则返回-1。
使用：字符串.search(正则);
注意：正则区分大小写，如果想不区分大小写，则需要添加标识符 i 。对于两种创建正则的方式，i 有两中不同的写法。

<script>
        var re=/Ao/;
        var str1="aobbbllll";
        console.log(str1.search(re));//-1

        //简写方法 不区分大小写
        var re1=/Ao/i;
        console.log(str1.search(re1));//0


        //调用RegExp对象的构造函数 不区分大小写
        var re2=new RegExp("Ao","i");
        console.log(str1.search(re2));//0
</script>

3.match: 使用正则匹配字符串,如果匹配,返回对应字符串,返回数组形式,否则 null。
使用: 字符串.match(正则)。

注意:
    1. 返回的是类型是数组
    2. 正则默认匹配成功就会停止，使用标识符 g(全局匹配)。

<script>
    var str = "123a456b7890";
    
    var re1 = /\d/;
    var re2 = /\d/g;
    var re3 = new RegExp(/\d/,"g");
    var re4 = /\dA/ig;
    var re5 = new RegExp(/\dA/,"ig");
    console.log( str.match( re1 ) );//["1", index: 0, input: "123a456b7890", groups: undefined]
    console.log( str.match( re2 ) );//["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]
    console.log( str.match( re3 ) );//["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]
    console.log( str.match( re4 ) );//["3a"]
    console.log( str.match( re5 ) );//["3a"]
</script>

4.注意：正则的贪婪模式
首先需了解： +的含义是： 匹配前面一个表达式1次或者多次。等价于{1,}。

以下是贪婪模式

<script>
    var str = "6z123a456b7890";
    var re = /\d+/g;
    console.log( str.match( re ) );//["6", "123", "456", "7890"]    
</script>

解释：
1.正则的贪婪模式是指会匹配最长的，得到数目最多的项。
2.如果 ? 紧跟在任何量词 *、 +、? 或 {} 的后面，将会使量词变为非贪婪的（匹配尽量少的字符），和缺省使用的贪婪模式（匹配尽可能多的字符）正好相反。

以下是非贪婪模式

<script>
    var str = "6z123a456b7890";
    var re = /\d+?/g;
    console.log( str.match( re ) );//["6", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]
</script>

5.replace:使用正则匹配字符串,如果匹配成功,替换对应字符串,返回匹配后的字符串。如果不成功，则返回原字符串。
使用： 字符串.replace(正则,替换字符串);

<script>
    var str = "miaovketang";
    var re1 = /a/;//不全局匹配，意思为匹配成功就结束
    var re2 = /a/g;//全局匹配，意思为匹配到字符串结束为止。
    console.log( str.replace( re1,"b" ) );//mibovketang
    console.log( str.replace( re2,"b" ) );//mibovketbng
</script>

4.正则的使用

1.敏感词过滤
每个网站都有自己的敏感词，例如这次的敏感词为：星星，好，天空，这三个词。

<script>
        var str="星星挂在天空上好漂亮";
        var re=/星星|天空|好/g;
        var str2=str.replace(re,function ($0) {
            var temp="";
            console.log($0);//replace 第二个参数如果是函数的话，这个函数的第一个参数是每次匹配到的 字符。得到的结果 星星，天空，好
            for(var i=0;i<$0.length;i++){
                temp+="*";
            }
            return temp;
        });

        console.log(str2);
</script>

解析：
1.replace 第二个参数可以是一个字符串,或者函数
2.replace 第二个参数如果是函数的话，这个函数的第一个参数是每次匹配到的 字符。
3.我给参数的命名为$0,这个是随意的，只要不是关键字保留字都可以。例如a，b都可以的。

2.格式化时间
方式一：

<script>
        var str = "2018-6-25"; //转化成 2018.6.25
//      var str = "2018/6/25"; //转化成 2018.6.25
//      var str = "2018~6!25"; //转化成 2018.6.25
//      var str = "2018年6月25"; //转化成 2018.6.25

        var re=/\D/g;
        var str2=str.replace(re,".");

        console.log(str2);//2018.6.25
</script>

方式二：

<script>
        var str = "2018-6-25"; //转化成 2018.6.25
        var re=/(\d+)\D/g;
        var str2=str.replace(re,function ($0,$1) {
            console.log($0,$1);
            return $1+".";
        });

        console.log(str2);//2018.6.25
    </script>

方式二的解析：replace 第二个参数如果是函数的话，
1.这个函数的 第一个参数 是每次匹配到的 字符。
2.之后的参数是通过（）的分组，子项按照 "("确定次序。
3.例如第二个参数就是（\d+）匹配到的内容。

3.匹配模式参数的说明
使用情况举例：当使用replace，并且replace的第二个参数是函数。则这个函数的参数情况，第一个参数是正则匹配到的值。之后的参数是通过（ ）的分组，子项按照 "("确定次序。

举例一：

<script>
var str = "2018-6-25"; //2018.6.25
//        var re = /(\d+)\D/g;//使用这个正则，打印结果为：2018.6.25
        var re = /(\d)+\D/g;//使用这个正则，打印结果为：8.6.25
        console.log( str.replace( re,function($0,$1){
            console.log( $0,$1 );
            return $1+".";
        } ) );
</script>

举例二:

<script>
    var str = "2018-6-25"; //2018.6.25
    var re = /(((\d)+)(\D))/g;
    str.replace(re, function ($0, $1, $2, $3, $4) {
        console.log($0, $1, $2, $3, $4);
        //打印结果如下：
        //2018- 2018- 2018 8 -
        //6- 6- 6 6 -
    });
</script>

4.过滤标签

<script>
    var str = "<div>你好,</div><><a>美丽的</a>上海";//想转化成 你好，美丽的上海
    var re=/<.*?>/g; // 如果后面加？，就会进入非贪婪模式。
    // var re=/<.*>/g; //如果后面不加？，就会进入贪婪模式，结果为 上海。
    str2=str.replace(re,"");
    console.log(str2); //你好,美丽的上海。
</script>

5.检查是否含有class名

<body>
    <div id="box" class="div box1 box2"></div>
    <script>
        function checkClass(el,val) {
            var re = new RegExp("\\b"+val+"\\b","g")
            return re.test(el.className);
        }

        var box=document.getElementById("box");
        console.log(checkClass(box,"box2"));//true
        console.log(checkClass(box,"box"));//false
    </script>
</body>

6.找出重复次数最多的字符

方法一：不使用正则。

<script>
    var str = "abcdabcaba";
    var obj={};
    var max=0;//出现次数
    var maxValue = "";//出现的字符
    //生成对象,字符为键名，此时为键值。
    for(var i=0;i<str.length;i++){
        if(!obj[str[i]]){
            obj[str[i]]=1;
        }else{
            obj[str[i]]+=1;
        }
    }
    console.log(obj);
    //遍历进行比较，取出现的最大次数的键名和键值
    //则为出现最多的字符和出现最多的次数。
    for( var i in obj){
        if(max< obj[i]){
            max=obj[i];
            maxValue=i;
        }
    }
    console.log(max,maxValue);
</script>

方法二：使用正则。

<script>
    var str = "abcdabcaba";
    str=str.split("").sort().join("");
    console.log( str );//aaaabbbccd
    var re=/(\w)\1*/g;
    var max=0;
    var maxValue="";
    str.replace(re,function ($0,$1) {
        if(max<$0.length){
            max=$0.length;
            maxValue=$1;
        }
    });
    console.log(max,maxValue);
</script>

解析：\1, \后面的是数字1，不是字母l。
\1是作用是\1前面的表达式，至少要重复一遍。而且前面的表达式要用（ ）包起来。

\1的使用说明

<script>
    var re = /(\d)\1+/g;
    console.log( re.test( "a00" ) );//true
    console.log( re.test( "a01c" ) );//false
    console.log( re.test( "a012c" ) );//false
    console.log( re.test( "a0123131323c" ) );//false
    console.log( re.test( "a0000c" ) );//true
</script>

7.检测qq号

<body>
<!--
   1. 6-12位 纯数字
   2. 不能以0开头
-->
    <input type="text" id="t" />
    <button id="btn">click</button>
    <script>
        var t = document.getElementById("t");
        var btn = document.getElementById("btn");
        btn.onclick=function () {
            var str=t.value;
            var re=/^([^0]\d{5,11})$/;
            if(re.test(str)){
                console.log("通过验证");
            }else{
                console.log("不通过验证");
            }
        }
    </script>
</body>

8.去掉前后面的空格

<script>
        var str = "  hel lo ";
        console.log( "|"+ str +"|" );
        console.log( "|"+ str.trim() +"|" );//采用trim()方法也可以完成。
        console.log( "|"+ trimFn(str) +"|" );
        
        function trimFn( s ){
            var re = /^\s+|\s+$/g;
            return s.replace( re,"" );
            //return re.test(s);
        }
        
    </script>