正則表達(dá)式是一個(gè)很牛逼的東東，今天在這里只是簡(jiǎn)單的給剛剛接觸JS的人普及一下，里面若有爭(zhēng)議的地方歡迎大家留言！

1.1 什么是正則表達(dá)式

​ 正則表達(dá)式(regular expression)是一個(gè)描述字符模式的對(duì)象，ECMAScript的RegExp 類表示正則表達(dá)式，而String和RegExp都定義了使用正則表達(dá)式進(jìn)行強(qiáng)大的模式匹配和文本檢索與替換的函數(shù)。

​ 正則表達(dá)式用于對(duì)字符串模式匹配及檢索替換，是對(duì)字符串執(zhí)行模式匹配的強(qiáng)大工具。

1.2 正則表達(dá)式的作用

​ 正則表達(dá)式主要用來(lái)驗(yàn)證客戶端的輸入數(shù)據(jù)。

​ 用戶填寫完表單單擊按鈕之后，表單就會(huì)被發(fā)送到服務(wù)器，在服務(wù)器端通常會(huì)用PHP、ASP.NET、JSP等服務(wù)器腳本對(duì)其進(jìn)行進(jìn)一步處理。因?yàn)榭蛻舳蓑?yàn)證，可以節(jié)約大量的服務(wù)器端的系統(tǒng)資源，并且提供更好的用戶體驗(yàn)。

二、創(chuàng)建正則表達(dá)式==(123)==

要使用正則表達(dá)式，必須先創(chuàng)建正則表達(dá)式對(duì)象，有2種創(chuàng)建對(duì)象的方式：

2.1 方式1：使用關(guān)鍵字new創(chuàng)建

var patt = new RegExp(pattern,modifiers);

參數(shù)1：正則表達(dá)式的模式。字符串形式

參數(shù)2：模式修飾符。用于指定全局匹配、區(qū)分大小寫的匹配和多行匹配

<script type="text/javascript">
  /*
   創(chuàng)建了一個(gè)正則表達(dá)式
   參數(shù)1：模式是：girl，意思是說(shuō)可以匹配 "girl"這樣的字符串
   參數(shù)2：模式修飾符：gi g代表全局匹配 i代表不區(qū)分大小寫
  */
 var pa = new RegExp("girl", "gi");
  //測(cè)試參數(shù)中的字符串"你好我的girl" 是否與匹配模式匹配。
  var isExist = pa.test("你好我的girl"); // 在本例中，是匹配的，這個(gè)字符串包含girl，所以返回true
  alert(isExist); //true
</script>

2.2 方式2：使用正則表達(dá)式直接量

var pa = /pattern/modifiers;

兩個(gè)/中間的表示正則表達(dá)式的模式，最后一個(gè)/的后面是模式修飾符

例如：上面的例子可以這樣寫 var pa = /girl/gi;

注意：這個(gè)時(shí)候模式和模式修飾符都能再添加雙引號(hào)或單引號(hào)

<script type="text/javascript">
 var pa = /girl/gi;
 alert(pa.test("厲害了我的girl")); //true
</script>

三、正則表達(dá)式模式修飾符==(126)==

JavaScript中共有3種模式修飾符：g i u

1. g：表示全局。意思是說(shuō)會(huì)對(duì)一個(gè)字符串進(jìn)行多次匹配。如果不寫g則只匹配一次，一旦匹配成功，則不會(huì)再次匹配
2. i：表示忽略大小寫。意思是說(shuō)在匹配的時(shí)候不區(qū)分大小寫
3. u：表示可以多行匹配。

四、正則表達(dá)式方法詳解==(127)==

經(jīng)常用到的正則表達(dá)式方法有兩個(gè)test() 和 exec()

4.1 test()方法

test(字符串)

• 參數(shù)：要匹配的字符串
• 返回值：匹配成功返回true，失敗返回false

在只想知道目標(biāo)字符串與某個(gè)模式是否匹配，但不需要知道其文本內(nèi)容的情況下，使用這個(gè)方法非常方便。因此， test() 方法經(jīng)常被用在 if 語(yǔ)句中。

