正規表示式理解及簡單應用舉例

正規表示式述了一種字串匹配的模式，可以用來檢查一個串是否含有某種子串、將匹配的子串替換或者從某個串中取出符合某個條件的子串等。

在JavaScript裡，正規表示式有兩個構造方式，一個是通過RegExp這個建構函式建立例項，另一個是正規表示式字面量寫法。

建立方式1:

    var reg = new RegExp();//建立物件    
    reg = new RegExp("c");  //匹配字母c    
    reg = new RegExp("c","gi"); //表示不區分大小寫匹配字母c複製程式碼

建立方式2:

   var reg = /c/gi;複製程式碼

2.正規表示式中的幾個概念

1.元字元

元字元聽起來也很抽象，其實換個例子就容易理解：學習如何學習，叫元學習；關於知識的知識，叫元知識。·

元字元，則是描述字元的字元，比如，數字，字母，空格，換行等。

超程式設計，就是能生成程式碼的程式碼，在 Javascript 構造符合語法的字串，放到eval(code)裡執行一下，你就在超程式設計了。

列舉幾個元字元。元字元大多以反斜槓開頭 \，因為前面展示的「正規表示式字面量」寫法裡，用的是兩個斜槓包裹，所以得用反斜槓或其他識別符號。

• \d，匹配單個數字（即匹配0到9單個數字）；d 是 digit 這個單詞的縮寫，它的中文意思就是「數字」
• \w，匹配單個單詞字元（匹配 字母 或 數字 或 下劃線 或 漢字 等），w 是 word 的縮寫，就是字母 a-z，數字 0-9，不包括逗號、句號、加減乘除號、括號等。
• \s，匹配單個空白字元（即匹配任意的空白符，包括空格，製表符(Tab)，換行符，中文全形空格等），s 是 space 的縮寫，就是空白的意思。
• \n，匹配換行符，n 是 newline 的縮寫，中文就是換行。
• \r，匹配回車符，r 就是 return 的縮寫，回車在這裡就是它的中文意思。
• \t，匹配製表符，就是 tab 鍵打出來的一串用以縮排的空白字元，tab 是 tabel 的縮寫，table 就有表格和製表的意思。
• \b，匹配單詞邊界（ 單詞的開頭或結尾，也就是單詞的分界處，b 是 boundary 的縮寫，中文就是邊界的意思。）
• * 匹配任意數量的字元
  
• . 匹配除了換行之外的所有字元
  
• ^ 匹配字串的開始
  
• $ 匹配字串的結束
  

2.量詞

元字元大多隻能表示單個字元的型別。·

我們還需要量詞，以表示「有，有0到多個，有至少一個，有n個以上，有n到m個，以某個字元開頭，以某個字元結尾等」。

這時你可以停下來，稍作思考，讓你來設計，你會設計成什麼樣？

Javascript的設計如下：

• n+，至少1個 n 型別的字元
• n*，0到多個 n 型別的字元
• n?，0 或 1 個 n 型別的字元
• n{X}，X 個 n 型別的字元
• n{X,Y}，X 到 Y 個 n 型別的字元
• n{X,}，至少 X 個 n 型別的字元
• n$，以 n 型別的字元結尾
• ^n，以 n 型別的字元開頭

如你所見，大致是一些類似數學裡表達區間的意思。

3.表示式

你可以戲謔地說它是「元表示式」。·

其實，它們也是描述範圍的，只是不是所有範圍都是關於某個字元型別n 的數量和出現位置，有些範圍跟多個字元組成的集合有關。

比如，在這幾個字元型別之內，在這幾個字元型別之外的，便利地表示 26 個字母，便利地表示 10 個數字字元。

Javascript的設計如下：

• [abc]，匹配單個字元，它是abc的集合的元素
• [^abc]，匹配單個字元，它不是abc的集合的元素
• [0-9]，匹配單個字元，它是從0到9這個集合的元素
• [a-z]，匹配單個字元，它是26 字母這個集合的元素
• (red|blue|green)，匹配多個連續字元，它是 red blue green 這三個詞的集合的元素

