javascriptRegex的常用方法總結

來源:互聯網
上載者:User

在介紹Regex文法之前先學習下面幾個方法:

Regex方法:test(),exec()
String對象方法:match(),search(),replace(),split()

 

   test()方法:
      用法:regexp對象執行個體.test(字串)
      傳回值:如果滿足regexp對象執行個體中定的正則規則,返回true,否則返回false


   exec()方法:
       用法:regexp對象執行個體.exec(字串)
       傳回值:如果 exec 方法沒有找到匹配,則它返回 null。如果它找到匹配,則 exec 方法返回一個數組,並且更新全域 RegExp 對象的屬性,以反映匹配結果。數組的0元素包含了完整的匹配,而第1到n元素中包含的是匹配中出現的任意一個子匹配。這相當於沒有設定全域標誌 (g) 的 match 方法。
如果為Regex設定了全域標誌,exec 從以 lastIndex 的值指示的位置開始尋找。如果沒有設定全域標誌,exec 忽略 lastIndex 的值,從字串的起始位置開始搜尋。

這裡需要備忘下:上面傳回值這段話關於返回數組讓我迷惑了好久,因為實驗下來返回的都是一個長度的數組,也就是只有一個元素.查了網上很多資料都沒有相關的介紹.翻開上次買的"javascript 進階程式設計"一書,在P168有介紹(所謂反向引用,以後介紹)
另外,關於"更新全域 RegExp 對象的屬性"我是這樣理解的:更新RegExp對象的index和lastIndex屬性,在設定了全文匹配參數後可以實驗,每次匹配從上一個lastIndex開始搜尋.(可以結合下面的屬性和後面的例子來體會)

       屬性,分別是 input、index 和 lastIndex。Input 屬性包含了整個被尋找的字串。Index 屬性中包含了整個被尋找字串中被匹配的子字串的位置。LastIndex 屬性中包含了匹配中最後一個字元的下一個位置。

    match()方法:
      用法:string對象.match(regexp對象)
      傳回值:如果 match 方法沒有找到匹配,返回 null。如果找到匹配返回一個數組並且更新全域 RegExp 對象的屬性以反映匹配結果。
      備忘:match和exec一個很明顯的差別是設定了全文檢索搜尋參數g後它返回的數組不再是一個元素,而是所有的元素,第一個匹配結果數組基數為0,第二個為1,以此類推.
      屬性:同exec,match也有index,lastIndex,input三個屬性,意義也同exec

      exec和match差別比較的例子:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
    <title>Untitled Document</title>
  </head>
  <body>
  <script>
    var str="hello,caolvchong.I love maomao.I should love her forever";
    var reg=/ao/g;
    function execstr()//點一下:輸出  7-9--ao      再點一下:輸出   25-27--ao      再點:28-30--ao 
   {
      var show=reg.exec(str);
      alert(show.index+"-"+show.lastIndex+"--"+show);//exec只匹配第一個,show是單元素數組,輸出第一個匹配項.index和lastIndex分別是第一項的起始和結束位置.要讓exec匹配全部,要用上面exec中舉的例子,使用while迴圈
    }
    function matchstr()//點一下:輸出  28-30--ao,ao,ao  
   {
      var show=str.match(reg);
      alert(show.index+"-"+show.lastIndex+"--"+show);//match匹配全部滿足Regex的式子.show同樣是個數組,由於包含了所有匹配項目,一般有多項.javascript中輸出數組名將輸出全部數組中的內容.當然你也可以用for迴圈逐個輸出各個項,數組下標從0開始.另外,這裡的index和lastIndex是最後一個匹配項的起始和結束位置
    }
 </script>
  被搜尋字串:Hello,my name is caolvchong.I love maomao.
  用/ao/gRegex搜尋.<br/>
  <input type="button" value="exec方法搜尋" onclick="execstr()">
  <input type="button" value="match方法搜尋" onclick="matchstr()">
  </body>
