正則表達(dá)式已經(jīng)成為程序員的必備工具。幾乎所有流行的編程語(yǔ)言都支持正則表達(dá)式，原因如下：正則表達(dá)式為開(kāi)發(fā)人員提供了強(qiáng)有力的工具，使之能快速執(zhí)行需要幾十行代碼才能完成的任務(wù)。

[[315831]]

本文主要研究前端開(kāi)發(fā)人員經(jīng)常要面對(duì)的六大文本處理和操作任務(wù)，并進(jìn)一步了解正則表達(dá)式如何簡(jiǎn)化這一過(guò)程。但也只是觸及了正則表達(dá)式潛力之皮毛。

1. 將URL轉(zhuǎn)換為鏈接

假設(shè)文本中有一個(gè)或多個(gè)URL，且均不是HTML錨元素，因此不能單擊。要將url自動(dòng)轉(zhuǎn)換為鏈接，首先需要找到URL，然后用指向URL的的href屬性將每個(gè)URL裝入標(biāo)簽…：

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

注意：使用該正則表達(dá)式時(shí)要小心，因?yàn)樗粫?huì)匹配以標(biāo)點(diǎn)符號(hào)結(jié)尾的URL，也可能無(wú)法匹配更復(fù)雜的URL。

下面來(lái)看看其原理：

• \b 在被稱為“單詞邊界”的位置進(jìn)行匹配。
• (https?|ftp|file) 匹配字符“https”，或“http”，或“ftp”，或“file”
• : 按字面意義匹配冒號(hào)字符
• \/ 按字面意義匹配正斜杠字符
• \S 匹配除空白之外的單個(gè)字符
• + 與前一項(xiàng)匹配一次或多次
• [\/\w] 匹配正斜杠或單詞字符。如果沒(méi)有這個(gè)，該正則表達(dá)式將匹配URL結(jié)尾的任何標(biāo)點(diǎn)符號(hào)。
• g 命令正則表達(dá)式引擎匹配所有出現(xiàn)的項(xiàng)而不是在首次匹配后即停止
• $& 在replace()的第二個(gè)參數(shù)中，將匹配的子字符串插入到替換字符串中

2. 刪除重復(fù)的單詞

文章和教程包含不必要的重復(fù)單詞并不少見(jiàn)。即使是專業(yè)作家也要為這些錯(cuò)誤進(jìn)行校對(duì)。在谷歌新聞上簡(jiǎn)單地搜索“the”，就會(huì)發(fā)現(xiàn)數(shù)百家知名新聞機(jī)構(gòu)的文章中都有重復(fù)的“the”。幸運(yùn)的是，正則表達(dá)式可以用一行代碼修復(fù)這個(gè)問(wèn)題：

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

• \b 在“單詞邊界”的位置進(jìn)行匹配(后跟或前接ASCII字母、數(shù)字或下劃線的位置)。
• \w 匹配單詞字符(ASCII字母、數(shù)字或下劃線)
• + 與前一項(xiàng)匹配一次或多次
• \s 匹配空白字符
• + 將前一項(xiàng)匹配一次或多次，以便能夠檢測(cè)到含多個(gè)空白字符的重復(fù)單詞
• \1 反向引用和匹配的文本是否與第一對(duì)括號(hào)中匹配的文本相同
• \b 匹配單詞邊界
• g 命令正則表達(dá)式引擎匹配所有出現(xiàn)的項(xiàng)而不是在首次匹配后即停止
• i 使搜索不區(qū)分大小寫(忽略大小寫差異)
• $1 在replace()的第二個(gè)參數(shù)中插入第一對(duì)括號(hào)中匹配的文本

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

在提供要下載的文件時(shí)，文件名中不應(yīng)包含某些字符。例如，在Windows操作系統(tǒng)中，以下字符在文件名中無(wú)效，應(yīng)刪除：

• <(小于)
• > (大于)
• : (冒號(hào))
• “ (雙引號(hào))
• / (正斜杠)
• \ (反斜杠)
• | (豎線)
• ? (問(wèn)號(hào))
• * (星號(hào))

使用正則表達(dá)式刪除無(wú)效字符非常簡(jiǎn)單。來(lái)看一個(gè)例子：

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

[], 被稱為字符類，可匹配方括號(hào)之間的一個(gè)字符。因此，通過(guò)將所有無(wú)效字符放在其中并在正則表達(dá)式的末尾添加一個(gè)全局(g)標(biāo)志，可從字符串中有效刪除這些字符。

注意，在字符類中，反斜杠具有特殊含義，必須用另一個(gè)反斜杠進(jìn)行轉(zhuǎn)義:\\。操作符+重復(fù)字符類，以便同時(shí)替換無(wú)效字符序列，這有助于提升性能。可省略它而不影響結(jié)果。

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

還有幾個(gè)保留的名稱被Windows內(nèi)部用于各種任務(wù)，不允許作為文件名。保留的名稱如下:

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

若要去掉保留的名稱，請(qǐng)運(yù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'); 

基本上，這段代碼命令正則表達(dá)式引擎替換str中的字符(若其構(gòu)成由豎線字符(|)分隔的單詞之一)。本例中不能使用空字符串作為第二個(gè)參數(shù)，因?yàn)槲募](méi)有名稱。

注意，若字符串包含任何附加字符，則不會(huì)被替換。例如，“con”會(huì)被替換，但“concord”不會(huì)，這是一個(gè)有效的文件名。這是通過(guò)在正則表達(dá)式中使用^和$來(lái)實(shí)現(xiàn)的。^匹配字符串的開(kāi)頭，可確保在要匹配的字符串之前沒(méi)有其他字符。$匹配字符串的結(jié)尾。

