能夠用在 VS Code 中的正則表達式小技巧

翻譯：瘋狂的技術宅

medium.freecodecamp.org/simple-rege…

聲明：未經許可，禁止轉載

你是否是一直都想學正則表達式，可是由於它的複雜性而被推遲了？在本文中，我將向你展現五個易於學習的正則技巧，你能夠當即在本身喜歡的文本編輯器中使用它們。

文本編輯器設置

雖然如今幾乎全部的文本編輯器都支持正則表達式，但我在本教程中用的是 Visual Studio Code，不過你可使用任何你喜歡的編輯器。另請注意，你一般須要在搜索輸入框附近的某處打開 RegEx 開關。如下是在 VS Code 中執行此操做的方法：

你須要經過選中此選項啓用RegEx

1) . —  匹配任何字符

讓咱們開始吧。點符號 . 用來匹配任何字符：

b.t
複製代碼

上面的正則匹配 "bot"，``"bat"和任何以b開頭、t結尾的三個字符的單詞。可是若是你想搜索點符號，則須要用` 來對它進行轉義，因此下面這個正則只匹配確切的文本 "b.t"：

b\.t
複製代碼

2) .*  —  匹配任何東西

這裏 . 表示*「任何字符」， * 表示「此符號重複前面那個內容任何次數。」* 把它們放在一塊兒（.*）表示*「任何符號重複任意次數。」* 例如，你能夠用它來查找以某些文本開頭或結尾的匹配項。假設咱們有一個這樣的 javascript 方法：

loadScript(scriptName: string, pathToFile: string)
複製代碼

咱們想找到這個方法的全部調用，其中 pathToFile 指向文件夾「lua」 中的任何文件。可使用如下正則表達式：

loadScript.*lua
複製代碼

這意味着，「匹配全部以 "loadScript" 開始同時以"lua"結束的字符串。」

3) ?  —  非貪婪的匹配

.* 以後的 ? 符號和其餘一些匹配規則意味着「儘量少的匹配」。 在上一張圖中，每次匹配都會獲得兩次 "lua"字符串，直到第二個 "lua" 全部東西才能所有匹配完畢。若是你想匹配第一次出現的"lua"，可使用如下正則：

loadScript.*?lua
複製代碼

這意味着，「匹配全部以 "loadScript"開頭，後面爲任意字符，直到第一次出現"lua"

loadScript.*?lua：匹配以 loadScript 開頭的全部內容，直到第一次出現"lua"

4) `( ) ###  — 捕獲組和反向引用

好的，如今咱們能夠匹配一些文字了。可是若是想要修改咱們發現的部分文本呢？這時候就要用到捕獲組。

假設咱們修改了 loadScript 方法，如今須要在它原來的兩個參數之間插入另一個參數。讓咱們把這個新參數命名爲 id，這時新的函數原型應以下所示：loadScript(scriptName，id，pathToFile)。咱們在這裏不能用文本編輯器的常規替換功能，不過正則表達式可以幫助咱們。

經過上圖你能夠看到運行如下正則表達式的結果：

loadScript\(.*?,.*?\)
複製代碼

這意味着：「匹配以 "loadScript(" 開頭的, 後面跟任意內容，直到遇到第一個, ，而後是任意內容，直到第一個)」

對你來講，可能看惟一塊兒來比較奇怪的是 \ 符號。它們用於對括號進行轉義。

由於符號 (和) 是正則表達式用來捕獲匹配文本部分的特殊字符，但咱們須要匹配實際的括號字符，因此須要對它們進行轉義。

在前面的表達式中，咱們使用.*？符號定義了方法調用的兩個參數。要使每一個參數做爲單獨的捕獲組，須要在它們的先後分別添加(和)符號：

loadScript\((.*?),(.*?)\)
複製代碼

若是你運行這段正則，你將看到沒有任何變化。這是由於它匹配的是相同的文本。但如今咱們能夠將第一個參數稱爲\$1，將第二個參數稱爲\$2。這稱爲反向引用，它將幫助咱們作本身想要的事情：在兩個參數中間添加另外一個參數：

搜索輸入：

loadScript\((.*?),(.*?)\)
複製代碼

這與以前的正則相同，但分別將參數映射到倒了捕獲組1和2。

替換輸入：

loadScript($1,id,$2)
複製代碼

這意味着*「用文本"loadScript("、捕獲組一、"id"、捕獲組2和 ) 替換每一個匹配的文本 」。請注意，你不須要在替換輸入中轉義括號。*

5) [ ]  —  字符類

你能夠在[和 ] 符號內來列出要在特定位置匹配的字符。例如，[0-9]匹配從0到9的全部數字。你還能夠明確列出全部數字：[0123456789] —— 與前面的含義相同。你也可使用帶字母的破折號，[a-z] 將匹配全部小寫拉丁字符，[A-Z] 將匹配全部大寫拉丁字符，[a-zA-Z] 將會匹配二者。

你也能夠在字符類以後使用 *，就像在 . 以後同樣，在這種狀況下意味着：「匹配此類中任意數量的字符」

後記

你應該知道有幾種正則表達式的寫法。我在這裏討論的是 javascript RegEx 引擎。大多數現代引擎都很類似，但也可能會存在一些差別。一般這些差別包括轉義字符和反向引用標記。

你如今就能夠打開文本編輯器，當即開始使用其中的一些技巧。你將看到能夠比之前更快地完成許多重構任務。一旦你掌握了這些技巧，就能夠開始研究更多的正則表達式了。

歡迎關注前端公衆號：前端先鋒，獲取前端工程化實用工具包。