javascript 正則表達式入門基礎—由淺入深

openkk 13年前發布 | 19K 次閱讀 JavaScript開發 JavaScript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> javascript 正則表達式 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
    <script type="text/javascript">
//javascript正則表達式的基本知識

    //聲明javascript 正則表達式
     var reCat = new RegExp("cat");
    //你也可以 
     var reCat = /cat/;      //Perl 風格   (推薦)

    //學習最常用的 test exec match search  replace  split 6個方法

      //1) test  檢查指定的字符串是否存在

       var data = "123123";
       var reCat = /123/gi;
       alert(reCat.test(data));  //true

       //檢查字符是否存在  g 繼續往下走  i 不區分大小寫

     //2) exec 返回查詢值

       var data = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
       var reCat = /cat/i;
       alert(reCat.exec(data));  //Cat

     //3)match  得到查詢數組

       var data = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
       var reCat = /cat/gi;
       var arrMactches = data.match(reCat)

       for (var i=0;i < arrMactches.length ; i++)
       {
            alert(arrMactches[i]);   //Cat  cat
       }

     //4) search  返回搜索位置  類似于indexof

       var data = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
       var reCat = /cat/gi;
       alert(data.search(reCat));  //23


    //5) replace  替換字符  利用正則替換

       var data = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
       var reCat = /cat/gi;
       alert(data.replace(reCat,"libinqq"));

    //6)split   利用正則分割數組

       var data = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
       var reCat = /\,/;
       var arrdata = data.split(reCat);

       for (var i = 0; i < arrdata.length; i++)
       {
            alert(arrdata[i]);
       }

    //學習下  簡單類   負向類  范圍類  組合類

    //簡單類
       var data = "1libinqq,2libinqq,3libinqq,4libinqq";
       var reCat = /[123]libinqq/gi;
       var arrdata = data.match(reCat);

       for (var i = 0; i < arrdata.length; i++)
       {
            alert(arrdata[i]);  // 1libinqq 2libinqq  3libinqq
       }

       //負向類
       var data = "alibinqq,1libinqq,2libinqq,3libinqq,4libinqq";  //\u0062cf
       var reCat = /[^a123]libinqq/gi;
       var arrdata = data.match(reCat);

       for (var i = 0; i < arrdata.length; i++)
       {
            alert(arrdata[i]);  //4libinqq
       }

       //范圍類
       var data = "libinqq1,libinqq2,libinqq3,libinqq4,libinqq5";  //\u0062cf
       var reCat = /libinqq[2-3]/gi;
       var arrdata = data.match(reCat);

       for (var i = 0; i < arrdata.length; i++)
       {
            alert(arrdata[i]);   // libinqq2  libinqq3
       }

       //組合類
      var data = "a,b,c,w,1,2,3,5";  //\u0062cf
       var reCat = /[a-q1-4\n]/gi;
       var arrdata = data.match(reCat);

       for (var i = 0; i < arrdata.length; i++)
       {
            alert(arrdata[i]);  // a b c 1 2 3
       }
       //以上為 js正則 最基本的使用方法
    </script>
 </head>

 <body>

<!-- javascript正則表達式 進階篇  -->

<!-- javascript  正則表達式是分組知識  -->

<script language="JavaScript">
    /*正則表達式  簡單的分組
    舉例 我們要查找字符串 MouseMouse

    var reCat = /MouseMouse/gi; 

    盡管這是可以的,但是有點浪費。如果不知道Mouse 在字符串中到底出現幾次時該怎么辦,如果重復多次呢。
    var reCat = /(mouse){2}/gi;    括號的意思列Mouse 將在一行連續出現2次。

    */  

    var data = "Ah-mousemouse";  
    var reCat = /(mouse){2}/gi;   
    var arrdata = data.match(reCat);

    for (var i = 0; i < arrdata.length; i++)
    {
        alert(arrdata[i]);
    }   
  </script>

  <script language="JavaScript">
    /*正則表達式  復雜的分組
         ?   零次 或 一次
    *   零次 或 多次
    +   最少一次 或 多次
    */  

    var data = "bb ba da bad dad aa ";  
    var reCat = /([bd]ad?)/gi;   // 匹配出 ba da bad  dad
    var arrdata = data.match(reCat);

    for (var i = 0; i < arrdata.length; i++)
    {
        alert(arrdata[i]);
    }    


    // 同時 也不介意將分組放在分組中間
    // var re = /(mom( and dad)?)/;    匹配出 mom  或  mon and daa
  </script>

  <script language="JavaScript">
    /*正則表達式  反向引用*/

    var sToMatch = "#123456789";
    var reNumbers = /#(\d+)/;
    reNumbers.test(sToMatch);
    alert(RegExp.$1);

    /* 
      這個例子嘗試匹配后面跟著幾個或多個數字的鎊符合,并對數字進行分組
      以存儲他們。在調用 test 方法后,所有的反向引用都保存到了 RegExp 構造函數中
      從 RegExp.$1(它保存了第一個反向引用)開始,如果還有第二個反向引用,就是
      RegExp.$2,如果還有第三個反向引用存在,就是 RegExp.$3.依此類推。因為該組
      匹配了 “123456780”,所以 RegExp.$1 中就存儲了這個字符串。

    */


    var sToChange = "1234 5678";
    var reMatch = /(\d{4}) (\d{4})/;
    var sNew = sToChange.replace(reMatch,"$2 $1");
    alert(sNew);

    /*
      在這個例子中,正則表達式有兩個分組,每一個分組有四個數字。在 replace() 方法的第二個參數
      中,$2 等同于 “5678” ,而 $1 等同于 “1234”,對應于它們在表達式中的出現順序。
    */
  </script>

 <script language="JavaScript">
    /*正則表達式  候選 */
    var sToMatch1 = "red";
    var sToMatch2 = "black";
    var reRed = /red/;
    var reBlack = /black/;

    alert(reRed.test(sToMatch1) || reBlack.test(sToMatch1));
    alert(reRed.test(sToMatch2) || reBlack.test(sToMatch2));

    /*
     這雖然能完成任務,但是十分沉長,還有另一種方式就是正則表達式的候選操作符。
    */

    var sToMatch1 = "red";
    var sToMatch2 = "black";
    var reRedOrBlack = /(red|black)/;
    alert(reRedOrBlack.test(sToMatch1));
    alert(reRedOrBlack.test(sToMatch2));
  </script>

