前端基礎之正則表達式

幾種用法的區別

１、 match、replace
２、 test
３、 exec

１、match、replace的調用對象是字符串， test，exec的調用對象是正則表達式對象。

二、test 返回結果是boolen值， exec返回的結果是匹配到的數組（沒有匹配到返回null）
exec執行時，若是沒有子匹配項（即沒有括號的狀況），不管有沒有參數g， 只返回一個匹配項，
加g與不加g的區別：
加g再下一次調用exec的時候，會從上一次匹配結束後的地方從新開始匹配（即lastIndex的值會變化），
不加g，每次都是從頭開始匹配。

三、match 執行的結果接近 exec。
區別以下：
* 當沒有子匹配項， 且非全局匹配時， 結果同樣
* 當沒有子匹配項， 且全局匹配時， 結果不同，match匹配全部項， 可是exec會從上一次匹配結束後的地方從新開始匹配（即lastIndex的值會變化）
* 當有子匹配項， 且非全局匹配時， 結果同樣
* 當有子匹配項， 且全局匹配時， 結果不同， match會忽略子匹配項， exec正確返回全部匹配到的結果。

結論：
exec沒有子匹配項的時候，只會返回第一個匹配到的數組。
match在有子匹配項後，會匹配全部匹配項，不須要另外添加全局匹配，添加了反卻是不對了。

關於match與exec的區別的例子能夠參考這裏

replace深刻理解

１、replace的調用對象是string;
２、兩個參數，
－第一個參數傳入的正則表達式（匹配規則）；
－ 第二個參數是：經過匹配規則匹配到後，想傳入的字符串或者函數；
３、返回的是匹配後的字符串。

參考的原文地址：https://www.jianshu.com/p/31b...
一個簡單的例子：

var str = 'red+green+world';
str.replace(/red/, blue); // 將經過正則表達式匹配到的結果以第2個參數替換
str.replace(/\+/g, ' '); // 將全部的加號，以空格替換

關於第一個參數，正則表達式沒什麼可說的，
第2個參數，有點講究：

$&  第一個參數（規則）的結果
$`  第一個參數（規則）的結果的全部左邊的字符串
$'   第一個參數（規則）的結果的全部右邊的字符串
$1,$2,$3...$n 第一個參數（規則）的結果的對應的子字符串

$&

$& 適用於沒有子表達式的狀況

var sStr='討論一下正則表達式中的replace的用法';
sStr.replace(/正則表達式/,'《$&》');
// 獲得："討論一下《正則表達式》中的replace的用法"

$`

var sStr='討論一下正則表達式中的replace的用法';
sStr.replace(/正則表達式/,'《$`》');
// 獲得："討論一下《討論一下》中的replace的用法"

$'

匹配字符串右邊的全部字符，注意，既然 $' 有單引號，那麼外面的引號必須雙引號，若是不能夠雙引號，只能把 $' 的單引號轉義。

var sStr='討論一下正則表達式中的replace的用法';
sStr.replace(/正則表達式/,"《$'》");
// 獲得："討論一下《中的replace的用法》中的replace的用法"

$1, $2, $3, …, $n

依次匹配子表達式,$1匹配的是字符串中匹配到的內容，不是正則表達式。
全局匹配的狀況沒寫，

@@...@@'markdown語法變成'<blink>...</blink>
var a = '@@aaa@@ @@bbb@@';
a.replace(/\"([^"]*)"/g,'<blink>$1</blink>');

var sStr='討論一下正則表達式中的replace的用法';
sStr.replace(/(正則)(.+?)(式)/,"《$1》$2<$3>");
// 獲得："討論一下《正則》表達<式>中的replace的用法"

若是第2個參數是函數
先看arguments的用法：

var sStr='討論一下正則表達式中的replace的用法';
sStr.replace(/(正則).+?(式)/,function() {
    console.log(arguments);
});
// ["正則表達式", "正則", "式", 4, "討論一下正則表達式中的replace的用法"]

參數分別爲：

• 匹配到的字符串（此例爲"正則表達式")
• 若是正則使用了分組匹配就爲多個不然無此參數。（此例的參數就分別爲 "正則", "式"）
• 匹配字符串的對應索引位置（也就是"正則表達式"的索引位置，此例爲4）
• 原始字符串

正則表達式參數

g全局匹配，i忽略大小寫
不帶g的狀況下，從左向右匹配，若是匹配到了則不在向右匹配了，
帶g的狀況，則從頭至尾都匹配完，返回全部匹配到的數據。

