講給前端的正則表達式(1)：基本概念

時間 2019-12-21

原文原文鏈接

做者：wanago_io
翻譯：瘋狂的技術宅javascript

原文：https://wanago.io/2018/04/30/...前端

正則表達式（regex）是定義搜索模式的字符序列。因爲對程序員的平常工做很是有用，因此在 JavaScript 中也支持它。在這個系列文章中，我會向你展現其工做方式以及其實際用途。但願在結束本系列後，你將可以輕鬆的寫出本身的正則表達式。java

建立正則表達式的方法

在 JavaScript 中能夠經過兩種方式去構造正則表達式。要徹底理解它，你須要知道正則表達式包含在兩個正斜槓中。儘管這並非模式中的一部分，但它們用來指示模式的開始和結束。經過它們能夠告訴 JS 解釋器它正在處理正則表達式：程序員

const regex = /dog/;

另外一種方式是使用 RegExp 構造函數：面試

const regex = new RegExp('dog');

建立對象以後，你能夠在對象上調用 test 方法，方法獲得字符串後，若是模式匹配，則返回 true：正則表達式

regex.test('dog'); // true
regex.test('hot-dog'); // true

簡單模式

這是正則表達式最簡單的類型。可以直接在字符串中找到匹配的類型。 /dog/ 僅在字符以相同順序一塊兒出現時纔會匹配。express

/dog/.test('hot-dog'); // true
/dog/.test('do games'); // false

可是正則表達式的功能毫不會這麼簡單。在許多狀況下你可能會但願使用更復雜的模式。segmentfault

特殊字符

除了尋找某個字符串的簡單出現，還能夠作更多的事情。一種方法是使用特殊字符。它們不會被解釋爲被搜索字符串的直接內容，但可以以通用的方式對其進行描述。微信

任何字符

它由一個點 . 表示。用來匹配除了換行符之外的任何單個字符。多線程

const regex = /.og/;
regex.test('fog'); // true
regex.test('dog'); //true

通配符是特殊字符之一。若是想要匹配的是一個點 . 字符該怎麼辦？

反斜槓

反斜槓 / 用於將特殊字符的含義切換爲普通字符。因此是能夠在文本中搜索點 . 字符的，而且這個點不會被解釋爲特殊字符。

const regex1 = /dog./;
regex1.test('dog.'); // true
regex1.test('dog1'); // true
 
const regex2 = /dog\./;
regex1.test('dog.'); // true
regex1.test('dog1'); // false

字符集

用方括號 [ ] 表示。這個模式用來匹配一個字符，該字符多是括號中的任何字符。

/[dfl]og/.test('dog'); // true
/[dfl]og/.test('fog'); // true
/[dfl]og/.test('log'); // true

須要注意的是字符集內的特殊字符（如點 .）再也不特殊，所以在這裏再也不須要反斜槓。咱們甚至能夠進一步定義一些字符：

/[A-z]/.test('a'); // true
/[A-z]/.test('Z'); // true

請注意，在字母範圍方面，大寫字母優先。這意味着 /[a-Z]/ 會引起錯誤。

const pattern = /[a-Z]/;

Uncaught SyntaxError: Invalid regular expression: /[a-Z]/: Range out of order in character class

你能夠經過添加 ^ 符號輕鬆得到否認字符集。它會匹配方括號中未包含的全部內容。

/[^df]og/.test('dog'); // false
/[^df]og/.test('fog'); // false
/[^df]og/.test('log'); // true

一個重要的注意事項：[A-z] 範圍實際上將匹配多個字母。正如你在 ASCII 表上看到的那樣， [A-z] 也將與符號[、 \、 ]、 ^、 _ 和 ` 相匹配，因此請謹慎使用 [A-Za-z]，而是使用標誌來忽略大小寫。

屢次重複

一個很是有用的功能是匹配某個表達式出現的確切次數。你能夠用花括號 { } 來實現。讓咱們建立一個函數，該函數將檢查字符串是否爲有效的電話號碼。如下面的格式爲例：

+xx xxx xxx xxx

其中 x 是 0 到 9 之間的數字。

function isPhoneNumber(number){
    return /\+[0-9]{2} [0-9]{3} [0-9]{3} [0-9]{3}/.test(number);
}

isPhoneNumber('+12 123 123 123'); // true
isPhoneNumber('123212'); // false

請注意，咱們在此處進行了一些自定義：

{x} 徹底匹配 x 次出現
{x,} 至少匹配 x 次
{x,y} 至少匹配 x 次且不超過 y 次

零個或多個重複

帶有星號 * 的表達式能夠匹配 0 次或更屢次。它實際上等效於 {0，}

這樣咱們能夠輕鬆構造一個能夠匹配任意數量字符的模式：/.*/

標誌

你能夠在正則表達式中再添加一個模式。標誌是一種影響搜索的修飾符。若是用斜槓定義正則表達式的話，就在斜槓後添加它們。若是用 RegExp 構造函數，則將它們做爲第二個參數。最重要的標誌是：

i：忽略大小寫

使用這個標誌，搜索時不區分大小寫：

/dog/i.test('dog'); // true
new RegExp('dog', 'i').test('DoG');

就這麼簡單！

g：全局匹配

多虧了這個標誌，全部匹配項都可以被找到。若是沒有它，將會在找到第一個匹配項後中止。

String.prototype.replace

你很快就能掌握它，由於你可能已經知道函數 replace。它會返回一個新字符串，若是字符串的內容可以與模式匹配，則會替換其內容。你可使用字符串或正則表達式之類的模式。但棘手的是若是你用字符串去執行這個操做，則沒法替換全部出現的模式，只能替換一個模式。若是使用前面提到的標誌，就能夠輕鬆地處理：

const lorem = 'lorem_ipsum_dolor_sit_amet';
 
lorem.replace('_', ' '); // 'lorem ipsum_dolor_sit_amet'
 
lorem.replace(/_/g, ' '); // 'lorem ipsum dolor sit amet'

在下一篇文章中，咱們將會討論更多的標誌。

總結

有了全部這些信息，你就能夠開始編寫本身的正則表達式並將其使用。我強烈建議你使用這個很棒的工具，它會爲你提供幫助。在本文的後續部分中，當正則表達式能夠發揮更大做用時，咱們將會學習更多高級概念，包括更深刻地研究 JavaScript 提供的 RegExp 對象。到那時，試着練習已經掌握的知識，你將會真正領略到正則表達式的強大。下次見！