<script type="text/javascript">
 var pa = /girl/gi;
 if(pa.test("厲害了我的girl")){
  alert("這個(gè)女孩和你很配");
 }else {
  alert("你注定沒(méi)有女孩去匹配");
 }
</script>

4.2 exec()方法

exec(字符串)：該方法為專門為捕獲組而設(shè)計(jì)的

• 參數(shù)：要匹配的字符串
• 返回值：返回的是一個(gè)數(shù)組。如果不匹配則返回null
• 關(guān)于返回值數(shù)組的說(shuō)明：
• 它確實(shí)是Array的實(shí)例。
• 但是這個(gè)數(shù)組有兩個(gè)額外的屬性：index和input
• index：表示匹配的字符串在源字符串中的索引
• input：表示匹配的源字符串。
• 數(shù)組的第一項(xiàng)目是與整個(gè)模式匹配的字符串，其他項(xiàng)是與模式中捕獲組匹配的字符串
• 如果沒(méi)有捕獲組，則數(shù)組中只有第一項(xiàng)。關(guān)于捕獲組的概念以后再說(shuō)

<script type="text/javascript">
 var pa = /girl/gi;
 var testStr = "myGirl, yourgirl, hisgIrl";
 var girls = pa.exec(testStr); //捕獲
 alert(girls.length + ":" + (girls instanceof Array)); //正則表達(dá)式?jīng)]有捕獲組，所以數(shù)組長(zhǎng)度為1
 alert(girls[0]); //第一次捕獲的是 Girl
  //因?yàn)槲覀兪怯玫娜制ヅ?，所以此次匹配的時(shí)候從上次匹后的位置開始繼續(xù)匹配
 alert(pa.exec(testStr)[0]);  // girl
 alert(pa.exec(testStr)); // gIrl
 alert(pa.exec(testStr)); //繼續(xù)向后沒(méi)有匹配的字符串，所以返回null
  // 返回null，如果繼續(xù)再匹配，則會(huì)回到字符串的開始，重寫開始匹配。
 alert(pa.exec(testStr)); // Girl
  // ...開啟新一輪匹配
</script>

所以我們?nèi)绻胝业饺科ヅ涞淖址梢詴r(shí)候用循環(huán)，結(jié)束條件就是匹配結(jié)果為null

<script type="text/javascript">
 var pa = /girl/gi;
 var testStr = "myGirl, yourgirl, hisgIrl";
 var girls;
 while(girls = pa.exec(testStr)){ //如果等于null,會(huì)自動(dòng)轉(zhuǎn)成 false，結(jié)束。
  alert(girls);
 }
</script>

分組。在正則表達(dá)式中用()括起來(lái)任務(wù)是一組。組可以嵌套。

<script type="text/javascript">
  //()內(nèi)的內(nèi)容就是第1組(Girl)，其實(shí)我們完整真?zhèn)€表達(dá)式可以看出第0組 girl(Girl)
  // 將來(lái)對(duì)應(yīng)著匹配結(jié)果數(shù)組的下標(biāo)。 
 var pa = /girl(Girl)/gi; 
 var test = "girlGirl abdfjla Girlgirl fal girl";
 var girls;
 while(girls = pa.exec(test)){
  //匹配之后，數(shù)組的第0個(gè)元素對(duì)應(yīng)的這第0組的匹配結(jié)果，第1個(gè)元素對(duì)應(yīng)著第1組的匹配結(jié)果
  for (var i = 0; i < girls.length; i++) {
   console.log(girls[i]);
  }
  console.log("-------------");
 }
</script>
//最終運(yùn)行結(jié)果：
girlGirl
Girl
-------------
Girlgirl
girl
------------

五、正則表達(dá)式規(guī)則==(124)==

表達(dá)式規(guī)則

正則表達(dá)式元字符是包含特殊含義的字符。它們有一些特殊功能，可以控制匹配模式的

方式。反斜杠后的元字符將失去其特殊含義。

字符類：?jiǎn)蝹€(gè)字符和數(shù)字

