本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。

幾乎所有流行的編程語(yǔ)言都支持正則表達(dá)式，因?yàn)檎齽t實(shí)在是太強(qiáng)大了，它能讓我們?cè)拘枰獢?shù)十行代碼才能完成的，正則大哥一行就能搞定了。

在本文中，我們將研究前端開(kāi)發(fā)人員經(jīng)常必須處理的6個(gè)文本處理和操作，并了解正則表達(dá)式是如何簡(jiǎn)化這個(gè)過(guò)程的。

[[331443]]

查找包含特定單詞的句子

假設(shè)我們想要匹配文本中包含特定單詞的所有句子。因?yàn)樾枰谒阉鹘Y(jié)果中顯示這些句子，或者想從文本中刪除它們。正則表達(dá)式/[^.!?]*\bword\b[^.!?]*.?/gi可以幫我們做到這一點(diǎn)。如下所示：

const str = "The apple tree originated in Central Asia. It is cultivated worldwide. Apple matures in late summer or autumn." 
 
// 查找包含單詞“ apple”的句子 
str.match(/[^.!?]*\bapple\b[^.!?]*.?/gi) 
 
// 輸出結(jié)果 
// => ["The apple tree originated in Central Asia.", "Apple matures in late summer or autumn."] 

接著，我們來(lái)看此正則表達(dá)式含義：

• [^.!?] 表示匹配任務(wù)字符，除了 ., !和?
• *匹配[^.!?]結(jié)果的 0 次或者多次
• \b 匹配單詞的邊界
• apple 就是匹配apple(因?yàn)樗鼌^(qū)分大小寫(xiě)，我們?cè)谡齽t表達(dá)式的末尾添加i標(biāo)志)
• \b 匹配單詞的邊界
• [^.!?] 表示匹配任務(wù)字符，除了 ., !和?
• *匹配[^.!?]結(jié)果的 0 次或者多次
• .匹配任何字符，除了換行
• ?匹配.所匹配到的結(jié)果的 0 次或者 1 次
• g 告訴正則表達(dá)式引擎匹配所有匹配項(xiàng)，而不是在第一次匹配后停止
• i 使搜索不區(qū)分大小寫(xiě)

從文件名中去除無(wú)效字符

下載的文件時(shí)，其名稱中不應(yīng)包含某些字符。例如，在 Windows 中，以下字符在文件名中無(wú)效，應(yīng)將其刪除：

• <
• >
• :
• “
• /
• \
• |
• ?
• *

使用正則表達(dá)式，去除無(wú)效字符非常簡(jiǎn)單。讓我們看一個(gè)例子

const str = "https://en.wikipedia.org/" 
 
