JS 正則表達式^$詳解，脫字符^與美圓符$同時寫表示什麼意思？

 壹 ❀ 引

對於初學正則的同窗來講，^$這兩個看似簡單的字符卻在使用中總讓匹配結果超出咱們的預期，^何時表示行首何時表示反義？^ $兩個一塊兒寫表示什麼含義？今天咱們就來詳細聊聊這兩個字符。

 貳 ❀ 關於^與$

先解釋^與$概念，很簡單的兩句話，先留個印象。

^ 脫字符：匹配開頭，若存在多行匹配多行的行頭。

$ 美圓符：匹配尾部，若存在多行匹配多行的尾部。

咱們知道正則是一種匹配模式，要麼匹配字符，要麼匹配位置。這裏咱們得從這兩種匹配狀況分別解釋這兩個字符。

1.從匹配字符角度

當用於匹配字符時，^與$更可能是做爲匹配出精準結果的輔助條件，咱們先看個簡單的例子：

'123'.match(/\d/g);//[1,2,3]

很好理解，全局（注意結尾有個g）匹配單個任意數字，很明顯1，2，3都符合條件，因此這裏找到了三個匹配結果；咱們分別添加 ^ 與 $ 再看：

'123'.match(/^\d/g);//[1]
'123'.match(/\d$/g);//[3]

此時 ^\d 只能匹配到1，而 \d$ 只能匹配到3，你確定就納悶了，不對啊，我正則後面不是有個g表示全局匹配嗎，怎麼只匹配一個了呢？以 ^\d爲例，此時的匹配條件實際上是找開頭位置後的一個任意數字，\d$ 表示匹配結尾前的一個任意數字。開頭和結果對於一個不換行的字符串都只有一個，因此天然只能找到一個數字了，如今能理解前面所說的^$做爲輔助條件的意思了嗎。

那麼咱們如今將數字換行，再看：

'12\n34'.match(/^\d/mg);//[1,3]
'12\n34'.match(/\d$/mg);//[2,4]

因爲存在換行，致使如今有兩個開頭位置和兩個結尾位置（注意匹配中使用了m，表示換行匹配），因此匹配結果也變成了兩個，不難理解吧。

2.從匹配位置角度

正則除了根據規則匹配對應的字符，還有一個強大的功能就是匹配位置。什麼是位置呢？以字符 1234 爲例，每一個箭頭都表明一個位置，其中第一個箭頭的位置就是 脫字符 ^，結果位置就是美圓符$， 以下圖：

因此當咱們在匹配位置時，^$也成爲了咱們須要匹配的結果，例如，我須要將 1234 首尾位置加上花朵：

'1234'.replace(/^|$/g, '❀');// "❀1234❀"

固然，在匹配位置時^與$也是幫助咱們精確位置的輔助條件，好比經常使用的千位分隔符正則：

'12345678'.replace(/(?!^)(?=(\d{3})+$)/g, ',');// "12,345,678"

這段正則的意思，就是從右往左找，每隔三位數字前面的位置替換成逗號，同時排除字段頭部位置，由於當不排位開頭位置，只要字符長度是三的倍數，就會致使頭部也會出現逗號的尷尬局面，例如：

'123456789'.replace(/(?=(\d{3})+$)/g, ',');// ",123,456,789"

因此針對千位分隔符正則中的 ^ 與 $ 而言，^起到了排除開頭位置的做用，而$起到了改變正則匹配的方向，由默認的從左到右變成了從右到左每隔三位的查找。

3.反義字符組

^除了做爲脫字符表示從頭匹配，開頭位置兩個含義外，還能做爲反義字符使用，例如，我想匹配除了123以外的任意字符：

/[^123]/.test(1); //false
/[^123]/.test(2); //false
/[^123]/.test(3); //false
/[^123]/.test(4); //true

這裏[^123]就表示除了123以外的意思，那麼咱們怎麼知道^何時表示反義，何時表示開頭位置呢？很簡單，由於當它只有放在字符組中時才叫反義字符組，因此固然是隻有出如今[]中時纔是反義的意思。

4.^與$同時出如今正則先後表示什麼？

對於新手而言，^$同時出現確實有點誤解人，畢竟咱們前面說^表示從左到右，$能起到從右到左的做用，同時出現難道匹配左右夾擊？其實同時寫時只是限制字符的起點與終點，咱們來看個例子：

/123/.test('   123   '); //true
/^123$/.test('   123   '); //false

 第一個輸出true，這是由於被檢測的字段只要有123這三個字段就好了，不關心你123先後還有什麼。而第二個咱們利用^$限時了字符的兩端，也就是說若是你test想爲真，那麼你的字符開頭後面必須是1，結尾前面必須是3，字符的開頭結尾被固定死了。通常在驗證表單輸入是否正則，咱們都會加上^$。

那麼關於^與$的解析就說到這了，太晚了，本文結束。