正則表達式理解及簡單應用舉例

時間 2019-11-24

標籤正則表達式理解簡單應用舉例欄目正則表達式简体版

原文原文鏈接

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

例如：html

runoo+b，能夠匹配 runoob、runooob、runoooooob 等，+ 號表明前面的字符必須至少出現一次（1次或屢次）。前端
runoo*b，能夠匹配 runob、runoob、runoooooob 等，* 號表明字符能夠不出現，也能夠出現一次或者屢次（0次、或1次、或屢次）。java
colou?r 能夠匹配 color 或者 colour，? 問號表明前面的字符最多隻能夠出現一次（0次、或1次）。git

構造正則表達式的方法和建立數學表達式的方法同樣。也就是用多種元字符與運算符能夠將小的表達式結合在一塊兒來建立更大的表達式。正則表達式的組件能夠是單個的字符、字符集合、字符範圍、字符間的選擇或者全部這些組件的任意組合。正則表達式

正則表達式是由普通字符（例如字符 a 到 z）以及特殊字符（稱爲"元字符"）組成的文字模式。模式描述在搜索文本時要匹配的一個或多個字符串。正則表達式做爲一個模板，將某個字符模式與所搜索的字符串進行匹配。編程

正則表達式具備強大的做用，歸納起來主要有如下3點：數組

1）測試字符串的模式；bash

2）替換文本；app

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.語法例子

一、簡單匹配

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

二、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複製代碼

三、^ 表示字符開始位置，$表示字符結尾位置

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複製代碼

四、\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]); //數組的第一個元素爲完整的匹配內容複製代碼

五、[ ]表示匹配指定範圍內任意字符

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複製代碼

六、用（）來建立子匹配

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>

複製代碼