str.replace(/[<>|:"*?\\/]+/g, '') 
// => "httpsen.wikipedia.org" 

[] 稱為字符類，JS 會(huì)把字符串與方括號(hào)之間的字符之一匹配，在配合全局(g)標(biāo)志，我們可以有效地從字符串中去除方括號(hào)內(nèi)的字符。

注意，在字符類中，反斜杠有特殊含義，必須用另一個(gè)反斜杠進(jìn)行轉(zhuǎn)義:\\。+操作符表示重復(fù)字符類，以便同時(shí)替換一系列無(wú)效字符，這有利于提高性能。當(dāng)然可以省略，對(duì)結(jié)果也沒(méi)有影響。

請(qǐng)記住，除非希望將無(wú)效字符替換為另一個(gè)字符，否則replace()方法的第二個(gè)參數(shù)必須為空字符串。

Windows 內(nèi)部還使用了幾個(gè)保留名稱來(lái)執(zhí)行各種任務(wù)，并且這些保留名稱不允許用作文件名，保留名稱如下：

CON, PRN, AUX, NUL, COM1, COM2, COM3, COM4, COM5, COM6, COM7, COM8, COM9, LPT1, LPT2, LPT3, LPT4, LPT5, LPT6, LPT7, LPT8, 和 LPT9

如果您想了解更多信息，Microsoft的Windows開(kāi)發(fā)中心提供了有關(guān)有效文件名的詳盡文章。

要排除保留名稱，可以使用以下代碼：

str.replace(/^(CON|PRN|AUX|NUL|COM1|COM2|COM3|COM4|COM5|COM6|COM7|COM8|COM9|LPT1|LPT2|LPT3|LPT4|LPT5|LPT6|LPT7|LPT8|LPT9)$/i, 'file') 

上面代碼主要是將保留字替換成指定的字符。

請(qǐng)注意，如果字符串包含非保留字其他字符，則不會(huì)替換。例如，會(huì)把“con”替換掉，但不會(huì)替換“concord”，所以 這是有效的文件名。

其中 ,^匹配字符串的開(kāi)頭。它確保沒(méi)有其他字符出現(xiàn)在我們要匹配的字符串之前，$則匹配字符串的結(jié)尾。

我們還可以通過(guò)使用字符類以更簡(jiǎn)單方式來(lái)簡(jiǎn)化該正則：

str.replace(/^(CON|PRN|AUX|NUL|COM[1-9]|LPT[1-9])$/i, 'file') 

[1–9]匹配 1 到 9 之間的數(shù)字。

用單個(gè)空格替換多個(gè)空格

當(dāng)網(wǎng)頁(yè)渲染時(shí)，重復(fù)的空格字符被顯示為單個(gè)空格。但是，有時(shí)我們希望用戶輸入或其他數(shù)據(jù)中包含的多個(gè)空格，我們只想用用單個(gè)空格來(lái)表示。使用正則表達(dá)式可以很簡(jiǎn)單的做到這點(diǎn)：

const str = "  My    opinions may  have changed,    but not the fact that I'm right." 
 
str.replace(/\s\s+/g, ' ') 
// => " My opinions may have changed, but not the fact that I'm right." 

此正則表達(dá)式僅包含兩個(gè)元字符，一個(gè)運(yùn)算符和一個(gè)標(biāo)志位：

• \s匹配單個(gè)空格字符，包括ASCII空格，制表符，換行符，回車符，垂直制表符和換頁(yè)符
• \s 再次匹配一個(gè)空格字符
• +與上一項(xiàng)匹配一次或多次，也就是匹配一個(gè)或多個(gè)空格
• g 告訴正則表達(dá)式引擎匹配所有匹配項(xiàng)，而不是在第一次匹配后停止

上面的結(jié)果是替換了至少重復(fù)兩次的所有空白字符。請(qǐng)注意，上面示例中的結(jié)果在開(kāi)始時(shí)仍具有空白字符，應(yīng)將其刪除。為此，只需將trim()函數(shù)添加到語(yǔ)句的末尾：

str.replace(/\s\s+/g, ' ').trim() 
 
// => "My opinions may have changed, but not the fact that I'm right." 

請(qǐng)記住，此代碼用空格(U + 0020)字符替換任何類型的空格字符，包括ASCII空格，制表符，換行符，回車符，垂直制表符和換頁(yè)符。因此，如果回車符緊跟在制表符之后，它們將被空格替換。如果這不是我們的意圖，并且只想替換相同類型的空格，請(qǐng)改用以下代碼：

str.replace(/(\s)\1+/g, '$1').trim(); 

\1是一個(gè)反向引用，與在第一對(duì)括號(hào)(\s)中匹配的相同字符匹配。要替換它們，我們?cè)趓eplace()的第二個(gè)參數(shù)中使用$1，該參數(shù)將在括號(hào)中插入匹配的字符。

限制用戶只能輸入數(shù)字或字母

Web開(kāi)發(fā)過(guò)程中的一項(xiàng)常見(jiàn)表單操作就是限制用戶輸入。比如，我們想將用戶限制為數(shù)字或者字母。同樣，使用正則，很簡(jiǎn)單就能做到：使用字符類定義允許的字符范圍，然后在其后附加一個(gè)量詞以指定可以重復(fù)的字符數(shù)：

const input1 = "John543"; 
const input2 = ":-)"; 
/^[A-Z0-9]+$/i.test(input1);    // → true 
/^[A-Z0-9]+$/i.test(input2);    // → false 

運(yùn)作方式如下：

• ^匹配字符串的開(kāi)頭，它確保沒(méi)有其他字符出現(xiàn)在我們要匹配的字符串之前。
• [A-Z0–9]匹配介于A和Z之間或介于0和9之間的字符。由于這是區(qū)分大小寫(xiě)的，因此我們將i標(biāo)志，表示忽略大小寫(xiě)。或者，我們也可以使用[A-Za-z0–9]來(lái)代替。
• + 匹配一次或多次。因此，輸入必須至少包含一個(gè)非空白的字母數(shù)字字符;否則，匹配失敗。如果要使該字段為可選字段，則可以使用*量詞，該量詞與前面的項(xiàng)匹配零次或多次。
• $匹配字符串的結(jié)尾。

將網(wǎng)址變成鏈接

假設(shè)我們?cè)谖谋局杏幸粋€(gè)或多個(gè)不是 HTML 錨元素的網(wǎng)址，因此無(wú)法點(diǎn)擊。我們希望將 URL 自動(dòng)轉(zhuǎn)換為鏈接。為此，我們首先需要找到 URL，然后將每個(gè) URL 包裹在…標(biāo)記中，并使用的href屬性指向該URL：