</html>

   search()方法:
      用法:string對象.search(regexp對象)
      傳回值:search 方法指明是否存在相應的匹配。如果找到一個匹配,search 方法將返回一個整數值,指明這個匹配距離字串開始的位移位置。如果沒有找到匹配,則返回 -1.
      注意:返回的只是與Regex尋找內容匹配的第一個子字串的位置.所以用全域搜尋參數就沒有意義了.


   replace()方法:
      用法:string對象.replace(regexp對象|字串,"替換的字串")
      傳回值:如果設定了全文檢索搜尋,則全部滿足的都將被替換;否則只替換第一個.返回替換後的字串.
      注意:replace中還可以接受字串,但只替換第一個滿足條件的字串.


   split()方法:
      用法:string對象.split([分割符(可以是字串或Regex[,限制輸出數組個數]])
      傳回值:返回string對象被分割的數組
      注意:string對象不會被split方法修改。分割符是可選項,可以是字串或Regex對象,它標識了分隔字串時使用的是一個還是多個字元。如果忽略該選項,返回包含整個字串的單一元素數組.最後一個選項限制輸出數組個數也是可選項,該值用來限制返回數組中的元素個數。
另外,split本身就帶有全文匹配的特性,所以可用可不用g參數
從上面分析也可以看出一點:Regex比字串替換功能強大.下面的例子也可以看出.


      例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
    <title>Regexsplit</title>
    <script>
      function split_by_str(){
        var txtnode=document.getElementById("txt");//取得div節點
        var txt=txtnode.firstChild.nodeValue;//取得文本值
        var newtxt=txt.split("AI");//用AI來劃分
        for(var i=0;i<newtxt.length;i++){//輸出
          alert(newtxt[i]);
        }
      }
      function split_by_regexp(){
        var txtnode=document.getElementById("txt");//取得div節點
        var txt=txtnode.firstChild.nodeValue;//取得文本值
        var regtxt=/ai/i;//也可以/ai/gi,這個不影響,split本身具有全文匹配功能
        var newtxt=txt.split(regtxt);//用AI來劃分
        for(var i=0;i<newtxt.length;i++){//輸出
          alert(newtxt[i]);
        }
      }
    </script>
  </head>
  <body>
    <div id="txt">
      我AI愛ai毛毛,Ai毛毛aI愛AI我!
    </div>
    <input type="button" value="用字串AI來劃分" onclick="split_by_str();">
    <input type="button" value="用RegexAi或ai或AI或aI來劃分" onclick="split_by_regexp();">
  </body>
</html>

      例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
    <title>Regexreplace</title>
    <style>
      .color_name{/*定義高亮樣式:背景黃色,字型粗體紅色*/
        color:red;
        font-weight:bold;
        background:yellow;
      }
    </style>
    <script language="javascript" type="text/javascript">    
      function change_name(){//替換文本函數
        var txtnode=document.getElementById("txt");//取得div節點
        var txt=txtnode.firstChild.nodeValue;//取得文本值
        var regstr=/tom/gi;//Regex:匹配tom,全文不分大小寫檢索
        var newtxt=txt.replace(regstr,"草履蟲");//全部替換
        document.getElementById("txt").firstChild.nodeValue=newtxt;//改變文本顯示
      }
      function color_name(){//高亮函數
        var txtnode=document.getElementById("txt");//取得div節點
        var txt=txtnode.firstChild.nodeValue;//取得文本值
        var regstr=/tom/gi;//Regex:匹配tom,全文不分大小寫檢索
        var arr=txt.match(regstr);//match方法取得滿足匹配的所有字串
        for(var i=0;i<arr.length;i++){//遍曆滿足匹配的所有字串
          var newtxt=txt.replace(regstr,'<span class="color_name">'+arr[i]+'</span>');//替換,實際上就是添加標籤,該標籤高亮
          txtnode.innerHTML=newtxt;//不能用nodeValue修改,nodeValue不支援轉化為html,所以用innerHTML
          }      
      }
    </script>
  </head>
  <body>
  <div id="txt">
    Hello,everyone!
    His name is tom.
    Do you know Tom?
    TOM is a boy who loves football and PC.
    So,do you want to make friends with TOm.
  </div>
  -----------------------------------------<br/>
  把上面的Tom(包括各種形式)高亮或轉化為草履蟲<br/>
  -----------------------------------------<br/>
  <input type="button" value="高亮TOM" onclick="color_name();">
  <input type="button" value="轉化TOM" onclick="change_name();">
  </body>
</html>

      例子:(是根據上面exec方法改變了下)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
    <title>Regex</title>
    <script language="javascript" type="text/javascript">
    function regexp_str(){
      var getStr=document.getElementsByTagName("input")[0].value;
      var regexpStr;
      var searchType=document.getElementsByTagName("input")[1].value;
      if(searchType==1){ //是否大小寫判斷
        regexpStr=/cat/i;
      }
      else{  
        regexpStr=/cat/;
        }
      var arr = getStr.search(regexpStr);
      if(arr==-1){ //沒有找到返回-1
        alert("輸入的字串中沒有出現cat");
      }
      else{ //找到返回第一次匹配的位置
        alert("第一個匹配cat的字串出現位置:"+arr);
      }
    }
    function checkbox_value(){
      var searchType=document.getElementsByTagName("input")[1].value;
      if(searchType==1)
        searchType=0;
      else
        searchType=1;
      document.getElementsByTagName("input")[1].value=searchType;
    }
  </script>
  </head>
  <body>
    <input type="text">
    忽略大小寫:<input type="checkbox" checked value="1" onchange="checkbox_value();">
    <input type="button" value="查詢" onclick="regexp_str();">
  </body>
</html>

       例子:
代碼:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
    <title>Regex</title>
    <script language="javascript" type="text/javascript">
    function regexp_str(){//匹配Regex函數
      var getStr=document.getElementsByTagName("input")[0].value;//取得輸入
      var regexpStr,arr;
      var searchType=document.getElementsByTagName("input")[1].value;//是否全文檢索搜尋
      if(searchType==1){//全文檢索搜尋
        regexpStr=/cat/g;//g,全文檢索搜尋參數
        while ((arr = regexpStr.exec(getStr)) != null){//當還沒匹配完之前
        alert(arr.index + "-" + arr.lastIndex + arr + "---"+arr.input);
//index是找到匹配的起始位置;lastIndex是找到匹配的末位置+1.比如這個例子:要匹配cat,而你輸入的是1cat2cat3,則第一次匹配index為1,lastIndex為4.第二次匹配index為5,lastIndex為8.從這裡也可以看出,lastIndex是配置了全文檢索搜尋後下一個搜尋的開始位置.
//arr是輸出整個數組,由於只有一個長度,輸出的就是匹配的字串
//input屬性是在這裡是輸入的字串,廣義來說,就是被搜尋的全文,比如上面舉例的1cat2cat3
        }
      }
      else{ //一次匹配
        regexpStr=/cat/;
        arr = regexpStr.exec(getStr);
        alert(arr.index + "-" + arr.lastIndex + arr + "---"+arr.input); //由於只是一次匹配,就不要像上面那樣用迴圈了(不然出現匹配情況,每次始終從頭開始搜尋,不能達到null,陷入死迴圈)
        }    
    }
    function checkbox_value(){//改變checkbox的值
      var searchType=document.getElementsByTagName("input")[1].value; //取得當前checkbox值
      if(searchType==1) //checkbox值為1改為0,否則改為1
        searchType=0;
      else
        searchType=1;
      document.getElementsByTagName("input")[1].value=searchType;
    }
  </script>
  </head>
  <body>
    <input type="text">
    全文檢索搜尋:<input type="checkbox" checked value="1" onchange="checkbox_value();">
    <input type="button" value="查詢" onclick="regexp_str();">
  </body>
</html>

      例子:(第一篇Regex例子)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
    <title>Regex</title>
    <script language="javascript" type="text/javascript">
    function regexp_str(){
      var getStr=document.getElementsByTagName("input")[0].value; //取得輸入值
      var regexpStr=/cat/; //建立正則對象,匹配為cat
      if(regexpStr.test(getStr)) //正則對象的test方法,後面會介紹(就是匹配返回true,否則返回false)
        alert("輸入的字串"+getStr+"包含"+regexpStr.source); //正則對象的source屬性,後面會介紹(就是返回正則對象設定的匹配值)
      else
        alert("輸入的字串"+getStr+"不包含"+regexpStr.source);
    }
  </script>

  </head>
  <body>
    <input type="text">
    <input type="button" value="查詢" onclick="regexp_str();">
  </body>
</html>

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.