JavaScript正則表達式筆記

概述

• RegularExpression：安裝某種規則匹配指定內容的單個字符串
• 一個正則可視化網站：https://regexper.com/
• 一個可視化JavaScript調試網站：http://jsbin.com/qutevuwamu/1/edit?js,console

RegExp對象

兩種方法構造RegExp對象

• 字面量 var reg = /\bis\b /g
• 構造函數 var reg = new RegExp('\\bis\\b', 'g')

注：在Linux中反斜線本身就是特殊字符，所以需要再次轉義，故寫成\\bis\\b的格式

修飾符

• g: global 全文搜索，不添加的話搜索到第一個匹配停止，添加的話匹配全局
• i: ignore case 忽略大小寫，默認大小寫敏感
• m: multipl lines 多行搜索

示例

'He is a boy. Is he?'.replace(/\bis\b/g, '0')  // expected: "He 0 a boy. Is he?"
'He is a boy. Is he?'.replace(/\bis\b/i, '0')  // expected: "He 0 a boy. 0 he?"

元字符

• 正則表達式有兩種基本字符串類型組成
  • 原義文本字符
  • 元字符
• 元字符是有特殊含義的非字母字符
• * + ? $ ^ . | \ ( ) { } [ }

元字符

字符類

• 一般情況下正則表達式一個字符對應字符串的一個字符

• 字符類

  • 我們可以使用元字符[]構建一個簡單的類
  • 所謂類是指符合某些特性的對象，一個泛指，而不是指某個字符
  • 表達式[abc]把字符串a或b或c歸為一類，表達式可以匹配這類的字符

• 字符類取反

  • 使用元字符^創建反向類/負向類
  • 反向類的意思是不屬于某類的內容
  • 表達式[^abc]表示不是字符a或b或c的內容

• 示例

'a1b2c3d4'.replace(/[abc]/g, 'X'); //output: X1X2X3d4
'a1b2c3d4'.replace(/[^abc]/g, 'X'); //output: aXbXcXXX

范圍類

• 正則表達式提供了范圍類
• 可以使用[a-z]表示從a到z的任意字符
• 這是個閉區間，包括a和z本身
• 在[]中是可以連寫的，例如[a-zA-Z]表示從a到z大小寫匹配

示例：

'a1b2c3d4'.replace(/[a-z]/g, 'Q'); //output: Q1Q2Q3Q4
'2016-09-12'.replace(/[0-9-]/g, 'A'); //output: AAAAAAAAAA

預定義類

預定義字符

邊界

示例

// for \b \B
'This is a boy'.replace(/is/g, '0'); //output: Th0 0 a boy
'This is a boy'.replace(/\bis/g, '0'); //output: This 0 a boy
'This is a boy'.replace(/\Bis/g, '0'); //output: Th0 is a boy

// for ^
'@123@abc@'.replace(/@./g, 'Q'); //output: Q23Qbc@
'@123@abc@'.replace(/^@./g, 'Q'); //output: Q23@abc@
'@123@abc@'.replace(/.@/g, 'Q'); //output: @23QabcQ
'@123@abc@'.replace(/.@$/g, 'Q'); //output: @123@abQ

// for multip line
mulstr="@123\n@456\n@789";
mulstr.replace(/^@\d/g, 'X'); //output:"X23\n@456\n@789"
mulstr.replace(/^@\d/gm, 'X'); //output:"X23\nX456\nX789"

量詞

• 適用場景：希望匹配連續出現多次的內容的字符串

\d{20} //匹配連續出現20次的數字
\d{20}\w\d?\w+\d*\d{3}\w{3,5}\d{3,}

貪婪模式

• 正則表達式會盡可能多的匹配，直到匹配失敗
• 非貪婪模式即讓正則表達式盡可能少的匹配，即一旦匹配成功就不再匹配了。做法很簡單，在量詞后面加上 ? 即可。

分組

• 問題：匹配字符串byron連續出現3次的場景

使用量詞：byron{3}并不能完成目標。因為它只會對緊挨著的n匹配三次，此時，需要使用分組。分組很簡單，直接加上小括號即可。即(byron){3}

示例：

'a1b2c3d4'.replace(/[a-z]\d{3}/g, 'X') //a1b2c3d4
'a1b2c3d4'.replace(/([a-z]\d){3}/g, 'X') //Xd4

或（使用豎線表示）

'ByronCaseper'.replace(/Byron|Caseper/g, 'X') //XX
'ByronsperByrCasper'.replace(/Byr(on|Ca)sper/g, 'X') //XX

反向引用

• 問題：將2015-12-25 => 12/25/2015
• 實現方法是使用反向引用，將分組內容使用$進行捕獲，然后再用$進行表示。

示例

'2015-12-25'.replace(/(\d{4})-(\d{2})-(\d{2})/g, '$1/$2/$3')
// 12/25/2015

忽略分組