元字符

16個元字符

元字符         名稱               匹配對象
.             點號                 單個任意字符(除回車\r、換行\n、行分隔符\u2028和段分隔符\u2029外)
[]            字符組              列出的任意一個字符
[^]           排除型字符組      未列出的單個任意字符
?             問號                 匹配0次或1次
*             星號                 匹配0交或屢次
+             加號                匹配1次或屢次
{min,max}     區間量詞        匹配至少min次，最多max次
^             脫字符             行的起始位置
$             美圓符             行的結束位置
|             豎線                 分隔兩邊的任意一個表達式
()            括號                限制多選結構的範圍，標註量詞做用的元素，爲反向引用捕獲文本
\1,\2...      反向引用          匹配以前的第1、第二...組括號內的表達式匹配的文本
\w                               匹配字母或數字或下劃線或漢字
\d                                匹配數字
\b                                匹配單詞的開始或結束
\s                                匹配任意的空白符

特殊分組匹配（只匹配不捕獲）

(?:exp) 匹配exp，不捕獲,不分組

位置匹配（零寬斷言）

(exp) 匹配exp，而且分組

1，匹配某個字符串前面的位置
(？<=exp) 這個位置的前面能匹配exp（這個位置的前面是exp）
2，匹配exp後面的位置
(？=exp) 這個位置的後面能匹配exp（這個位置的後面是exp）
3，匹配某個字符串前面的位置
(？<！exp) 這個位置的前面不能匹配exp（這個位置的前面不是exp）
4，匹配exp後面的位置
(？！exp) 這個位置的後面不能匹配exp（這個位置的後面不是exp）

關於零寬斷言的一個例子

匹配三個字符img的隨機組合,可是不能重複
var reg = /i|m|g|im|mi|ig|gi|mg|gm|img|igm|mig|mgi|gim|gmi/;
上面這種寫法確實能夠。

/^(?!([img])(?=.*\1))[img]+$/
上面的正則表達式在正則鐵路圖中看的更清楚。
正則鐵路圖

理解：
？！ 這個位置的後面，不能知足表達式([img])(?=.*\1)，才能夠。
這個比較繞， ？=，用它來理解， 這個位置的後面，須要知足表達式([img])(?=.*\1)，才能夠。
這個表達式是([img])(?=.*\1)；
先是匹配img其中一個，緊跟着的後面的字符串中須要知足\1，便是以前匹配成功後的img其中一個。
([img])(?=.*\1)的意思也就是說， 必須重複出現i*i,m*m,g*g這種狀況，才知足。
而後？！，取反，不能重複出現i*i,m*m,g*g這種狀況，才知足。
也就是說，在開始位置，不能重複出現i*i,m*m,g*g這種狀況。
/^(?!([img])(?=.*\1))[img]+$/，不能知足igg，能後面重複的狀況。

/^(([img])(?!.*\2))+$/的理解：
經過正則鐵路圖理解
([img])(?!.*\2)
先是匹配img其中一個，緊跟着的後面的位置，後面的子符串中不能有\2，便是以前匹配成功後的img其中一個。而後總體向後循環檢驗不能出現重複字符。

split

split是根據指定的分隔符，將字符串分隔成多個子字符串，返回這些子字符串構成的數組。
split中使用正則來實現分割。

var colorText = "red,blue,green,yellow";
var colors3 = colorText.split(/[^\,]+/);   //["", ",", ",", ",", ""]

/[^\,]+/這個正則表達式的意思就是，不是,的多個字符。
也就是說根據不是,的多個字符，將colorText分割。
不是,的多個字符 指的就是red blue green yellow，
分割結果就是：
'' (red) ',' (blue) ',' (green) ',' (yellow) ''
括弧中的就是指定的分割符，結果就是["", ",", ",", ",", ""]。

轉譯

js中申明：

var str = '1/';

會報錯，
可是

var str = '1\';

不會報錯，爲何呢？
\ 這個東東是能夠轉譯其餘特殊字符的，看下面這個，

var str = '1\'';

當這麼申明後， var str = '1\''; \後面的單引號被\給轉譯成了一個普通的引號，就成了 var str = '1''，
若是寫成var str = '1\'， 因爲`後面的單引號被\給轉譯成了一個普通的引號了， str這個字符串只有一個開始的引號，沒有結束的引號了。因此語法報錯。