超好用的6種正則表達式，前端開發人員必知
正則表達式已經成為程序員的必備工具。幾乎所有流行的編程語言都支持正則表達式，原因如下：正則表達式為開發人員提供了強有力的工具，使之能快速執行需要幾十行代碼才能完成的任務。
本文主要研究前端開發人員經常要面對的六大文本處理和操作任務，并進一步了解正則表達式如何簡化這一過程。但也只是觸及了正則表達式潛力之皮毛。
1. 將URL轉換為鏈接
假設文本中有一個或多個URL，且均不是HTML錨元素，因此不能單擊。要將url自動轉換為鏈接，首先需要找到URL，然后用指向URL的的href屬性將每個URL裝入標簽…：
- 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."
注意：使用該正則表達式時要小心，因為它不會匹配以標點符號結尾的URL，也可能無法匹配更復雜的URL。
下面來看看其原理：
- \b 在被稱為“單詞邊界”的位置進行匹配。
- (https?|ftp|file) 匹配字符“https”，或“http”，或“ftp”，或“file”
- : 按字面意義匹配冒號字符
- \/ 按字面意義匹配正斜杠字符
- \S 匹配除空白之外的單個字符
- + 與前一項匹配一次或多次
- [\/\w] 匹配正斜杠或單詞字符。如果沒有這個，該正則表達式將匹配URL結尾的任何標點符號。
- g 命令正則表達式引擎匹配所有出現的項而不是在首次匹配后即停止
- $& 在replace()的第二個參數中，將匹配的子字符串插入到替換字符串中
2. 刪除重復的單詞
文章和教程包含不必要的重復單詞并不少見。即使是專業作家也要為這些錯誤進行校對。在谷歌新聞上簡單地搜索“the”，就會發現數百家知名新聞機構的文章中都有重復的“the”。幸運的是，正則表達式可以用一行代碼修復這個問題：
- const str = "This thissentence has has double words.";str.replace(/\b(\w+)\s+\1\b/gi, '$1');//=> "This sentence has double words."
- \b 在“單詞邊界”的位置進行匹配(后跟或前接ASCII字母、數字或下劃線的位置)。
- \w 匹配單詞字符(ASCII字母、數字或下劃線)
- + 與前一項匹配一次或多次
- \s 匹配空白字符
- + 將前一項匹配一次或多次，以便能夠檢測到含多個空白字符的重復單詞
- \1 反向引用和匹配的文本是否與第一對括號中匹配的文本相同
- \b 匹配單詞邊界
- g 命令正則表達式引擎匹配所有出現的項而不是在首次匹配后即停止
- i 使搜索不區分大小寫(忽略大小寫差異)
- $1 在replace()的第二個參數中插入第一對括號中匹配的文本
3. 從文件名中去除無效字符
在提供要下載的文件時，文件名中不應包含某些字符。例如，在Windows操作系統中，以下字符在文件名中無效，應刪除：
- <(小于)
- > (大于)
- : (冒號)
- “ (雙引號)
- / (正斜杠)
- \ (反斜杠)
- | (豎線)
- ? (問號)
- * (星號)
使用正則表達式刪除無效字符非常簡單。來看一個例子：
- const str ="https://en.wikipedia.org/";str.replace(/[<>|:"*?\\/]+/g,''); // =>"httpsen.wikipedia.org"
[], 被稱為字符類，可匹配方括號之間的一個字符。因此，通過將所有無效字符放在其中并在正則表達式的末尾添加一個全局(g)標志，可從字符串中有效刪除這些字符。
注意，在字符類中，反斜杠具有特殊含義，必須用另一個反斜杠進行轉義:\\。操作符+重復字符類，以便同時替換無效字符序列，這有助于提升性能。可省略它而不影響結果。
請記住，除非想用另一個字符替換無效字符，否則replace()方法的第二個參數必須是空字符串。
還有幾個保留的名稱被Windows內部用于各種任務，不允許作為文件名。保留的名稱如下:
CON, PRN, AUX, NUL, COM1, COM2, COM3, COM4, COM5,COM6, COM7, COM8, COM9, LPT1, LPT2, LPT3, LPT4, LPT5, LPT6, LPT7, LPT8, andLPT9
若要去掉保留的名稱，請運行以下代碼：
- 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');
基本上，這段代碼命令正則表達式引擎替換str中的字符(若其構成由豎線字符(|)分隔的單詞之一)。本例中不能使用空字符串作為第二個參數，因為文件沒有名稱。
注意，若字符串包含任何附加字符，則不會被替換。例如，“con”會被替換，但“concord”不會，這是一個有效的文件名。這是通過在正則表達式中使用^和$來實現的。^匹配字符串的開頭，可確保在要匹配的字符串之前沒有其他字符。$匹配字符串的結尾。
也可以使用字符類采用更緊湊的方式編寫該正則表達式：
- str.replace(/^(CON|PRN|AUX|NUL|COM[1-9]|LPT[1-9])$/i,'file');
[1–9]匹配1-9的數字
4.用單個空白替換多個空白
當呈現網頁時，重復的空白字符將顯示為單個空白。然而，有時需要清理用戶輸入或其他數據，并將重復的空白替換為單個空白。下面將演示如何使用正則表達式實現這一點:
- 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."
該正則表達式僅包含兩個元字符、一個操作符和一個標記：
- \s 匹配單個空白字符，包括ASCII空格、制表符、換行符、回車符、垂直制表符和表單換行符
- \s 再次匹配單個空白字符
- + 與前一項匹配一次或多次
- g 命令正則表達式引擎匹配所有出現的項而不是在首次匹配后即停止
結果是替換所有重復至少兩次的空白字符。請注意，上面示例中的結果在開頭仍然有一個應刪除的空白字符。為此，只需將trim()函數添加到語句的末尾：
- str.replace(/\s\s+/g, '').trim();// => "My opinions may have changed, but not the fact thatI'm right."
請記住，此代碼使用空格(U+0020)字符替換任何類型的空白字符，包括ASCII空格、制表符、換行符、回車符、垂直制表符和表單換行符。因此，如果回車緊跟在制表符之后，那么它們將被一個空格代替。若這不是目的所在，只想替換相同類型的空白，可用下面的代碼代替:
- str.replace(/(\s)\1+/g,'$1').trim();
\1 是一個反向引用，并與第一對括號(\s)中匹配的字符匹配。可在replace()的第二個參數中使用$1替換它們，它插入了在括號中匹配的字符。
5. 尋找包含特定單詞的句子
假設你想匹配文本中包含特定單詞的所有句子。或者你想在搜索結果中突出顯示這些句子，又或者想將其從文本中刪除。正則表達式/[^.!?]*\bword\b[^.!?]*.?/gi可實現以上需求。以下是其原理：
- 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."]
下文將逐步研究該正則表達式：
- [^.!?] 匹配所有除 .， !，及?以外的字符
- * 匹配前一項的零個或多個序列
- \b 在“單詞邊界”的位置進行匹配(后跟或前接ASCII字母、數字或下劃線的位置)。
- apple 按字面匹配字符(因為它區分大小寫，所以將i標記添加到該正則表達式的末尾)
- \b 匹配單詞邊界
- [^.!?] 匹配所有除 .，!，及?以外的字符
- * 匹配前一項的零個或多個序列
- 匹配除換行符以外的所有字符
- ? 匹配前一項出現零次或一次的項
- g 命令正則表達式引擎匹配所有出現的項而不是在首次匹配后即停止
- i 使搜索不區分大小寫
提示：使用Bit (Github)從代碼庫中“獲取”組件，逐步構建UI組件庫。與團隊一起使用該UI組件庫，以獲得一致UI、快速開發和無限合作。輕松將可重用組件導入至任何項目中，使用并更新以實現跨存儲庫同步更改。
示例:搜索在bit.dev上共享的React組件
6. 將用戶輸入限制為字母數字字符
網頁開發時的一個常見任務是將用戶輸入限制為字母數字字符(A - z、A - z和0-9)。使用正則表達式實現這個任務非常簡單:使用一個字符類來定義允許的字符范圍，然后在其上添加一個量詞來指定可以重復的字符的數量：
- const input1 = "John543";
- const input2 = ":-)";/^[A-Z0-9]+$/i.test(input1); // → true
- /^[A-Z0-9]+$/i.test(input2); // →false
注意：該正則表達式僅適用于英語，不匹配重音字母或其他語言的字母。
下面是其原理：
- ^ 匹配字符串的開頭。確保在要匹配的字符串之前沒有其他字符。
- [A-Z0–9] 匹配A和Z之間的字符，或0和9之間的字符。由于這是區分大小寫的，可將i標記添加到該正則表達式的末尾。或者，可使用無標記的[A-Za-z0-9]。
- + 與前一項匹配一次或多次，因此，輸入項必須至少有一個非空白字母數字字符;否則，匹配失敗。若要使字段為可選的，則可以使用*量詞，該量詞與前一項匹配的次數須大于0。
- $ 匹配字符串的末尾.
花時間掌握正則表達式絕對是一項值得的投資，因為它將有助于解決編碼時遇到的各種問題。
希望這篇文章對你有用!
