JS基礎(chǔ)----正則表達式

正則表達式是一個很牛逼的東東,今天在這里只是簡單的給剛剛接觸JS的人普及一下,里面若有爭議的地方歡迎大家留言!


1.1 什么是正則表達式

? 正則表達式(regular expression)是一個描述字符模式的對象,ECMAScript的RegExp 類表示正則表達式搭盾,而String和RegExp都定義了使用正則表達式進行強大的模式匹配和文本檢索與替換的函數(shù)。

? 正則表達式用于對字符串模式匹配及檢索替換婉支,是對字符串執(zhí)行模式匹配的強大工具鸯隅。

1.2 正則表達式的作用

? 正則表達式主要用來驗證客戶端的輸入數(shù)據(jù)。

? 用戶填寫完表單單擊按鈕之后向挖,表單就會被發(fā)送到服務(wù)器蝌以,在服務(wù)器端通常會用PHP、ASP.NET何之、JSP等服務(wù)器腳本對其進行進一步處理跟畅。因為客戶端驗證,可以節(jié)約大量的服務(wù)器端的系統(tǒng)資源帝美,并且提供更好的用戶體驗碍彭。

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

要使用正則表達式悼潭,必須先創(chuàng)建正則表達式對象,有2種創(chuàng)建對象的方式:

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

var patt = new RegExp(pattern,modifiers);

參數(shù)1:正則表達式的模式舞箍。字符串形式

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

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

2.2 方式2:使用正則表達式直接量

var pa = /pattern/modifiers;

兩個/中間的表示正則表達式的模式,最后一個/的后面是模式修飾符

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

注意:這個時候模式和模式修飾符都能再添加雙引號或單引號

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

三窄绒、正則表達式模式修飾符==(126)==

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

  1. g:表示全局贝次。意思是說會對一個字符串進行多次匹配。如果不寫g則只匹配一次彰导,一旦匹配成功蛔翅,則不會再次匹配
  2. i:表示忽略大小寫。意思是說在匹配的時候不區(qū)分大小寫
  3. u:表示可以多行匹配位谋。

四山析、正則表達式方法詳解==(127)==

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

4.1 test()方法

test(字符串)

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

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

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

4.2 exec()方法

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

  • 參數(shù):要匹配的字符串
  • 返回值:返回的是一個數(shù)組鸟款。如果不匹配則返回null

關(guān)于返回值數(shù)組的說明:

  1. 它確實是Array的實例。
  2. 但是這個數(shù)組有兩個額外的屬性:index和input
  • index:表示匹配的字符串在源字符串中的索引
  • input:表示匹配的源字符串茂卦。
  1. 數(shù)組的第一項目是與整個模式匹配的字符串何什,其他項是與模式中捕獲組匹配的字符串
  2. 如果沒有捕獲組,則數(shù)組中只有第一項等龙。關(guān)于捕獲組的概念以后再說
<script type="text/javascript">
    var pa = /girl/gi;
    var testStr = "myGirl, yourgirl, hisgIrl";
    var girls = pa.exec(testStr);  //捕獲
    alert(girls.length + ":" + (girls instanceof Array));   //正則表達式?jīng)]有捕獲組处渣,所以數(shù)組長度為1
    alert(girls[0]);    //第一次捕獲的是 Girl
    //因為我們是用的全局匹配,所以此次匹配的時候從上次匹后的位置開始繼續(xù)匹配
    alert(pa.exec(testStr)[0]);     // girl
    alert(pa.exec(testStr));    // gIrl
    alert(pa.exec(testStr)); //繼續(xù)向后沒有匹配的字符串蛛砰,所以返回null
    // 返回null罐栈,如果繼續(xù)再匹配,則會回到字符串的開始泥畅,重寫開始匹配荠诬。
    alert(pa.exec(testStr));    // Girl
    // ...開啟新一輪匹配
</script>

所以我們?nèi)绻胝业饺科ヅ涞淖址梢詴r候用循環(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,會自動轉(zhuǎn)成 false位仁,結(jié)束柑贞。
        alert(girls);
    }
</script>

分組。在正則表達式中用()括起來任務(wù)是一組聂抢。組可以嵌套钧嘶。

<script type="text/javascript">
    //()內(nèi)的內(nèi)容就是第1組(Girl),其實我們完整真?zhèn)€表達式可以看出第0組 girl(Girl)
    // 將來對應(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個元素對應(yīng)的這第0組的匹配結(jié)果,第1個元素對應(yīng)著第1組的匹配結(jié)果
        for (var i = 0; i < girls.length; i++) {
            console.log(girls[i]);
        }
        console.log("-------------");
    }
</script>
//最終運行結(jié)果:
girlGirl
Girl
-------------
Girlgirl
girl
------------

五空盼、正則表達式規(guī)則==(124)==

表達式規(guī)則