也可以使用字符類采用更緊湊的方式編寫該正則表達(dá)式：

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

[1–9]匹配1-9的數(shù)字

4.用單個(gè)空白替換多個(gè)空白

當(dāng)呈現(xiàn)網(wǎng)頁(yè)時(shí)，重復(fù)的空白字符將顯示為單個(gè)空白。然而，有時(shí)需要清理用戶輸入或其他數(shù)據(jù)，并將重復(fù)的空白替換為單個(gè)空白。下面將演示如何使用正則表達(dá)式實(shí)現(xiàn)這一點(diǎn):

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

該正則表達(dá)式僅包含兩個(gè)元字符、一個(gè)操作符和一個(gè)標(biāo)記：

• \s 匹配單個(gè)空白字符，包括ASCII空格、制表符、換行符、回車符、垂直制表符和表單換行符
• \s 再次匹配單個(gè)空白字符
• + 與前一項(xiàng)匹配一次或多次
• g 命令正則表達(dá)式引擎匹配所有出現(xiàn)的項(xiàng)而不是在首次匹配后即停止

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

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

請(qǐng)記住，此代碼使用空格(U+0020)字符替換任何類型的空白字符，包括ASCII空格、制表符、換行符、回車符、垂直制表符和表單換行符。因此，如果回車緊跟在制表符之后，那么它們將被一個(gè)空格代替。若這不是目的所在，只想替換相同類型的空白，可用下面的代碼代替:

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

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

5. 尋找包含特定單詞的句子

假設(shè)你想匹配文本中包含特定單詞的所有句子?；蛘吣阆朐谒阉鹘Y(jié)果中突出顯示這些句子，又或者想將其從文本中刪除。正則表達(dá)式/[^.!?]*\bword\b[^.!?]*.?/gi可實(shí)現(xiàn)以上需求。以下是其原理：

const str = "The apple treeoriginated in Central Asia. It is cultivated worldwide. Apple matures in latesummer or autumn."; 
// en.wikipedia.org/wiki/Apple// find sentences that contain the word"apple" 
str.match(/[^.!?]*\bapple\b[^.!?]*.?/gi);// => ["The apple treeoriginated in Central Asia.", "Apple matures in late summer orautumn."] 

下文將逐步研究該正則表達(dá)式：

• [^.!?] 匹配所有除 .， !，及?以外的字符
• * 匹配前一項(xiàng)的零個(gè)或多個(gè)序列
• \b 在“單詞邊界”的位置進(jìn)行匹配(后跟或前接ASCII字母、數(shù)字或下劃線的位置)。
• apple 按字面匹配字符(因?yàn)樗鼌^(qū)分大小寫，所以將i標(biāo)記添加到該正則表達(dá)式的末尾)
• \b 匹配單詞邊界
• [^.!?] 匹配所有除 .，!，及?以外的字符
• * 匹配前一項(xiàng)的零個(gè)或多個(gè)序列
• 匹配除換行符以外的所有字符
• ? 匹配前一項(xiàng)出現(xiàn)零次或一次的項(xiàng)
• g 命令正則表達(dá)式引擎匹配所有出現(xiàn)的項(xiàng)而不是在首次匹配后即停止
• i 使搜索不區(qū)分大小寫

提示：使用Bit (Github)從代碼庫(kù)中“獲取”組件，逐步構(gòu)建UI組件庫(kù)。與團(tuán)隊(duì)一起使用該UI組件庫(kù)，以獲得一致UI、快速開(kāi)發(fā)和無(wú)限合作。輕松將可重用組件導(dǎo)入至任何項(xiàng)目中，使用并更新以實(shí)現(xiàn)跨存儲(chǔ)庫(kù)同步更改。

示例:搜索在bit.dev上共享的React組件

6. 將用戶輸入限制為字母數(shù)字字符

網(wǎng)頁(yè)開(kāi)發(fā)時(shí)的一個(gè)常見(jiàn)任務(wù)是將用戶輸入限制為字母數(shù)字字符(A - z、A - z和0-9)。使用正則表達(dá)式實(shí)現(xiàn)這個(gè)任務(wù)非常簡(jiǎn)單:使用一個(gè)字符類來(lái)定義允許的字符范圍，然后在其上添加一個(gè)量詞來(lái)指定可以重復(fù)的字符的數(shù)量：

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

注意：該正則表達(dá)式僅適用于英語(yǔ)，不匹配重音字母或其他語(yǔ)言的字母。

下面是其原理：

• ^ 匹配字符串的開(kāi)頭。確保在要匹配的字符串之前沒(méi)有其他字符。
• [A-Z0–9] 匹配A和Z之間的字符，或0和9之間的字符。由于這是區(qū)分大小寫的，可將i標(biāo)記添加到該正則表達(dá)式的末尾?；蛘?，可使用無(wú)標(biāo)記的[A-Za-z0-9]。
• + 與前一項(xiàng)匹配一次或多次，因此，輸入項(xiàng)必須至少有一個(gè)非空白字母數(shù)字字符;否則，匹配失敗。若要使字段為可選的，則可以使用*量詞，該量詞與前一項(xiàng)匹配的次數(shù)須大于0。
• $ 匹配字符串的末尾.

花時(shí)間掌握正則表達(dá)式絕對(duì)是一項(xiàng)值得的投資，因?yàn)樗鼘⒂兄诮鉀Q編碼時(shí)遇到的各種問(wèn)題。

希望這篇文章對(duì)你有用!