<script language="JavaScript">
    /*正則表達式  非捕獲性分組

    如果要創建一個非捕獲性分組,只要在左括號的后面加上一個問號和一個緊跟的冒號:
    */

    var sToMatch = "#123456789";
    var reNumbers = /#(?:\d+)/;
    reNumbers.test(sToMatch);
    alert(RegExp.$1);

    /*
    這個例子的最后一行代碼輸出一個空字符串,因為該組是非捕獲性的,
    */

    var sToMatch = "#123456789";
    var reNumbers = /#(?:\d+)/;
    alert(sToMatch.replace(reNumbers,"abcd$1"));

    /*
    正因如此,replace()方法就不能通過 RegExp.$x 變量來使用任何反向引用,這段代碼
    輸出的“abcd$1”而不是abcd123456789, 因為$1 在這里并不被看成是一個反向引用。
    */
  </script>

 <script language="JavaScript">
    /*正則表達式  前瞻
    前瞻 就和它名字一樣,它告訴正則表達式運算器向前看一些字符而不是移動位置
    */


      var sToMatch1 = "bedroom";
      var sToMatch2 = "bedding";
      var reBed = /bed(?=room)/; 
      alert(reBed.test(sToMatch1));  //true
      alert(reBed.test(sToMatch2));  //false

    //負向前瞻

      var sToMatch1 = "bedroom";
      var sToMatch2 = "bedding";
      var reBed = /bed(?!room)/; 
      alert(reBed.test(sToMatch1)); //false
      alert(reBed.test(sToMatch2)); //true
  </script>

   <script language="JavaScript">
    /*正則表達式  邊界
    ^     行開頭
    $     行結尾
    \b    單詞的邊界
    \B    非單詞的邊界
    */

      var sToMatch = "Important word is the last one.";
      var reLastWord = /(\w+)\.$/; 
      reLastWord.test(sToMatch);
      alert(RegExp.$1);  //one

    /*
    假如想查找一個單詞,但要它只出現在行尾,則可以使用美元符號 ($)來表示它:
    */



      var sToMatch = "Important word is the last one.";
      var reLastWord = /^(\w+)/; 
      reLastWord.test(sToMatch);
      alert(RegExp.$1);  //Important

    /*
    在這個例子中,正則表達式查找行起始位置后的一個或多個單詞字符。如果遇到非單詞字符
    匹配停止,返回 Important。 這個例子也可以用單詞邊界實現。
    */

      var sToMatch = "Important word is the last one.";
      var reLastWord = /^(.+?)\b/; 
      reLastWord.test(sToMatch);
      alert(RegExp.$1);  //Important

    /*
    這里,正則表達式用惰性量詞來制定在單詞邊界之前可以出現任何字符,且可以出現一次或
    多次(如果使用貪婪性量詞,表達式就匹配整個字符串)。
    */

    var data = " First second thind fourth fifth sixth ";  
    var reCat = /\b(\S+?)\b/g;   
    var arrdata = data.match(reCat);

    for (var i = 0; i < arrdata.length; i++)
    {
        alert(arrdata[i]);
    }   

    /*
    使用單詞邊界可以方便地從字符串中抽取單詞。
    */
  </script>

    <script language="JavaScript">
    /*正則表達式  多行模式

      要制定多行模式,只要在正則表達式想要匹配的行末的一個單詞
    */  

    var data = " First second\n thind fourth\n fifth sixth";  
    var reCat = /(\w+)$/g;   
    var arrdata = data.match(reCat);

    for (var i = 0; i < arrdata.length; i++)
    {
        alert(arrdata[i]);
    }  

    /*
      上面只返回一個單詞 sixth,因為換行符阻擋了匹配,只能匹配行末的一個單詞,
    當然也可以使用 split() 方法將字符串分割成數組,但就得對每一行進行單獨匹配。

    以前不好好看書經常半吊子,看一半就仍了,導致用了好多 split, 其實很簡單如下面
    例子 只需要 m 參數進行多行匹配。

    */  
    var data = " First second\n thind fourth\n fifth sixth";  
    var reCat = /(\w+)$/gm;   
    var arrdata = data.match(reCat);

    for (var i = 0; i < arrdata.length; i++)
    {
        alert(arrdata[i]);
    }  
  </script>
 </body>
</html>
 本文由用戶 openkk 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!