4.字元轉義

查詢元字元本身的話，比如你查詢.,或者*,就出現了問題：你沒辦法指定它們，因為它們會被解釋成別的意思。這時你就得使用\來取消這些字元的特殊意義。因此，你應該使用\.和\*。當然，要查詢\本身，你也得用\\

5.字元類

[ ] 集合查詢 ,比如 [abcde] 表示匹配裡面包含的字元 , 常見的[0-9]和\d等價, 即匹配一位數字, [a-z0-9A-Z_]也完全等同於\w（如果只考慮英文的話）
\(?0\d{2}[) -]?\d{8}首先是一個轉義字元\(,它能出現0次或1次?,然後是一個0，後面跟著2個數字\d{2}，然後是)或-或空格中的一個，它出現0次或1次?，最後是8個數字\d{8}

6.分支條件

上面那個表示式也能匹配010)12345678或(022-87654321這樣的“不正確”的格式。
正規表示式裡的分枝條件指的是有幾種規則，如果滿足其中任意一種規則都應該當成匹配，具體方法是用|把不同的規則分隔開。
0\d{2}-\d{8}|0\d{3}-\d{7}表示0開頭接兩位數字,-後面連著8位數的電話號碼,比如020-12345678 或者 0開頭接三位數字,-後面連著7位數的電話號碼,比如0751-1234567
使用分枝條件時，要注意各個條件的順序。原因是匹配分枝條件時，將會從左到右地測試每個條件，如果滿足了某個分枝的話，就不會去再管其它的條件了。

7.分組

如果想要重複多個字元又,你可以用小括號來指定子表示式(也叫做分組)
(\d{1,3}\.){3}\d{1,3}是一個簡單的IP地址匹配表示式。要理解這個表示式，請按下列順序分析它：\d{1,3}匹配1到3位的數字，(\d{1,3}\.){3}匹配三位數字加上一個英文句號(這個整體也就是這個分組)重複3次，最後再加上一個一到三位的數字(\d{1,3})。
正規表示式中並不提供關於數學的任何功能，所以只能使用冗長的分組，選擇，字元類來描述一個正確的IP地址：((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)

8.反義

有時需要查詢不屬於某個能簡單定義的字元類的字元。比如想查詢除了數字以外，其它任意字元都行的情況，這時需要用到反義：·

例子：
\S+匹配不包含空白符的字串。
<a[^>]+>匹配用尖括號括起來的以a開頭的字串

注意：

和元字元中的\w \s \d \b相比，反義這四個使用的是大寫。

9.貪婪與懶惰

當正規表示式中包含能接受重複的限定符時，通常的行為是（在使整個表示式能得到匹配的前提下）匹配儘可能多的字元。以這個表示式為例：a.*b，它將會匹配最長的以a開始，以b結束的字串。如果用它來搜尋aabab的話，它會匹配整個字串aabab。這被稱為貪婪匹配。

有時，我們更需要懶惰匹配，也就是匹配儘可能少的字元。前面給出的限定符都可以被轉化為懶惰匹配模式，只要在它後面加上一個問號?。這樣.*?就意味著匹配任意數量的重複，但是在能使整個匹配成功的前提下使用最少的重複。
a.*?b匹配最短的，以a開始，以b結束的字串。如果把它應用於aabab的話，它會匹配aab（第一到第三個字元）和ab（第四到第五個字元）
為什麼第一個匹配是aab（第一到第三個字元）而不是ab（第二到第三個字元）？簡單地說，因為正規表示式有另一條規則，比懶惰／貪婪規則的優先順序更高：最先開始的匹配擁有最高的優先權·

3.JS中正規表示式的常用物件方法

 1）test：返回一個Boolean值，判斷指定的字串中是否存在模式，存在返回true，否則返回false；

2）match:找到一個或多個正規表示式的匹配；

3）replace：替換與正規表示式匹配的子串；

4）search：檢索與正規表示式匹配的值。

5) exec:用正規表示式在字串中查詢，並返回陣列。

4.語法例子

1、簡單匹配

        var str = "They love us,we are happy!";        
        var reg = new RegExp("we");        
        alert(reg.test(str));  //返回true,只要字串中含有we即可複製程式碼

        // i表示忽略大小寫        
        var str = "They love us,we are happy!";        
        var reg = new RegExp("We");        
        alert(reg.test(str));  //返回false         
        
        var reg = new RegExp("We","i"); //第二個引數i表示不區分大小寫        
        alert(reg.test(str));  //返回true複製程式碼

3、^ 表示字元開始位置，$表示字元結尾位置

        var str = "They love us,we are happy!";        
        var reg = new RegExp("^we");        
        alert(reg.test(str));  //返回false,因為we不在開始位置         

        var reg = new RegExp("^The");        
        alert(reg.test(str));  //返回true複製程式碼

        var str = "They love us,we are happy!";        
        var reg = new RegExp("^The$");        
        alert(reg.test(str));  //返回false,因為The雖然在開頭，但不在末尾。         

        var str = "They love us,we are happy!";        
        var reg = new RegExp("happy!$");        
        alert(reg.test(str));  //返回true複製程式碼

\d表示0-9任意一個數字；

\w表示任意一個字母、數字和下劃線；

\. 小數點可以匹配除了換行符（/n）以為的其他任意字元；

+表示字元至少要出現一次

    var str = "su 8";    
    var re = /^[a-z]+\s\d+/;    
    alert(re.test(str)); //返回true複製程式碼

    var array = re.exec(str);    
    alert(array[0]); //陣列的第一個元素為完整的匹配內容複製程式碼

5、[ ]表示匹配指定範圍內任意字元

        var str = "we are family";         
        var reg = new RegExp("[a-z]");        
        alert(reg.test(str));  //返回true         

        var str = "123we are family";        
        var reg = new RegExp("^[a-z]"); //以字母開頭        
        alert(reg.test(str));  //返回false複製程式碼

6、用（）來建立子匹配

    var str = "jQuery 1.11";  //下面獲取主版本號1和次版本號11
    var re = /\d+\.+\d+/;
    var array = re.exec(str); //這種方法只能獲得1.11
    alert(array[0]); //陣列的第一個元素為完整的匹配內容
 
    var re = /(\d+)\.+(\d+)/;  //利用括號建立子元素
    var array = re.exec(str); 
    alert(array[0]); //完整的匹配字串1.11
    alert(array[1]);//第一個子元素1
    alert(array[2]); //第二個子元素11
複製程式碼

5.正規表示式在前端中的業務應用場景（JS實現）

1..Javascript表單驗證email，判斷一個輸入量是否為郵箱Email，通過正規表示式實現

//檢查email郵箱
function isEmail(str){
       var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
       return reg.test(str);
}複製程式碼

2.JavaScript表單驗證中文大寫字母JavaScript表單驗證中文大寫字母，判斷一個輸入量是否為中文或大寫的英文字母，通過正規表示式實現。

// 檢查是否為有效的真實姓名，只能含有中文或大寫的英文字母
function isValidTrueName(strName){
      var str = Trim(strName);   //判斷是否為全英文大寫或全中文，可以包含空格
      var reg = /^[A-Z u4E00-u9FA5]+$/;
      if(reg.test(str)){
       return false;
      }
      return true;複製程式碼

3.JavaScript表單驗證是否為中文，判斷一個輸入量是否為中文，通過正規表示式實現。

// 檢查是否為中文
function isChn(str){
      var reg = /^[u4E00-u9FA5]+$/;
      if(!reg.test(str)){
       return false;
      }
      return true;
}複製程式碼

4.JavaScript正則比較兩個字串，就是利用正規表示式快速比較兩個字串的不同字元。

<script language="JavaScript">
var str1 = "求一個比較字串處理功能";
var str2 = "求兩或三個比較字串處理";
var re = new RegExp("(?=.*?)[^" + str1 +"](?=.*?)|(?=.*?)[^" + str2 + "](?=.*?)", "g");
var arr;
while ((arr = re.exec(str1 + str2)) != null)
{
   document.write(arr);
}
</script>複製程式碼

5.JavaScript表單驗證密碼

JavaScript表單驗證密碼是檢查輸入框是否為有效的密碼，
密碼只允許由ascii組成，
此函式只在修改或註冊密碼時使用。
也就是說一切不是ascii組成的字串都不能通過驗證。
具體函式checkValidPasswd請看下面的演示程式碼function checkValidPasswd(str){

var reg = /^[x00-x7f]+$/;
      if (! reg.test(str)){
       return false;
      }
      if (str.length < 6 || str.length > 16){
       return false;
      }
      return true;
}複製程式碼

6.JavaScript檢查是否為整數

JavaScript正則驗證檢查輸入物件的值是否符合整數格式
輸入量是str 輸入的字串
如果輸入量字串str通過驗證返回true,否則返回false

function isInteger( str ){
var regu = /^[-]{0,1}[0-9]{1,}$/;
return regu.test(str);
}複製程式碼

7.JavaScript正則驗證是否為空

JavaScript正則驗證字串是否為空
用途：檢查輸入字串是否為空或者全部都是空格
輸入量是一個字串：str
返回：如果輸入量全是空返回true,否則返回false

function isNull( str ){
if ( str == "" ) return true;
var regu = "^[ ]+$";
var re = new RegExp(regu);
return re.test(str);
}複製程式碼

8.通過正則去判斷獲得是是否是IP地址的格式，然後返回相應的結果

JavaScript正則驗證IP，用途：校驗ip地址的格式
輸入：strIP：ip地址
返回：如果JavaScript通過驗證IP返回true,否則返回false；

function isIP(strIP) {
if (isNull(strIP)) return false;
var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //匹配IP地址的正規表示式
if(re.test(strIP))
{
if( RegExp.$1 <256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256) return true;
}
return false;
}複製程式碼

9.JavaScript表單驗證自定義內容

JavaScript表單驗證自定義內容，這個比較好，可以自由定製輸入項的內容來用JavaScript進行驗證，下面demo中是表單項只能為數字和"_"，同樣您可以進行擴充套件來達到您想要的目的。用於電話/銀行帳號驗證上,可擴充套件到域名註冊等

<script  language="javascript">
<!--
function  isNumber(String)
{  
var  Letters  =  "1234567890-";  //可以自己增加可輸入值
var  i;
var  c;
if(String.charAt(  0  )=='-')
return  false;
if(  String.charAt(  String.length  -  1  )  ==  '-'  )
return  false;
for(  i  =  0;  i  <  String.length;  i  ++  )
{  
c  =  String.charAt(  i  );
if  (Letters.indexOf(  c  )  <  0)
return  false;
}
return  true;
}
function  CheckForm()
{  
if(!  isNumber(document.form.TEL.value))  {  
alert("您的電話號碼不合法！");
document.form.TEL.focus();
return  false;
}
return  true;
}
-->
</script>
JavaScript驗證表單項不能為空
JavaScript驗證表單項不能為空，這個可是很常用的哦，比如在驗證表單裡面的使用者名稱不能為空等等，程式碼如下
<script  language="javascript">
<!--
function  CheckForm()
{  
if  (document.form.name.value.length  ==  0)  {  
alert("請輸入您姓名!");
document.form.name.focus();
return  false;
}
return  true;
}
-->
</script>
JavaScript其他遮蔽
google_ad_client = "pub-2681618127469348"; google_ad_slot = "7207323897"; google_ad_width = 300; google_ad_height = 250; // google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);
複製程式碼

<script language="javascript">
<!--
function document.onkeydown()  
{  
    if ( event.keyCode==116)  
    {  
        event.keyCode = 0;  
        event.cancelBubble = true;  
        return false;  
    }
}
-->
</script>

複製程式碼