JavaScript 正則表達式
@(筆記)[正則表達式]
第一章 課程簡介
1-1 JS正則表達式簡介及應用
課程目標
-了解正則表達式的語法
-在IDE中使用正則表達式處理規則復雜的字符串查找，替換需求
-在JavaScript程序設計中使用正則表達式處理字符串
-Regular Expression使用單個字符串來描述，匹配一系列符合某個句法規則的字符串
-說簡單了就是按照某種規則去匹配符合條件的字符串
第二章 認識正則表達式
2-1 Reg Exp對象
Reg Exp對象
Javascript通過內置對象Reg Exp支持正則表達式
有兩種方法實例化Reg Exp對象
1.字面量
var reg = /\bis\b/g;
"He is a boy.This is a dog.Where is she?".replace =(reg,"IS");
返回值：
"He IS a boy.This IS a dog.Where IS she?"
2.構造函數
var reg = new RegExp("\\bis\\b","g");//構造函數中反斜線（\）需要轉意，因為反斜線本身是特殊字符
"He is a boy.This is a dog.Where is she?".replace =(reg,"IS");
返回值：
"He IS a boy.This IS a dog.Where IS she?"
修飾符
-g：global全文搜索，不添加，搜索到第一個匹配停止。
-i：ignore case忽略大小寫，默認大小寫敏感。
-m：multiple lines 多行搜索。
2-2 元字符
1.正則表達式由兩種基本字符類型組成
-原義文本字符
-元字符
2.元字符是正則表達式中有特殊含義的非字母字符
* + ? $ ^ . | \ () {} []
| 符號 | 含義 |
|---|---|
| \t | 水平制表符 |
| \v | 垂直制表符 |
| \n | 換行符 |
| \r | 回車符 |
| \0 | 空字符 |
| \f | 換頁符 |
| \cX | 與X對應的控制字符（ctrl+X） |
2-3 字符類
-一般情況下正則表達式一個字符對應字符串一個字符
-表達式ab\t的含義是 ●—"ab"—tab—●
-我們可以使用元字符[ ]來構建一個簡單的類
-所謂類似指符合某些特性的對象，一個泛指，而不是指特定的某個字符
-表達式[abc]把字符a或b或c歸為一類，表達會可以匹配這類的字符
例：
"a1b2c3d4".replace(/[abc]/g,"X");
返回值：
"X1X2X3d4";
字符類取反
-使用元字符^創建反向類/負向類
-反向類的意思是不屬于某類的內容
-表達式[^abc]表示不是字符a或b或c的內容
注意：
[abc]與[abc]的區別：
[^abc]的圖示為：
^[abc]的圖示為：
例：
-
"a1b2c3d4".replace(/[^abc]/g,"X");
返回值："aXbXcXXX";
-
"a1b2c3d4".replace(/^[abc]/g,"X");
返回值："X1b2c3d4";
2-4 范圍類
-正則表達式提供了范圍類
-我們可以使用[a-z]來鏈接連個字符表示，從a到z的任意字符
-這是一個閉區間，也就是包含a和z
[a-z]圖示：
例：
"a1b2c3d45ef9".replace(/[a-z]/g,"X");
返回值：
"X1X2X3X45XX9";
-在[ ]組成的類內部是可以連寫的[a-zA-Z]
[a-zA-Z]圖示如下：
匹配范圍類同時也匹配"-"怎么辦？
例：
"2017-09-21".replace(/[0-9-]/g,"X");
返回值：
"XXXXXXXXXX";
2- 5 預定義類及邊界
預定義類
-正則表達式提供了預定義類來匹配常見的字符
| 字符 | 等價類 | 含義 |
|---|---|---|
| . | [^\r\n] | 除了回車符和換行符之外的字符 |
| \d | [0-9] | 數字字符 |
| \D | [^0-9] | 非數字字符 |
| \s | [\t\n\XOB\f\r] | 空白符 |
| \S | [^\t\n\XOB\f\r] | 非空白符 |
| \w | [a-zA-Z_0-9] | 單字符（字母、數字、下劃線） |
| \W | [^a-zA-Z_0-9] | 非單字符 |
例：匹配一個ab+數字+任意字符的字符串
var reg = /ab\d./g;
圖示：
-正則表達式還提供了幾個常用的邊界匹配符
| 字符 | 含義 |
|---|---|
| ^ | 以xxx開始,例：var reg = /^a/g;（區別[\d]、[\d]） |
| $ | 以xxx結束,例：var reg = /a$/g;
|
| \b | 單詞邊界 |
| \B | 非單詞邊界 |
2-6 量詞
| 字符 | 含義 |
|---|---|
| ？ | 出現零次或一次（最多出現一次） |
| + | 出現一次或多次（最少出現一次） |
| * | 出現零次或多次（任意次） |
| {n} | 出現n次 |
| [n,m] | 出現n到m次 |
| {n,} | 出現至少n次 |
2- 7 JavaScript正則貪婪模式與非貪婪模式
-貪婪模式：盡可能多的匹配（默認）
例：
"12345678".replace(/\d{3,6}/g,"X");
返回值：
"X78"
-非貪婪模式：讓正則表達式盡可能少的匹配，也就是說一旦成功匹配不再繼續嘗試就是非貪婪模式
-做法很簡單,在量詞后面加上 ? 即可
例：
"12345678".replace(/\d{3,6}?/g,"X");
返回值：
"XX78";
2-8 分組、或
-匹配字符串Byron連續出現3次的場景
var reg = /Byron{3}/g;
圖示為：
注意：量詞作用于前面緊挨著的字符，并不是前面整個單詞。
-使用（）可以達到分組的功能，使用量詞作用于分組
var reg = /(Byron){3}/g;
圖示：
例：
"a1b2c3d4".replace(/([a-z]\d){3}/g,"X");
返回值：
"Xd4";
或
-使用 | 可以達到或的效果
var reg = /Byron | Casper/;
var reg = /Byr(on | Ca)sper/;
圖示：
例：
"ByronCasper".replace(/Byron|Casper/g,"X");
返回值：
"XX";
反向引用（"$"）
例：把"2017-09-21"轉換成"09/21/2017"
"2017-09-21".replace(/(\d{4})-(\d{2})-(\d{2})/g,"$2/$3/$1");
返回值：
"09/21/2017";
忽略分組
-不希望捕獲分組，只需要在分組內加上 ？： 就可以(分組括號內的最前面)
var reg = /(?:Byron).(ok)/;
2-9 前瞻
-JavaScript正則表達式從文本頭部向文本尾部開始解析，文本尾部方向，成為"前"
-前瞻就是正則表達式匹配到規則的時候，向前檢查是否符合斷言后顧/后瞻方向相反
-JavaScript不支持后顧
-符合和不符合特定斷言成為肯定/正向匹配和否定/負向匹配
| 名稱 | 正則 | 含義 |
|---|---|---|
| 正向前瞻 | exp(?=assert) | |
| 負向前瞻 | exp(?！assert) | |
| 正向后顧 | exp(?<=assert) | JavaScript不支持 |
| 負向后顧 | exp(?<！=assert) | JavaScript不支持 |
例：
var reg = /\w(?=\d)/;
圖示：
例：
"#4g@b7^!".replace(/\w(?=\d)/g,"X");
返回值：
"#4g@X7^!";
2-10 對象屬性
-global：是否全文搜索，默認false
-ignore case：是否大小寫敏感，默認是false
-multiline：多行搜索，默認值是false
-lastIndex：是當前表達式匹配內容的最后一個字符的下一個位置
-source：正則表達式的文本字符串
例：
var reg1 = /\w/;
var reg2 = /\w/gim;
reg1.global; //false
reg1.ignoreCase; //false
reg1.multiline; //false
reg2.global; //true
reg2.ignoreCase; //true
reg2.multiline; //true
reg1.source; //"\w"
reg2.source; //"\w"(文本字符串不包含標識符)
2-11 text和exec方法
RegExp.prototype.test(str)
-用于測試字符串參數中是否存在匹配正則表達式模式的字符串
-如果存在返回true，否則返回false
例：
var reg1 = /\w/;
reg1.test("a");//true
reg1.test("$");//false
var reg2 = /\w/g;
reg2.test("ab");//true
reg2.test("ab");//true
reg2.test("ab");//false
reg2.test("ab");//true
reg2.test("ab");//true
reg2.test("ab");//false(lastIndex屬性原因導致)
RegExp.prototype.exec(str)
-使用正則表達式模式對字符串執行搜索，并將更新全局RegExp對象的屬性以反映匹配結果
-如果沒有匹配的文本則返回null，否則返回一個結果數組：
1.index聲明匹配文本的第一個字符的位置
2.input存放被檢索的字符串 string
非全局調用
-調用非全局的RegExp對象的exec( )時，返回數組
-第一個元素是與正則表達式想匹配的文本
-第二個是與RegExpObject的第一個子表達式相匹配的文本（如果有的話）
-第三個元素是與RegExp對象的第二個子表達式相匹配的文本（如果有的話），以此類推
例：
var reg1 = /\d(\w)\d/;
var ts = "1a2b3c4d5e";
var ret = reg1.exec(ts);
console.log(reg1.lastIndex + "\t" + ret.index + "\t" + ret.toString();//執行第一次
console.log(reg1.lastIndex + "\t" + ret.index + "\t" + ret.toString();//執行第二次
返回值：
0 0 1a2,a;//第一個0因為在非全局下lastIndex屬性不生效所以是0
0 0 1a2,a;//在非全局下無論執行多少次lastIndex屬性不生效都是0
(全局搜索)例：
var reg2 = /\d(\w)(\w)\d/g;
var ts = "1az2bb3cy4dd5ee";
while(ret = reg2.exec(ts)){
console.log(reg2.lastIndex + "\t" + ret.index + "\t" + ret.toString());
}
返回值：
4 0 1az2,a,z;//全局搜索lastIndex生效
10 6 3cy4,c,y;//全局搜索lastIndex生效
2-12 字符串對象方法
String.prototype.search(reg/string)
-search( )方法用于檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串
-方法返回第一個匹配結果index，查不到返回-1
-search( )方法不執行全局匹配，它忽略標志g，并且總是從字符串的開始進行檢索
例：
"a1b2c3d1".search("1"); //返回 1
"a1b2c3d1".search("10"); //沒找到返回 -1
"a1b2c3d1".search(2); //輸入數字，自動轉化為正則即：/2/
"a1b2c3d1".search(/2/); //返回 3
String.prototype.match(reg)
-match( )方法將檢索字符串，以找到一個或多個與regexp匹配的文本
-regexp是否具有標志g對結果影響很大
非全局調用
-如果regexp沒有標志g，那么match()方法就只能在字符串中執行一次
-如果沒有找到任何匹配文本，將返回null
-否則它將返回一個數組，其中存放了與它找到的匹配文本有關的信息
-返回數組的第一個元素存放的是匹配文本，而其余的元素存放的是與正則表達式的子表達式匹配的文本
-除了常規的數組元素之外，返回的數組還含有2個對象屬性
1.index聲明匹配文本的起始字符在字符串的位置
2.input聲明對stringObject的引用
例：
var reg1 = /\d(\w)\d/;
var ts = "$1a2b3c4d5e";
var ret = ts.match(reg1);
console.log(ret);
console.log(ret.index + "\t" + reg1.lastIndex);
返回值：
["1a2", "a", index: 1, input: "$1a2b3c4d5e"];//FireFox結果
1 0;//非全局調用下lastIndex屬性不生效所以是 0
全局調用
-如果regexp具有標志g則match( )方法將執行全局檢索，找到字符串中的所有匹配子字符串
1.沒有找到任何匹配的字符串，則返回null
2.如果找到了一個或多個匹配字符串，則返回一個數組
-數組元素中存放的是字符串中多有的匹配字符串，而且也沒有index屬性或input屬性
例：
var reg2 = /\d(\w)\d/g;
var ts = "$1a2b3c4d5e";
var ret = ts.match(reg2);
console.log(ret);
console.log(ret.index + "\t" + reg1.lastIndex);
返回值：
["1a2", "3c4"];
undefined 0; // index屬性不存在 lastIndex未生效
String.prototype.split(reg)
-我們經常使用split方法把字符串分割為數組
"a,b,c,d".split(",");//["a","b","c","d"]
-在一些復雜的分割情況下我們可以使用正則表達式解決
"a1b2c3d".split(/\d/);//["a","b","c","d"]
String.prototype.replace
-String.prototype.replace(str,replaceStr)
-String.prototype.replace(reg,reolaceStr)
-String.prototype.replace(reg,function)
function參數含義
function會在每次匹配替換的時候調用，有四個參數
1.匹配字符串
2.正則表達式分組內容，沒有分組則沒有改參數
3.匹配項在字符串中的 index
4.原字符串
例(不帶分組的)：
"a1b2c3d4e5".replace(/\d/g,function(match,index,origin){
console.log(index);
return parseInt(match) + 1;
});
返回值：
1;//本次匹配的字符串第一個字符的下標
3;//本次匹配的字符串第一個字符的下標
5;//本次匹配的字符串第一個字符的下標
7;//本次匹配的字符串第一個字符的下標
9;//本次匹配的字符串第一個字符的下標
"a2b3c4d5e6";
例（帶分組的）：
"a1b2c3d4e5".replace(/(\d)(\w)(\d)/g,function(match,group1,group2,group3,index,origin){
console.log(match);
return group1 + group3;
});
返回值：
1b2;//本次匹配的字符串
3d4;//本次匹配的字符串
"a12c34e5";