• 不想捕獲某些分組，只需要在分組內加上?:就可以了。例如

(?:Bryon).(ok)

前瞻

• 正則表達式從文本頭部向尾部開始解析，文本尾部方向，稱之為前
• 前瞻就是再正則表達式匹配到規則的時候，向前檢測是否符合斷言，后顧/后瞻方向相反

注：JavaScript不支持后顧，故不再演示

示例：

'a2*34v8'.replace(/\w(?=\d)/g, 'X')
//"X2*X4X8"
'a2*34v8'.replace(/\w(?!\d)/g, 'X')
//"aX*3XvX"

對象屬性

• global：是否全文搜索，默認false
• ignore case：是否大小寫敏感，默認false
• multiline：多行搜索，默認false
• lastIndex：是當前表達式匹配內容的最后一個字符的下一個位置
• source：正則表達式的文本字符串

test和exec方法

• RegExp.prototype.test(str)
  • 用于測試字符串參數中是否存在匹配正則表達式模式的字符串
  • 如果存在則返回true，否則返回false
• RegExp.prototype.exec(str)
  • 使用正則表達式模式對字符串執行搜索，并將更新全局RegExp對象的屬性以反映匹配的結果
  • 過沒有匹配的文本則返回null，否則返回一個結果數組
    • index聲明匹配文本的第一個字符的位置
    • input存放被檢索的字符串

注：在test方法中，如果匹配全局后有多個結果時，lastindex保存上次執行結果，并向下迭代，直至沒有結果時返回false，則重新回到首位。此時再次執行，則再次循環上面的步驟。

示例：

var reg1 = /\w/;
var reg1 = /\w/g;
while(reg2.test('ab')) {
    console.log(reg2.lastIndex);
}
/*
1
2
*/

非全局調用

• 調用非全局的RegExp對象的exec（）方法時，返回數組
• 第一個元素是與正則表達式相匹配的文本
• 第二個元素是與RegExpObject的第一個子表達式相匹配的文不（如果有的話）
• 第三個元素是與RegExp對的第二個子表達式想匹配的文本（如果有的話），以此類推

var reg3 = /\d(\w)(\w)\d/;
var reg4 = /\d(\w)(\w)\d/g;
var ts = '$1az2bb3cy4dd5ee';

var ret = reg3.exec(ts);

console.log(reg3.lastIndex+'\t'+ret.index+'\t'+ret.toString());
//"0  1 1az2,a,z"
console.log(reg3.lastIndex+'\t'+ret.index+'\t'+ret.toString());
//"0  1 1az2,a,z"

while(ret = reg4.exec(ts)) {
  console.log(reg4.lastIndex + '\t'+ret.index+'\t'+ret.toString());
}
/*
"5  1 1az2,a,z"
"11 7 3cy4,c,y"
*/

可以使用正則的函數

String.prototyp.search(reg)

• search()方法用于檢索字符串中指定的字符串，或檢索與正則表達式相匹配的子字符串
• 方法返回一個匹配結果index，查不到返回-1
• search（）方法不執行全局匹配，它將忽略標志g，并且總是從字符串開始進行檢索

'a1b2c3d4'.search(/1/g); //1

String.prototype.match(reg)

• match()方法將檢索字符串，以找到一個或多個與RegExp匹配的文本
• RegExp是否具有標志g對結果影響很大
• 非全局調用
  • 如果RegExp沒有標志g，那么match（）方法就只能執行一次匹配
  • 如果沒有找到任何匹配，則返回null
  • 否則返回一個數組，其中存放了了與它找到的匹配文本有關的信息
  • 返回數組的第一個元素存在的是匹配文本，而其他元素存放的是與正則表達式的子表達式匹配的文本
  • 處理常規的數組元素之外，返回的數組還含有兩個對數屬性
    • index聲明匹配文本的其實字符串在字符串的位置
    • input聲明對stringObject的引用
• 全局調用
  • 如果RegExp具有標志g，則match方法執行全局檢索，找到字符串的所有匹配子字符串
    • 沒有找到匹配，返回null
    • 如果找到一個或多個匹配子串，則返回以數組
  • 數組元素中存放的是字符串所有的匹配子串，而且也沒有index屬性或則input屬性

String.prototype.split(reg)

• 使用split方法把字符串分割為字符數組

'a,b,c,d'.split(',');//['a','b','c','d']

• 在一些復雜分割情況下我們可以使用正則表達式解決

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

String.prototype.replace

• String.prototype.replace(str, replaceStr)
  • str 被替換目標（字符串）
  • replaceStr 替換的字符串
• String.prototype.replace(reg, replaceStr)
  • str 被替換目標（正則表達式）
  • replaceStr 替換的字符串
• String.prototype.replace(reg, function)
  • function有四個參數
    • 匹配字符串
    • 正則表達式分組ner，沒有分組則沒有該參數
    • 匹配項在字符串中的index
    • 原字符創