在編輯器中巧妙地使用正則完成捕獲替換

在編輯器中巧妙地使用正則完成捕獲替換

本次分享的是我一次使用正則在編輯器搜索並完成替換代碼的經歷，之間作優化的時候，須要給文本輸入框添加修飾符 .trim，這樣的 input 框不少，分佈在不少文件，不太可能一個個去找而後去修改，所以想到用正則去匹配線找到這些 input 框，而後再給它加上 .trim, 這樣的話比較精準和省時省力。 並且大部分代碼編輯器支持正則的匹配替換。能夠在編輯器中完成，不過要注意的是，vscode 不支持換行符匹配，只能匹配到一行的文本內容，因此此次我用webstorm去完成，（它30天免費試用，過時後，每次也能夠打開使用30分鐘）

背景

但願給項目中全部輸入框 v-model 都加上 .trim 修飾符，可是改動的地方不少，一個一個改不太可能，因此想到了全局查找和替換， 問題來了，如何去查找？

分析：隨便先找一個代碼看看

<s-input class="input-range-input" @input="handleInputChange" v-model="range_value" :disabled="disabled" />
複製代碼

編寫正則表達式

使用正在表達式查找的話，能夠比較準確的找到，要找到這樣的 v-model 須要知足下面三個條件：

1. v-model= 須要在 s-input 以後，還要排除數字輸入框 input-number 的狀況，中間能夠包括空字符、換行符以及非空字符：

   <s-input(?!-number)[\s\S]*?v-model=
   複製代碼

   • a(?!b) 先行否認斷言：<s-input 只有不在 -number 前面才匹配
   • 惰性匹配 ? : 用 [\s\S]* 匹配空字符、換行符以及非空字符，由於匹配的是任意字符，若是不加 ? 讓其變成惰性匹配，那會查找到文件最後一個 v-model= ，加上後找到第一個就中止下來，因此中間這段用 [\s\S]*?。

2. v-model= 與 > 之間能夠包括空字符、換行符以及非空字符

   v-model=[\s\S]*?>
   複製代碼

   同理，能夠在 v-model 和 > 之間用 [\s\S]*?。

最後完整的表達式就是：

<s-input(?!-number)[\s\S]*?v-model=[\s\S]*?>
複製代碼

---

編輯器查找替換功能

查找

編輯器都自帶搜索替換功能，除了文本查找以外，還可使用正則表達式去查找，如圖所示：

有了這個能夠愉快去寫正則啦，根據上面總結好的正則表達式：

<s-input(?!-number)[\s\S]*?v-model=[\s\S]*?>
複製代碼

根據這個正則在編輯器搜索，最後獲得的結果，是匹配代碼中 <s-input 到 v-model 的全部內容。(vscode沒有搜索到換行的數據，使用 webstorm 能夠搜索獲得)

替換

編輯器的替換，可使用捕獲組合和替換模式

• 捕獲組: 用()包起來設置捕獲組，而後按左括號將組從左到右編號。
• 在正則表達式中：請使用 \number。 例如，正則表達式 (\w+)\s\1 中的 \1 引用第一個捕獲組 (\w+)。
• 在替換模式中：請使用 $number。 例如，已分組的正則表達式 (\d)([a-z]) 定義了兩個組：第一個組包含一個十進制數字，第二個組包含一個 a 到 z 之間的字符。 該表達式在如下字符串中查找四個匹配項：1a 2b 3c 4d。 替換字符串 z$1 僅引用第一個組（$1），並將該字符串轉換爲 z1 z2 z3 z4。

因此把除了 v-model= 以外的都用 () 設置成了捕獲組，這樣在替換模式中就能夠用 $ 去引用。

(<s-input(?!-number)[\s\S]*?)v-model=([\s\S]*?>)
複製代碼

設置成捕獲組以後，咱們能夠在替換的輸入框中用 $1 引用第一個組 (<s-input(?!-number)[\s\S]*?), $2 引用 ([\s\S]*?>)， 把中間 v-model 改爲 v-model.trim=， 完整的替換表達式就是 $1v-model.trim=$2。

由圖所示，編輯器中已經很智能地提示替換後的樣子。

全局替換

最後選擇目錄使用全局替換，檢查是否都匹配正確，和處理特殊的部分代碼，最後確認無誤後替換所有。

總結

大多數狀況，咱們能夠用文本就能夠搜索到想要的內容，因此用的不是不少，但若是你很熟悉正則表達式，用正則能夠更精準地搜索到想找的內容，

另外你想大規模修改相同邏輯的代碼，能夠先匹配找到目標代碼，仔細檢查後修改。

引用

在 Visual Studio 中使用正則表達式

捕獲組