javascript正則表達式知識點全面梳理

這裏寫圖片描述

一、使用方式

1、字面量模式

var reg = /is/g
全局匹配'is'

2、構造函數RegExp

var reg = new RegExp('is','g');

二者區別:

正則表達式字面量始終共享同一個RegExp實例,而使用RegExp每次創建一個新的實例,如下面的代碼:

var re=null;

for(var i =0;i<4;i++){
    re = /cat/g;
    re.test('catabcdefg');
}
//true
//false
//true
//false
for(var i =0;i<4;i++){
    re = new RegExp('is','g');
    re.test('catabcdefg');
}
//true
//true
//true
//true

在第一個循環中,第一個調用test,查找到’cat’,下一次的匹配索引爲上一次匹配的末尾,所有找不到,由於測試到了字符串的末尾,第三次調用test從頭開始。

在第二個循環中,每次迭代都是重新創建了新的RegExp實例,因此每次都從頭開始匹配。

二、RegExp實例屬性

  • global – g
  • ignoreCase – i
  • lastIndex 搜索下一個匹配項的字符位置
  • multiline – m
  • source 正則表達式的字面量形式的字符串

三、元字符

以下爲元字符:
* + ? $ ^ . | \ ( ) { } [ ]
  • \t 水平製表符
  • \v 垂直製表符
  • \n 換行
  • \r 回車
  • \o 空字符
  • \f 換頁符
  • \cX ctrl+X

四、字符類

使用[ ]構建一個類,匹配符合類特性的對象

如:[abc]把abc歸爲一類,匹配其中之一

'a1b2c3'.replace(/[abc]/g,'x');
//x1x2x3

五、範圍類

在[ ]中使用’-‘創建範圍類,如:

[a-z] 表示a~z小寫的26個字母
[a-zA-Z] 表示大小寫所有字母
[0-9] 表示0到9的10個數字

六、js預定義類及邊界

1、預定義類

名稱 解釋 說明
. [^\r\n] 除換行回車外的所有字符
\d [0-9] 數字字符
\D [^0-9] 非數字字符
\s 空白符
\S 非空白符
\w [a-zA-Z_0-9] 單詞字符,字母數字下劃線
\W 非單詞字符

2、邊界

  • ^ 以’xxx’開始 使用時放在’xxx’前
  • $ 以’xxx’結束 使用時放在’xxx’後
  • \b 字符邊界
  • \B 非字符邊界

七、量詞

  • ‘?’ 0或1次
  • ‘+’ 1或多次
  • ‘*’ 任意次
  • {n} n次
  • {n,m} n到m次
  • {n,} >=n次

八、貪婪模式與非貪婪模式

貪婪模式:儘可能多的匹配

非貪婪模式:儘可能少的匹配

'12345678'.replace(/\d{3,6}/g,'x')
//貪婪模式
//數字重複6次算作一次替換
//x78
'12345678'.replace(/\d{3,6}?/g,'x')
//非貪婪模式‘{3,6}?‘比貪婪模式多了一個'?'
//數字重複3次算作一次替換
//xx78

九、分組

使用()進行分組,如(abc){3}是對圓括號內元素重複三次。使用分組可以實現反向引用的效果,如下:

'2015-10-20'.replace(/(\d{4})-(\d{2})-(\d{2})/,'$2/$3/$1');
//   10/20/2015

忽略某一個分組:(?abc)

十、前瞻

js正則表達式支持前瞻不支持後顧,所謂前是指向着文本尾部方向,前瞻分爲正向前瞻和負向前瞻

1、正向前瞻 exp(?=assert)

'a2*34vv'.replace(/\w(?=\d)/g,'x');
//表達式的含義:若一個單詞字符後緊跟一個數字,則替換該單詞字符
//x2*x4vv

上面的例子是在查找單詞字符後緊跟數字的匹配項。

負向前瞻

'a2*34vv'.replace(/\w(?!\d)/g,'x');
//ax*3xxx

上面的例子是匹配單詞字符後不是數字的字符。

十一、js對象方法

1、test() 根據查詢匹配返回bool值

var re=null;

for(var i =0;i<4;i++){
    re = /cat/g;
    re.test('catabcdefg');
}
//true
//false
//true
//false

2、exec()

對字符串進行匹配,並更新屬性,沒有匹配到返回null,否則返回包含第一個匹配項的詳細信息的數組,注意:每次只返回一個匹配項信息。詳細信息包括index和input。

  • index是匹配項在字符串中的位置

  • input表示正則表達式字符串。

var msg = 'mom and dad and baby';
var pattern = /mom( and dad ( and baby)?)?/gi;

var matches = pattern.exec(msg);
alert(matches.index); //0
alert(matches.input); //'mom and dad and baby'
alert(matches[0]);    //'mom and dad and baby'
alert(matches[1]);    //'and dad and baby'
alert(matches[2]);    //'and baby'

雖然exec每次只返回一個匹配項,但是有兩種模式的區別
- 非全局模式

多次調用,始終返回第一個匹配項信息
  • 全局模式

    多次調用,繼續查找新的匹配項

十二、字符串對象方法

1、search()

  • 返回查找結果的index,沒有則返回-1
  • 不執行全局,忽略g,總是從開頭檢索

2、match()

全局情況只返回匹配信息組成的數組,沒有index、input信息

3、splite()

可使用正則表達式進行字符串拆分

'a1b2c3d4'.splite(/\d/g);
//['a','b','c','d']

replace()

替換,這個方法在前面的實例中已經介紹過了

十三、推薦工具

在這裏推薦兩個網站工具,可以很方便的進行正則表達式的測試和結果展現

1、正則測試工具

2、js測試工具

這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章