Quick reference

regex.jpg

創(chuàng)建正則對象

兩種創(chuàng)建方法：

1. 使用RegExp 構(gòu)造函數(shù)

   var re1 = new RegExp("abc");
   var re2 = new RegExp("abc",'i'); //大小寫不敏感
   

   第二個參數(shù)為修飾符，可以指定匹配是否為全局匹配，是否為大小寫敏感等。

2. 直接將表達式包括在正斜杠里面

var re2 = /abc/i;
var re3 = /[\d.+]/;

> 特殊字符當(dāng)做普通字符用，比如問號和加號，需用 \ 轉(zhuǎn)義；
> 方括號里面的特殊字符如 `.` 和 `+` 沒有特殊含義，當(dāng)作普通字符用。

實際應(yīng)用中，基本上都采用第二種的寫法，更加便捷。

正則對象的屬性

與表達式相關(guān)的屬性：

• flags：返回一個字符串，表示使用到的修飾符，按字母順序排列。
• global：返回一個布爾值，表示是否設(shè)置了g修飾符，該屬性只讀。
• ignoreCase：返回一個布爾值，表示是否設(shè)置了i修飾符，該屬性只讀。
• multiline：返回一個布爾值，表示是否設(shè)置了m修飾符，該屬性只讀。
• source：返回正則表達式的字符串形式（不包括反斜杠），該屬性只讀。

/foo/ig.flags;   // "gi"
/bar/myu.flags;  // "muy"
/foo/ig.global;  // true
/foo/ig.ignoreCase;  // true
/bar/myu.multiline;  // true
/bar/myu.source;     //"bar"

lastIndex屬性：

返回下一次開始搜索的位置。該屬性可讀寫，但是只在設(shè)置了g修飾符時有意義。

正則對象的方法

test()

返回一個布爾值，沒有匹配項，返回false；有匹配項，返回true。

console.log(/abc/.test("abcde")); //true
console.log(/[0-9]/.test("in 1992"));//true
console.log(/'\d*'/.test("'123'")); //true
console.log(/neighbou?r/.test("neighbor")); //ture
console.log(/\bcat\b/.test("concatenate")); //false

當(dāng)使用全局匹配的時候，即表達式里面使用了g作為修飾符，每次使用test，下一次的開始匹配位置是上一次匹配成功的位置。

var digit = /\d/g;
var str = "x_1_x_0";
digit.test(str);    // true
digit.lastIndex;    // 3
digit.test(str);    // true
digit.lastIndex;    // 7
digit.test(str);    // false
digit.lastIndex;    // 0

使用lastIndex可以控制匹配的開始位置。

var pattern = /y/g;     //必須全局匹配
pattern.lastIndex = 3;  //指定匹配開始的位置
console.log(pattern.test("zzy")); //false

exec()

返回匹配的結(jié)果。沒有匹配項，返回null；有匹配項，返回一個數(shù)組。

var match = /\d+/.exec("one two 100"); 
console.log(match);         // [ '100', index: 8, input: 'one two 100' ]
console.log(match.index);   // 8

如果表達式中有圓括號，即一個group，與group匹配的內(nèi)容也能返回：

console.log(/_(x)/.exec("_y_x")); 
// [ '_x', 'x', index: 2, input: '_y_x' ]
console.log(/bad(ly)?/.exec("bad")); 
// [ 'bad', undefined, index: 0, input: 'bad' ] 沒有匹配到的group返回undefined
console.log(/(\d)+/.exec("123"));    
//[ '123', '3', index: 0, input: '123' ] 匹配到多次，返回最后一次的

數(shù)組里面有兩個屬性：

1. input：整個原字符串。
2. index：整個模式匹配成功的開始位置（從0開始計數(shù)）。

當(dāng)使用全局匹配的時候，下一次的開始匹配位置是上一次匹配成功的位置?？梢杂眠@個特點進行遍歷，找出所有的匹配項。

var input = "A string with 3 numbers in it... 42 and 88.";
var number = /\b(\d+)\b/g;
var match;
while (match = number.exec(input))
    console.log("Found", match[1], "at", match.index);
// Found 3 at 14
// Found 42 at 33
// Found 88 at 40

字符串對象中使用正則表達式

有四種方法可以使用正則表達式：

replace()：按照給定的表達式替換字符串，返回替換后的字符串。

match()：返回一個數(shù)組，成員是所有匹配的子字符串。

search()：按照給定的表達式搜索字符串，返回一個整數(shù)，表示匹配到的位置。

split()：按照給定的表達式分割字符串，返回一個數(shù)組，包含分割后的各個成員。

replace()

該方法的第一個參數(shù)是表達式，第二個參數(shù)是要替換的內(nèi)容。

