JS正則表達式教程

Javascript標準參考教程:
http://javascript.ruanyifeng.com/stdlib/regexp.html#toc1

在所有編程語言中,正則表達式都是非常強大使用的存在,可以驗證、可以提取、可以過濾、可以替換做各種字符串的操作。

一、新建正則表達式實例

正則表達式新建有兩種方法:

var regex=/xyz/i;           //字面量方式定義
var regex=new RegExp('xyz','i');        //RegExp方法構造

兩種寫法是等價的,區別是,前者定義時就創建一個xyz的正則表達式對象,后者是運行時創建,所以前者的效率較高。 上面兩種定義方法中,i是一個修飾符參數,后面具體講下。

二、實例屬性

RegExp.prototype.ignoreCase:返回一個布爾值,表示是否設置了i修飾符。
RegExp.prototype.global:返回一個布爾值,表示是否設置了g修飾符。
RegExp.prototype.multiline:返回一個布爾值,表示是否設置了m修飾符

三、正則表達式實例方法

1、text()

方法描述:返回一個布爾值,表示當前模式是否能匹配參數字符串。

/xyz/.test('this is xyz');  //true

驗證參數字符串中是否含有xyz字符串,如果含有,則返回true。
如果正則表達式中含有g修飾符,則每一次test方法都從上一次結束的位置開水向后匹配。

var regex=/x/g;
var str='_x_x';
r.lastIndex //0,默認都是從0開始檢測
r.test(s)   /true,檢測出位置1上有結果,此時lastIndex=1+1=2

r.lastIndex // 2 
r.test(s) // true,檢測出位置3上有結果,此時lastIndex=3+1=4

r.lastIndex // 4
r.test(s) // false,位置4上根本沒有值,所以返回false

注意:new RegExp('').test("ddasda")
空正則表達式實例匹配任何字符串。

2、exec()

方法描述:用來返回匹配結果。如果發現匹配,就返回一個數組,成員是匹配成功的子字符串,否則返回null。

var str = '_xx_x_xx';
var regex1 = /xx/;
var regex2 = /xx/g;
var regex3 = /y/;
regex1.exec(str) // ["xx"]
regex2.exec(str) // ["xx"] 這里和match不同,match會返回匹配的所有字符串,形成一個數組
regex3.exec(str) //null

如果表達式中含有"()"組匹配,則數組中返回多個成員,第一個是整個匹配成功的結果,第二個成員匹配第一個圓括號中字符串、第三個成員匹配第二個圓括號中字符串、以此類推。

var s = '_x_x';
var r = /_(x)/;

r.exec(s) // ["_x", "x"]

exec方法的返回數組還包含以下兩個屬性:
input:整個原字符串。
index:整個模式匹配成功的開始位置(從0開始計數)。
上面代碼返回的完整的代碼是:


image.png

利用g修飾符允許多次匹配的特點,可以用一個循環完成全部匹配。

var reg = /a/g;
var str = 'abc_abc_abc'

while(true) {
  var match = reg.exec(str);
  if (!match) break;
  console.log('#' + match.index + ':' + match[0]);
}
// #0:a
// #4:a
// #8:a

上面代碼中,只要exec方法不返回null,就會一直循環下去,每次輸出匹配的位置和匹配的文本。這個方法可能靈活的對每一次匹配做操作,功能十分強大。

正則實例對象的lastIndex屬性不僅可讀,還可寫。設置了g修飾符的時候,只要手動設置了lastIndex的值,就會從指定位置開始匹配。

四、字符串實例方法

1、match()方法

方法描述:返回一個數組,成員是所有匹配的子字符串。
實戰演練(http://www.czsz.exx.cn/),目標返回導航上所有鏈接的id:

var r=$(".header .nav ul li a").map(function(i,e){
    var item=$(e).attr("href");
    var regex=new RegExp(/^\/html\/node(\d+)\.html$/);
    if(regex.test(item)){
        var h=item.match(regex);
        return h[1];    //h[0]:是匹配的完整字符串,h[1]獲取第一個括號中字符串。
    }
}).get().join(",");
//r等于:"45782,45786,45789,45793,45798,45803,45809,45810,45816,46443"

使用(...)組匹配時,不宜同時使用g修飾符,否則match方法不會捕獲分組的內容

2、search()

方法描述:返回第一個滿足條件的匹配結果在整個字符串中的位置。如果沒有任何匹配,則返回-1。

var str="h,d,c,e,d,g,a,e,s,x,s,f,e,s";
str.search(/,e,/);
//返回:5

3、replace()

方法描述:可以替換匹配的值。它接受兩個參數,第一個是正則表達式,表示搜索模式,第二個是替換的內容。

//不加g則替換第一個匹配到的值,加了g則全文搜索,替換所有匹配到的字符串
'aaa'.replace('a', 'b') // "baa"
'aaa'.replace(/a/, 'b') // "baa"
'aaa'.replace(/a/g, 'b') // "bbb"
//替換字符串收尾的空格
var str = '  #id div.class  ';
str.replace(/^\s+|\s+$/g, '')
// "#id div.class"

replace方法的第二個參數可以使用美元符號,用來指代所替換的內容。&:匹配的子字符串。
`:匹配結果前面的文本。’:匹配結果后面的文本。
n:匹配成功的第n組內容,n是從1開始的自然數。 $$:指代美元符號

'hello world'.replace(/(\w+)\s(\w+)/, '$2 $1')
// "world hello"
'abc'.replace('b', '[$`-$&-$\']')
// "a[a-b-c]c"

上面代碼中,第一個例子是將匹配的組互換位置,第二個例子是改寫匹配的值。

'3 and 5'.replace(/[0-9]+/g, function (match) {
  return 2 * match;
})

replace方法的第二個參數還可以是一個函數,將每一個匹配內容替換為函數返回值。

五、匹配規則

書簽:http://javascript.ruanyifeng.com/stdlib/regexp.html#toc10

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,048評論 6 542
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,414評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,169評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,722評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,465評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,823評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,813評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,000評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,554評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,295評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,513評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,035評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,722評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,125評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,430評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,237評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,482評論 2 379

推薦閱讀更多精彩內容