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>