詳解JavaScript正則表達(dá)式之RegExp對(duì)象
一、RegExp對(duì)象概述
RegExp對(duì)象表示正則表達(dá)式,RegExp是正則表達(dá)式的縮寫,它是對(duì)字符串執(zhí)行模式匹配的強(qiáng)大工具。RegExp對(duì)象用于規(guī)定在文本中檢索的內(nèi)容。當(dāng)您檢索某個(gè)文本時(shí),可以使用一種模式來描述要檢索的內(nèi)容。RegExp就是這種模式。簡(jiǎn)單的模式可以是一個(gè)單獨(dú)的字符;更復(fù)雜的模式包括了更多的字符,并可用于解析、格式檢查、替換等。
正則表達(dá)式可以規(guī)定字符串中的檢索位置,以及要檢索的字符類型等。
二、創(chuàng)建RexExp對(duì)象
創(chuàng)建正則表達(dá)式和創(chuàng)建字符串類似,創(chuàng)建正則表達(dá)式有兩種方式:
(1)使用字面量創(chuàng)建RegExp對(duì)象的語法:
/pattern/attributes;
(2)使用new關(guān)鍵詞創(chuàng)建RegExp對(duì)象的語法:
new RegExp(pattern, attributes);
參數(shù)釋義:
1參數(shù)pattern是一個(gè)字符串,指定了正則表達(dá)式的模式或其他正則表達(dá)式。
2參數(shù)attributes是一個(gè)可選的模式字符串,包含屬性 "g"、"i" 和 "m",分別用于指定全局匹配、不區(qū)分大小寫的匹配和多行匹配。
RegExp對(duì)象用于存儲(chǔ)檢索模式。通過new關(guān)鍵詞來創(chuàng)建RegExp對(duì)象。以下代創(chuàng)建了名為pattern的 RegExp對(duì)象,其模式是 "e",當(dāng)使用該RegExp對(duì)象在一個(gè)字符串中檢索時(shí),將尋找的是字符 "e"。
<span style="font-size:18px;">var pattern=new RegExp("e"); var pattern=new RegExp("e",gi);//設(shè)置全局搜素不區(qū)分大小寫</span>
上述的也可以改成字面量的方式來創(chuàng)建,這種方式也是我們經(jīng)常使用的方法:
<span style="font-size:18px;">var pattern=/e/; var pattern=/e/gi;</span>
三、RegExp對(duì)象詳細(xì)解析
(1)RegExp對(duì)象屬性
這些基本我們?cè)谏鲜龅睦佣家呀?jīng)見過,但我們還是舉幾個(gè)簡(jiǎn)單的例子來看一下:
<span style="font-size:18px;">var pattern=/e/gim; document.write(pattern.global+" ");//輸出:true。說明設(shè)置了全局模式 document.write(pattern.ignoreCase+" ");//輸出:true document.write(pattern.multiline+" ");//輸出:true document.write(pattern.source+" ");//輸出:e</span>
(2)RegExp對(duì)象方法
RegExp對(duì)象有3個(gè)方法:test()、exec()以及compile()。
1)test()方法檢索字符串中的指定值,返回值是true或false。
<span style="font-size:18px;">var pattern=/e/; var str="The best things in life are free"; document.write(pattern.test(str));//輸出:true</span>
2)exec()方法檢索字符串中的指定值,返回值是被找到的值;如果沒有發(fā)現(xiàn)匹配,則返回null。
實(shí)例:
<span style="font-size:18px;">var pattern=/e/; var str="The best things in life are free"; document.write(pattern.exec(str));//輸出:e</span>
實(shí)例:
向RegExp對(duì)象添加第二個(gè)參數(shù),以設(shè)定檢索。如果需要找到所有某個(gè)字符的所有存在,則可以使用 "g" 參數(shù)。
在使用 "g" 參數(shù)時(shí),exec() 的工作原理如下:
- 1找到第一個(gè) "e",并存儲(chǔ)其位置。
- 2如果再次運(yùn)行exec(),則從存儲(chǔ)的位置開始檢索,并找到下一個(gè) "e",并存儲(chǔ)其位置。
<span style="font-size:18px;">var pattern=/e/g; var str="The best things in life are free"; do { var result=pattern.exec(str); document.write(result+" "); } while(result!=null)</span>
輸出的結(jié)果為:e e e e e e null
3)compile()方法用于改變正則表達(dá)式,compile()既可以改變檢索模式,也可以添加或刪除第二個(gè)參數(shù)。
<span style="font-size:18px;">var pattern=/e/; var str="The best things in life are free"; document.write(pattern.test(str));//輸出:true pattern.compile("d"); document.write(pattern.test(str));//輸出:false</span>
(3)支持正則表達(dá)式的String對(duì)象的方法
由于正則表達(dá)式和String對(duì)象有著一定的聯(lián)系,因此String對(duì)象的一些方法可用于正則表達(dá)式:
<span style="font-size:18px;">var pattern=/e/g;//開啟全局模式 var str="The best things in life are free"; document.write(str.match(pattren)+"<br/>");//以數(shù)組的形式輸出:e,e,e,e,e,e document.write(str.search(pattren)+"<br/>");//輸出:2(返回第一個(gè)匹配到的位置) document.write(str.replace(pattren,"a")+"<br/>");//輸出:Tha bast things in lifa ara fraa var pattern1=/\s/g;//\s表示空格字符 document.write(str.split(pattren1));//輸出:The,best,things,in,life,are,free</span>
(4)元字符是擁有特殊含義的字符:
由于這些使用廣泛,我們只是舉幾個(gè)例子:
<span style="font-size:18px;">var pattern=/b.ue/;//點(diǎn)符號(hào)表示匹配除了換行符以外的任意字符。 var str="blue"; document.write(pattern.test(str));//輸出:true</span>
(5)方括號(hào)用于查找某個(gè)范圍的字符:
<span style="font-size:18px;">var pattern=/[a-z]oogle/;//[a-z]表示26個(gè)小寫字母,任意一個(gè)都可以匹配 var str="woogle"; document.write(pattren.test(str));//輸出:true</span>
(6)量詞
<span style="font-size:18px;">var pattern=/go+gle/;//o*表示匹配至少一個(gè)0 var str="google"; document.write(pattren.test(str));//輸出:true</span>
四、常用的正則表達(dá)式
主要的是看變量patttern模式字符串表示的正則表達(dá)式。其余的是一些JS的基本的東西,可以忽略。
(1)檢查郵政編碼
<span style="font-size:18px;">var pattern=/^[0-9]{6}$/;//必須是6位,并且都是是數(shù)字 var str=prompt("請(qǐng)輸入郵政編碼:"); if(pattern.test(str)) { alert("您輸入的是正確的郵政標(biāo)號(hào)!"); } else { alert("您輸入的是錯(cuò)誤的郵政標(biāo)號(hào)!"); }</span>
輸入一些數(shù)據(jù)運(yùn)行的結(jié)果為:
輸入:056500
輸入:123
(2)簡(jiǎn)單電子郵件地址驗(yàn)證
<span style="font-size:18px;">var pattern=/^([\w\.\-]+)@([\w\-]+)\.([a-zA-Z]{2,4})$/; var str=prompt("請(qǐng)輸入郵箱名稱:"); if(pattern.test(str)) { alert("您輸入的是正確的郵箱名稱!"); } else { alert("您輸入的是錯(cuò)誤的郵箱名稱!"); }</span>
(3)檢查上傳文件壓縮包
<span style="font-size:18px;">var pattern=/[\w]+\.zip|rar|gz/;//\w表示所有數(shù)字和字母以及下劃線 var str=prompt("請(qǐng)輸入壓縮包的名稱:"); if(pattern.test(str)) { alert("您輸入的是正確的壓縮包名稱!"); } else { alert("您輸入的是錯(cuò)誤的壓縮包名稱!"); }</span>
(4)檢查手機(jī)號(hào)
<span style="font-size:18px;">var pattern=/^[1][0-9]{10}$/; var str=prompt("請(qǐng)輸入手機(jī)號(hào)碼:"); if(pattern.test(str)) { alert("您輸入的是正確的手機(jī)號(hào)碼!"); } else { alert("您輸入的是錯(cuò)誤的手機(jī)號(hào)碼!"); }</span>
下面三個(gè)輸出的結(jié)果就不再一一展示,只要寫好模式正則表達(dá)式就可以檢驗(yàn)輸入的數(shù)據(jù)是否正確。由于剛剛接觸正則表達(dá)式,可能有不正確的地方,自己會(huì)進(jìn)行完善和修正,希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
JS高級(jí)運(yùn)動(dòng)實(shí)例分析
這篇文章主要介紹了JS高級(jí)運(yùn)動(dòng),結(jié)合實(shí)例形式分析了javascript運(yùn)動(dòng)框架原理、實(shí)現(xiàn)與應(yīng)用技巧,需要的朋友可以參考下2016-12-12JS實(shí)現(xiàn)的簡(jiǎn)單鼠標(biāo)跟隨DiV層效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單鼠標(biāo)跟隨DiV層效果,涉及JavaScript基于時(shí)間函數(shù)動(dòng)態(tài)操作頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10javascript使用Promise對(duì)象實(shí)現(xiàn)異步編程
這篇文章主要介紹了javascript使用Promise對(duì)象實(shí)現(xiàn)異步編程的相關(guān)資料,需要的朋友可以參考下2016-03-03JS可斷點(diǎn)續(xù)傳文件上傳實(shí)現(xiàn)代碼解析
這篇文章主要介紹了JS可斷點(diǎn)續(xù)傳文件上傳實(shí)現(xiàn)代碼解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07js+canvas實(shí)現(xiàn)動(dòng)態(tài)吃豆人效果
本文主要介紹了js+canvas實(shí)現(xiàn)動(dòng)態(tài)吃豆人效果的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03jquery根據(jù)錨點(diǎn)offset值實(shí)現(xiàn)動(dòng)畫切換
點(diǎn)擊后僵硬的切換是不是很不爽,下面為大家介紹的是根據(jù)錨點(diǎn)offset值來實(shí)現(xiàn)動(dòng)畫切換,喜歡的朋友不要錯(cuò)過2014-09-09