[0-9A-Za-z] 
元字符/元符號(hào)                    匹配情況
.                         匹配除換行符外的任意字符
[a-z0-9]                     匹配括號(hào)中的字符集中的任意字符
[^a-z0-9]                     匹配任意不在括號(hào)中的字符集中的字符
\d ==[0-9]                    匹配數(shù)字
\D ==[^0-9]                        匹配非數(shù)字，同[^0-9]相同
\w     [0-9A-Za-z_]                    匹配字母和數(shù)字及_
\W                         匹配非(字母和數(shù)字及_)

字符類：空白字符
元字符/元符號(hào)                    匹配情況
\0                             匹配null 字符
\b                             匹配空格字符
\n                             匹配換行符
\r                             匹配回車字符
\t                             匹配制表符
\s                             匹配空白字符、空格、制表符和換行符
\S                             匹配非空白字符

字符類：錨字符

元字符/元符號(hào)                    匹配情況
^                             行首匹配
$                             行尾匹配

字符類：重復(fù)字符
元字符/元符號(hào)                                匹配情況
?  例如（x?）                            匹配0個(gè)或1 個(gè)x
*  例如（x*）                            匹配0個(gè)或任意多個(gè)x
+  例如（x+）                            匹配至少一個(gè)x
(xyz)+                                     匹配至少一個(gè)(xyz)
{m,n} 例如x{m,n}  n>=次數(shù)>=m            匹配最少m個(gè)、最多n個(gè)x
{n}                                        匹配前一項(xiàng)n次    
{n,}          匹配前一項(xiàng)n次，或者多次

六、常用正則表示==(128)==

1、檢查郵政編碼

var pattern = /[1-9][0-9]{5}/; //共6位數(shù)字，第一位不能為0
var str = '224000';
alert(pattern.test(str));

2、檢查文件壓縮包

var pattern = /[\w]+\.zip|rar|gz/; //\w 表示所有數(shù)字和字母加下劃線
var str = '123.zip'; //\.表示匹配.，后面是一個(gè)選擇
alert(pattern.test(str));

3、刪除多余空格

var pattern = /\s/g; //g 必須全局，才能全部匹配
var reg=new RegExp('\\s+','g');
var str = '111 222 333';
var result = str.replace(pattern,''); //把空格匹配成無(wú)空格
alert(result);

4、刪除空格

var pattern = /^\s+/; 
var str = ' goo gle ';
alert(str+" "+str.length);
var result = str.replace(pattern, '');
alert(result+" "+result.length);
pattern = /\s+$/; 
result = result.replace(pattern, '');
alert(result+" "+result.length);
pattern = /\s+/g; 
result = result.replace(pattern, '');
alert(result+" "+result.length);
5、簡(jiǎn)單的電子郵件驗(yàn)證
var pattern = /^([a-zA-Z0-9_\.\-]+)@([a-zA-Z0-9_\.\-]+)\.([a-zA-Z]{2,4})$/;
var str = 'yc60.com@gmail.com';
alert(pattern.test(str));
var pattern = /^([\w\.\-]+)@([\w\.\-]+)\.([\w]{2,4})$/;
var str = 'yc60.com@gmail.com';
alert(pattern.test(str));

七、支持正則表達(dá)式的字符串方法

<script type="text/javascript">
 var s = "Abc123aBc";
 alert(s.search(/abc/gi)); 
 alert(s.search(/abc/gi)); // 即使設(shè)置的全局模式，每次search也是從開始向后查找
 //match方法和正則表達(dá)式的exec()方法的作用是一樣的，但是match會(huì)一次性把所有的匹配放在一個(gè)數(shù)組中，全部返回
 alert(s.match(/abc/gi)); // Abc,aBc
 alert(s.replace(/[ab]/gi, "x"));   //把a(bǔ)或b替換成x
 var ss = s.split(/[0-9]+/gi); //用1個(gè)或多個(gè)數(shù)字切割。 Abc,aBc
 alert(ss);
</script>

以上所述是小編給大家介紹的JS基礎(chǔ)系列之正則表達(dá)式，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論