[TOC] 慕課網 JavaScript正則表達式筆記 概述 RegularExpression：安裝某種 規則 匹配指定內容的單個字元串 一個正則可視化網站： "https://regexper.com/" 一個可視化JavaScript調試網站： "http://jsbin.com/qutevu ...
目錄
慕課筆記-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?"元字元
- 正則表達式有兩種基本字元串類型組成
- 原義文本字元
- 元字元
- 元字元是有特殊含義的非字母字元
* + ? $ ^ . | \ ( ) { } [ }
元字元
| 字元 | 含義 |
|---|---|
\t |
水平製表符 |
\v |
垂直製表符 |
\n |
換行符 |
\r |
回車符 |
\0 |
空字元 |
\f |
換頁符 |
\cX |
與X對應的控制字元（Ctrl+X） |
字元類
一般情況下正則表達式一個字元對應字元串的一個字元
- 字元類
- 我們可以使用元字元
[]構建一個簡單的類 - 所謂類是指符合某些特性的對象，一個泛指，而不是指某個字元
- 表達式
[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預定義類
預定義字元
| 字元 | 等價類 | 含義 |
|---|---|---|
. |
[^\r\n] |
除了回車符和換行符之外的所有字元 |
\d |
[0-9] |
數字字元 |
\D |
[^0-9] |
非數字字元 |
\s |
[\t\n\x0B\f\r] |
空白字元 |
\S |
[^\t\n\x0B\f\r] |
非空白字元 |
\w |
[a-zA-Z_0-9] |
查詢字元串（字母，數字下劃線） |
\W |
[^a-zA-Z_0-9] |
非單詞字元 |
邊界
| 字元 | 含義 |
|---|---|
^ |
以xxx開頭 |
$ |
以xxx結束 |
\b |
單詞邊界 |
\B |
非單詞邊界 |
示例
// 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"量詞
- 適用場景：希望匹配連續出現多次的內容的字元串
| 字元 | 含義 |
|---|---|
? |
出現零次或一次（最多出現一次） |
+ |
出現一次或多次（至少出現一次） |
* |
出現零次或多次（任意次） |
{n} |
出現n次 |
{n,m} |
出現n到m次 |
{n,} |
至少出現n次 |
\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不支持後顧，故不再演示
| 名稱 | 正則 | 含義 |
|---|---|---|
| 正向前瞻 | exp(?=asset) |
|
| 負向前瞻 | exp(?!asset) |
|
| 正向後顧 | exp(?<=asset) |
JS不支持 |
| 負向後顧 | exp(?<!asset) |
JS不支持 |
示例：
'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); //1String.prototype.match(reg)
- match()方法將檢索字元串，以找到一個或多個與RegExp匹配的文本
- RegExp是否具有標誌g對結果影響很大
- 非全局調用
- 如果RegExp沒有標誌g，那麼match（）方法就只能執行一次匹配
- 如果沒有找到任何匹配，則返回null
- 否則返回一個數組，其中存放了了與它找到的匹配文本有關的信息
- 返回數組的第一個元素存在的是匹配文本，而其他元素存放的是與正則表達式的子表達式匹配的文本
- 處理常規的數組元素之外，返回的數組還含有兩個對數屬性
- index聲明匹配文本的其實字元串在字元串的位置
- input聲明對stringObject的引用
- 全局調用
- 如果RegExp具有標誌g，則match方法執行全局檢索，找到字元串的所有匹配子字元串
- 沒有找到匹配，返回null
- 如果找到一個或多個匹配子串，則返回以數組
- 數組元素中存放的是字元串所有的匹配子串，而且也沒有index屬性或則input屬性
- 如果RegExp具有標誌g，則match方法執行全局檢索，找到字元串的所有匹配子字元串
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
- 原字元創
- function有四個參數