正則表達式元字符是包含特殊含義的字符书幕。它們有一些特殊功能,可以控制匹配模式的
方式揽趾。反斜杠后的元字符將失去其特殊含義台汇。
字符類:單個字符和數(shù)字
[0-9A-Za-z]  
元字符/元符號                 匹配情況
.                       匹配除換行符外的任意字符
[a-z0-9]                    匹配括號中的字符集中的任意字符
[^a-z0-9]                   匹配任意不在括號中的字符集中的字符
\d ==[0-9]                  匹配數(shù)字
\D ==[^0-9]                     匹配非數(shù)字,同[^0-9]相同
\w  [0-9A-Za-z_]                    匹配字母和數(shù)字及_
\W                      匹配非(字母和數(shù)字及_)

字符類:空白字符
元字符/元符號                 匹配情況
\0                          匹配null 字符
\b                          匹配空格字符 
\n                          匹配換行符
\r                          匹配回車字符
\t                          匹配制表符
\s                          匹配空白字符但骨、空格励七、制表符和換行符
\S                          匹配非空白字符

字符類:錨字符

元字符/元符號                 匹配情況
^                           行首匹配
$                           行尾匹配

字符類:重復(fù)字符
元字符/元符號                             匹配情況
?  例如(x?)                           匹配0個或1 個x
*  例如(x*)                           匹配0個或任意多個x
+  例如(x+)                           匹配至少一個x
(xyz)+                                  匹配至少一個(xyz)
{m,n} 例如x{m,n}  n>=次數(shù)>=m            匹配最少m個、最多n個x
{n}                                     匹配前一項n次     
{n,}                                    匹配前一項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'; //\.表示匹配.瞳步,后面是一個選擇
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,''); //把空格匹配成無空格
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、簡單的電子郵件驗證
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));

七劣坊、支持正則表達式的字符串方法

方法 描述
search 檢索與正則表達式相匹配的第一個匹配項的索引嘀倒。
match 找到一個或多個正則表達式的匹配。
replace 替換與正則表達式匹配的子串局冰。
split 把字符串分割為字符串?dāng)?shù)組测蘑。
<script type="text/javascript">
    var s = "Abc123aBc";
    alert(s.search(/abc/gi)); 
    alert(s.search(/abc/gi)); // 即使設(shè)置的全局模式,每次search也是從開始向后查找

    //match方法和正則表達式的exec()方法的作用是一樣的康二,但是match會一次性把所有的匹配放在一個數(shù)組中碳胳,全部返回
    alert(s.match(/abc/gi));    // Abc,aBc
    
    alert(s.replace(/[ab]/gi, "x"));        //把a或b替換成x
    var ss = s.split(/[0-9]+/gi);   //用1個或多個數(shù)字切割。   Abc,aBc
    alert(ss);
</script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末沫勿,一起剝皮案震驚了整個濱河市挨约,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌产雹,老刑警劉巖诫惭,帶你破解...
    沈念sama閱讀 216,591評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異洽故,居然都是意外死亡贝攒,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評論 3 392
  • 文/潘曉璐 我一進店門时甚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人哈踱,你說我怎么就攤上這事荒适。” “怎么了开镣?”我有些...
    開封第一講書人閱讀 162,823評論 0 353
  • 文/不壞的土叔 我叫張陵刀诬,是天一觀的道長。 經(jīng)常有香客問我邪财,道長陕壹,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,204評論 1 292
  • 正文 為了忘掉前任树埠,我火速辦了婚禮糠馆,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘怎憋。我一直安慰自己又碌,他們只是感情好九昧,可當(dāng)我...
    茶點故事閱讀 67,228評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著毕匀,像睡著了一般铸鹰。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上皂岔,一...
    開封第一講書人閱讀 51,190評論 1 299
  • 那天蹋笼,我揣著相機與錄音,去河邊找鬼躁垛。 笑死姓建,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的缤苫。 我是一名探鬼主播速兔,決...
    沈念sama閱讀 40,078評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼活玲!你這毒婦竟也來了涣狗?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,923評論 0 274
  • 序言:老撾萬榮一對情侶失蹤舒憾,失蹤者是張志新(化名)和其女友劉穎镀钓,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體镀迂,經(jīng)...
    沈念sama閱讀 45,334評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡丁溅,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,550評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了探遵。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片窟赏。...
    茶點故事閱讀 39,727評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖箱季,靈堂內(nèi)的尸體忽然破棺而出涯穷,到底是詐尸還是另有隱情,我是刑警寧澤藏雏,帶...
    沈念sama閱讀 35,428評論 5 343
  • 正文 年R本政府宣布拷况,位于F島的核電站,受9級特大地震影響掘殴,放射性物質(zhì)發(fā)生泄漏赚瘦。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,022評論 3 326
  • 文/蒙蒙 一奏寨、第九天 我趴在偏房一處隱蔽的房頂上張望起意。 院中可真熱鬧,春花似錦服爷、人聲如沸杜恰。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,672評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽心褐。三九已至舔涎,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間逗爹,已是汗流浹背亡嫌。 一陣腳步聲響...
    開封第一講書人閱讀 32,826評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留掘而,地道東北人挟冠。 一個月前我還...
    沈念sama閱讀 47,734評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像袍睡,于是被迫代替她去往敵國和親知染。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,619評論 2 354

推薦閱讀更多精彩內(nèi)容