學(xué)習(xí)JavaScript正則表達(dá)式
JavaScript正則表達(dá)式學(xué)習(xí):
有個(gè)在線調(diào)試正則的工具。下面的所有示例代碼,都可以在codepen上查看到。
1.創(chuàng)建正則表達(dá)式
var re = /ab+c/; //方式一 正則表達(dá)式字面量
var re = new RegExp("ab+c"); //方式二 RegExp對(duì)象的構(gòu)造函
1)正則表達(dá)式字面量在腳本加載后編譯。若你的正則表達(dá)式是常量,使用這種方式可以獲得更好的性能。
2)使用構(gòu)造函數(shù),提供了對(duì)正則表達(dá)式運(yùn)行時(shí)的編譯。當(dāng)你知道正則表達(dá)式的模式會(huì)發(fā)生改變, 或者你事先并不了解它的模式或者是從其他地方(比如用戶的輸入),得到的代碼這時(shí)比較適合用構(gòu)造函數(shù)的方式。
2.正則表達(dá)式中的特殊字符
\ ^ $ * + ? . (x) (?:x) x(?=y) x(?!y) x|y {n}
{n,m} [xyz] [^xyz] [\b] \b \B \cX \d \D \f \n \r
\s \S \t \v \w \W \n \0 \xhh \uhhhh
3.正則表達(dá)式中的方法
有6個(gè),分別是exec、test、match、search、replace和split。
exec和test的語(yǔ)法都是regexObj調(diào)用,match、search、replace和split的語(yǔ)法都是string調(diào)用。
exec:
方法為指定的一段字符串執(zhí)行搜索匹配操作。它的返回值是一個(gè)數(shù)組或者 null。語(yǔ)法如下:regexObj.exec(str)
示例代碼:
var re = /quick\s(brown).+?(jumps)/ig;
var result = re.exec('The Quick Brown Fox Jumps Over The Lazy Dog');
返回結(jié)果:

test:
一個(gè)在字符串中測(cè)試是否匹配的RegExp方法,它返回true或false。語(yǔ)法如下:regexObj.exec(str)
match:
一個(gè)在字符串中執(zhí)行查找匹配的RegExp方法,它返回一個(gè)數(shù)組或者在未匹配到時(shí)返回null。
與exec略有不同,首先是調(diào)用方式,math是由字符串調(diào)用,而exec是由RegexObj調(diào)用。
其次,如果表達(dá)式中有“g”標(biāo)記,那么返回一個(gè)匹配的字符串?dāng)?shù)組,如果沒(méi)有就會(huì)和exec返回的一樣。下面這個(gè)demo就是有“g”。語(yǔ)法如下:str.match(regexp)
示例代碼:
var re = /quick\s(brown).+?(jumps)/ig;
var result = re.exec('The Quick Brown Fox Jumps Over The Lazy Dog');
返回結(jié)果:

search:
一個(gè)在字符串中測(cè)試匹配的String方法,它返回匹配到的位置索引,或者在失敗時(shí)返回-1。語(yǔ)法如下:str.search(regexp)
例如上面的示例代碼如果是調(diào)用search,返回?cái)?shù)據(jù)就是4。
replace:
一個(gè)在字符串中執(zhí)行查找匹配的String方法,并且使用替換字符串替換掉匹配到的子字符串。語(yǔ)法如下:str.replace(regexp|substr,newSubStr|function[,flags])
var re = /(\w+)\s(\w+)/; var str = "John Smith"; var result = str.replace(re, "$2, $1");
返回的結(jié)果將是:“Smith, John”
split:
一個(gè)使用正則表達(dá)式或者一個(gè)固定字符串分隔一個(gè)字符串,并將分隔后的子字符串存儲(chǔ)到數(shù)組中的String方法。語(yǔ)法如下:str.split([separator[,limit]])
limit就是限制分割后的數(shù)組中的個(gè)數(shù)。下面的是一個(gè)demo,但是表達(dá)式中有一個(gè)是加了括號(hào),一個(gè)沒(méi)加,返回的數(shù)據(jù)是不一樣的。
示例代碼:
var re = /(\d)/; var result = 'Hello 1 word. Sentence number 2.'.split(re); console.log(result); var re = /\d/; var result = 'Hello 1 word. Sentence number 2.'.split(re); console.log(result);
返回結(jié)果:

4.正則表達(dá)式執(zhí)行返回信息
var myRe = new RegExp("d(b+)d", "g");
var myArray = myRe.exec("cdbbdbsbz");
console.log(myArray);
代碼中返回的結(jié)果如下:


5.正則表達(dá)式標(biāo)志

var re = /\w+\s/g;//表達(dá)式一
var re = new RegExp("\\w+\\s", "g");//表達(dá)式二
var str = "fee fi fo fum";
var myArray = str.match(re);
console.log(myArray);
表達(dá)式一和表達(dá)式二返回的結(jié)果是一樣的。都是下面的那個(gè)數(shù)組:

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
Javascript類型系統(tǒng)之undefined和null淺析
這篇文章主要介紹了Javascript類型系統(tǒng)之undefined和null的知識(shí),通過(guò)本文還簡(jiǎn)單給大家介紹了javascript中null和undefined的區(qū)別的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07
JavaScript 操作table,可以新增行和列并且隔一行換背景色代碼分享
這篇文章介紹了JavaScript操作table,可以新增行和列并且隔一行換背景色代碼,有需要的朋友可以參考一下2013-07-07
javascript 如何生成不重復(fù)的隨機(jī)數(shù)
javascript 如何生成不重復(fù)的隨機(jī)數(shù)...2007-11-11
JavaScript模塊管理的簡(jiǎn)單實(shí)現(xiàn)方式詳解
這篇文章主要介紹了JavaScript模塊管理的簡(jiǎn)單實(shí)現(xiàn)方式,它方便組織你的代碼,提高項(xiàng)目的可維護(hù)性。一個(gè)項(xiàng)目的可維護(hù)性高不高,也體現(xiàn)一個(gè)程序員的水平,在如今越來(lái)越復(fù)雜的前端項(xiàng)目,這一點(diǎn)尤為重要。,需要的朋友可以參考下2019-06-06
基于javascript的在火狐里面強(qiáng)制換行字符
火狐也不知道為什么,自己功能上,樣式上面,都無(wú)法讓其強(qiáng)制換行,這里用JS來(lái)實(shí)現(xiàn)火狐里面強(qiáng)制換行的方法。2010-06-06
webpack4實(shí)現(xiàn)不同的導(dǎo)出類型
這篇文章主要介紹了webpack4實(shí)現(xiàn)不同的導(dǎo)出類型,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
使用js獲取地址欄參數(shù)的方法推薦(超級(jí)簡(jiǎn)單)
下面小編就為大家?guī)?lái)一篇使用js獲取地址欄參數(shù)的方法推薦(超級(jí)簡(jiǎn)單)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06