const str = "Visit https://en.wikipedia.org/ for more info."; 
str.replace(/\b(https?|ftp|file):\/\/\S+[\/\w]/g, '<a href="$&">$&</a>') 
 
// => "Visit <a href="https://en.wikipedia.org/">https://en.wikipedia.org/</a> for more info." 

來(lái)看看這段代碼是如何工作的：

• \b匹配單詞邊界的位置
• (https?|ftp|file) 匹配字符https，http，ftp或file。
• : 從字面上匹配冒號(hào)
• \/ 從字面上匹配正斜杠字符
• \S 匹配任何非空格的單個(gè)字符
• + 匹配上一項(xiàng)一次或多次
• [\/\w] 匹配正斜杠或單詞字符。如果沒(méi)有這個(gè)，則正則表達(dá)式將匹配URL末尾的所有標(biāo)點(diǎn)符號(hào)
• g告訴正則表達(dá)式引擎匹配所有匹配項(xiàng)，而不是在第一次匹配后停止
• $& 在 replace() 的第二個(gè)參數(shù)中，將匹配的子字符串插入替換字符串中

刪除重復(fù)的單詞

有時(shí)，我們會(huì)發(fā)現(xiàn)有的文章單詞重復(fù)了，如果通過(guò)遍歷來(lái)去重，就很麻煩。幸運(yùn)的是，正則僅用一行代碼就能解決此問(wèn)題：

const str = "This this sentence has has double words." 
 
str.replace(/\b(\w+)\s+\1\b/gi, '$1') 
 
// => "This sentence has double words." 

• \b 匹配單詞的邊界
• \w 匹配單詞字符
• + 匹配上一項(xiàng)的一次或多次
• \1 是一個(gè)反向引用，它表示在第一對(duì)括號(hào)中所匹配的文本
• \b 匹配單詞邊界
• g 告訴正則表達(dá)式引擎匹配所有匹配項(xiàng)，而不是在第一次匹配后停止
• i 忽略大小寫(xiě)
• $1表示分組的第一個(gè)文本內(nèi)容

總結(jié)

正則表達(dá)式已成為任何程序員必備的技能之一。在本文中，我們研究了前端開(kāi)發(fā)人員如何利用正則表達(dá)式執(zhí)行各種任務(wù)。但是，我們只是挖掘了正則表達(dá)式一些基礎(chǔ)面。

多花點(diǎn)時(shí)間來(lái)學(xué)習(xí)正則，我覺(jué)得這是很值得的，有時(shí)候我們遇到到很復(fù)雜的規(guī)則時(shí)，當(dāng)你的有同事正在絞盡腦汁寫(xiě)著上百行的代碼，你只用一句正則就能搞定，我相信，你的同事將對(duì)你刮目相看。加油!!!