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

binbinsilk發表於2018-07-07

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

例如：

  • runoo+b，可以匹配 runoob、runooob、runoooooob 等，+ 號代表前面的字元必須至少出現一次（1次或多次）。

  • runoo*b，可以匹配 runob、runoob、runoooooob 等，* 號代表字元可以不出現，也可以出現一次或者多次（0次、或1次、或多次）。

  • colou?r 可以匹配 color 或者 colour，? 問號代表前面的字元最多隻可以出現一次（0次、或1次）。

構造正規表示式的方法和建立數學表示式的方法一樣。也就是用多種元字元與運算子可以將小的表示式結合在一起來建立更大的表示式。正規表示式的元件可以是單個的字元、字符集合、字元範圍、字元間的選擇或者所有這些元件的任意組合。

正規表示式是由普通字元（例如字元 a 到 z）以及特殊字元（稱為"元字元"）組成的文字模式。模式描述在搜尋文字時要匹配的一個或多個字串。正規表示式作為一個模板，將某個字元模式與所搜尋的字串進行匹配。

正規表示式具有強大的作用，概括起來主要有以下3點：

1）測試字串的模式；

2）替換文字；

3）根據模式匹配從字串中提取一個字串。


1.正規表示式的建立(javascript)

在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.反義

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

符號表示
\W匹配任意不是字母，數字，下劃線，漢字的字元
\S匹配任意不是空白符的字元
\D匹配任意非數字的字元
\B匹配不是單詞開頭或結束的位置
[ ^x ]匹配除了x以外的任意字元
[ ^aeiou ]匹配除了aeiou這幾個字母以外的任意字元

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

注意：

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

9.貪婪與懶惰

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

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

符號表示
*?重複任意次，但儘可能少重複
+?重複1次或更多次，但儘可能少重複
??重複0次或1次，但儘可能少重複
{n,m}?重複n到m次，但儘可能少重複
{n,}?重複n次以上，但儘可能少重複


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即可複製程式碼
2、i 表示忽略大小寫

        // 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複製程式碼

4、\s表示匹配任何空白字元，包括空格、製表符、換頁符等；

\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);
複製程式碼


10.JavaScript遮蔽F5鍵
程式碼如下

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

複製程式碼


相關文章