console.log("papa".replace("p", "m")); //mapa 第一個匹配上的被替換
console.log("Borobudur".replace(/[ou]/, "a")); // Barobudur
console.log("Borobudur".replace(/[ou]/g, "a")); //Barabadar

replace真正的厲害之處在于，它的第二個參數(shù)可以使用$指代匹配到的內(nèi)容：

• $& 指代匹配到的字符串。
• $` 指代匹配結(jié)果前面的文本。
• $' 指代匹配結(jié)果后面的文本。
• $n 指代匹配成功的第n組內(nèi)容，n是從1開始的自然數(shù)。
• $$ 指代美元符號$。

console.log("Hopper Grace".replace(/(\w+)\s(\w+)/g, "$&-->$2 $1")); 
//Hopper Grace-->Grace Hopper
console.log('abc'.replace('b', '[$`-$&-$\']'));
// "a[a-b-c]c"

replace的第二個參數(shù)也可以是function：

var s = "the cia and fbi";
console.log(s.replace(/\b(fbi|cia)\b/g, function(str) {
  return str.toUpperCase();
}));    //the CIA and FBI

match

與exec()方法類似，匹配成功返回一個數(shù)組，失敗返回null。

全局匹配的時候，一次性返回所有匹配的項。

console.log("one two 100".match(/\d+/));//["100"]
console.log("Banana".match(/an/g));     //["an", "an"]

search()

返回第一個匹配項的位置，沒有任何匹配的項，返回-1。

console.log(" word".search(/\S/));  //2
console.log(" ".search(/\S/));      //-1

split()

使用字符分割

var temp = 'Oh brave new world that has such people in it.';
temp.split(' ');
// ['Oh', 'brave', 'new', 'world', 'that', 'has', 'such', 'people', 'in', 'it.']

使用正則表達式分割

// 使用分號分割，并將其前后的空格去除
var names = 'Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand ';

var re = /\s*;\s*/;
var nameList = names.split(re);

console.log(nameList);
// [ 'Harry Trump','Fred Barney','Helen Rigby','Bill Abel','Chris Hand '];
// 試試看，如果正則表達式為 /(\s*;\s*)/ ，會返回什么呢？

使用正則表達式分割，并返回匹配到的內(nèi)容

var myString = 'Hello 1 word. Sentence number 2.';
var splits = myString.split(/(\d)/);

console.log(splits);
//[ "Hello ", "1", " word. Sentence number ", "2", "." ]

返回指定長度的數(shù)組

var myString = 'Hello World. How are you doing?';
var splits = myString.split(' ', 3);

console.log(splits);
// ["Hello", "World.", "How"]

可以用它實現(xiàn)字符串的反轉(zhuǎn)

var str = 'asdfghjkl';
var strReverse = str.split('').reverse().join(''); 
// 'lkjhgfdsa'
// 可以用來測試字符串是否為回文

RegExp對象

var name = "harry";
var text = "Harry is a suspicious character."; 
    //在名字下面加下劃線
var regexp = new RegExp("\\b(" + name + ")\\b", "gi"); 
console.log(text.replace(regexp, "_$1_"));  
    // _Harry_ is a suspicious character.

匹配機制

var animalCount = /\b\d+ (pig|cow|chicken)s?\b/;
console.log(animalCount.test("15 pigs"));       // true
console.log(animalCount.test("15 pigchickens"));// false

Paste_Image.png

var number = /\b([01]+b|\d+|[\da-f]+h)\b/;
//十進制/二進制/十六進制數(shù)

Paste_Image.png

貪婪匹配

先看一個例子，它的作用是將JavaScript代碼中的注釋去掉：

function stripComments(code){
    return code.replace(/\/\/.*|\/\*[^]*\*\//g, "");
}
console.log(stripComments("1 + /* 2 */3"));   // 1 + 3
console.log(stripComments("X = 10;// ten!")); // X = 10;
console.log(stripComments("1 /* a */+/* b */ 1")); // 1 1 有問題

//.*表示單行注釋，/*[^]*\*/表示多行注釋。其中/和最后一個*做普通字符用，所以用\來轉(zhuǎn)義。
第一個表達式用 . 表示任意字符；第二個用 [^] 表示任意字符，因為多行注釋會有換行。

最后一個有問題是貪婪匹配，即盡可能地匹配多個字符。在它后面加上問號，它就盡可能少地匹配，即 [^]*? 。同樣也適用于+，?，{}。

function stripComments(code) {
    return code.replace(/\/\/.*|\/\*[^]*?\*\//g, "");
}
console.log(stripComments("1 /* a */+/* b */ 1")); //1 + 1

在線工具

正則表達式在線測試：https://www.debuggex.com

參考：

Eloquent JavaScript Chapter9
阮一峰 RegExp對象
Mozilla Developer Network