超好用的6種正則表達式,前端開發人員必知!

2021-01-08 讀芯術

全文共4719字，預計學習時長14分鐘

來源：Pexels

正則表達式已經成為程式設計師的必備工具。幾乎所有流行的程式語言都支持正則表達式，原因如下：正則表達式為開發人員提供了強有力的工具，使之能快速執行需要幾十行代碼才能完成的任務。

本文主要研究前端開發人員經常要面對的六大文本處理和操作任務，並進一步了解正則表達式如何簡化這一過程。但也只是觸及了正則表達式潛力之皮毛。

1. 將URL轉換為連結

假設文本中有一個或多個URL，且均不是HTML錨元素，因此不能單擊。要將url自動轉換為連結，首先需要找到URL，然後用指向URL的<a>的href屬性將每個URL裝入標籤<a>…</a>：

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的數字

來源：Pexels

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。

· $ 匹配字符串的末尾.

來源：Pexels

花時間掌握正則表達式絕對是一項值得的投資，因為它將有助於解決編碼時遇到的各種問題。

希望這篇文章對你有用!

留言點讚關注

我們一起分享AI學習與發展的乾貨

如轉載，請後臺留言，遵守轉載規範

相關焦點

  • 正則表達式
    在我看來，正則表達式的主要用途有兩種：①查找特定的信息②查找並編輯特定的信息，也就是我們經常用的替換。。比如我們要在Word，記事本等裡面使用快捷鍵Ctrl+F，進行查找一個特定的字符，或者替換一個字符，這就使用了正則表達式。         正則表達式的功能非常強大，尤其是在文本數據進行處理中顯得更加突出。
  • Python正則表達式急速入門
    正則表達式在程序開發中會經常用到，比如數據（格式）驗證、替換字符內容以及提取字符串內容等等情況都會用到，但是目前許多開發人員對於正則表達式只是處於了解或者是基本會用的階段。一旦遇到大批量使用正則表達式的情況（例如網絡爬蟲）可以說基本上就抓瞎了。這篇文章我將帶領大家利用 Python 來學習一下正則表達式。
  • 實戰JS正則表達式
    [新建正則表達式]：var  regexp = /aabb/g; //g可省 var  regexp = new Regexp("xyz","g"); //第二個參數可省區別在於：1.採用字面量的寫法新建的正則表達式對象在代碼編譯時就會生成，是平常開發中常用的方式；2.採用構造函數生成的正則對象要在代碼運行時生成。
  • 正則表達式真的很6,可惜你不會寫
    文章提綱：元字符重複限定符分組轉義條件或區間零寬斷言捕獲和非捕獲反向引用貪婪和非貪婪反義正則表達式在幾乎所有語言中都可以使用，無論是前端的 JavaScript、還是後端的 Java、c#。他們都提供相應的接口 / 函數支持正則表達式。但很神奇的是：無論你大學選擇哪一門計算機語言，都沒有關於正則表達式的課程給你修，在你學會正則之前，你只能看著那些正則大師們，寫了一串外星文似的字符串，替代了你用一大篇幅的 if else 代碼來做一些數據校驗。
  • 看完你就會正則表達式了
    最近看了一篇關於正則表達式的學習筆記，覺得講的非常好，更有圖形化的神器相助，想不學會都難，所以想轉給大家看看。話說不是開發為啥要學正則表達式這種看似很晦澀的東西呢，因為現在很多搜索的場景都是支持正則表達式的，學會了正則表達式就有如一把利劍在手。本文較長，建議抽40分鐘完整的時間一次讀完再慢慢消化。
  • JavaScript高級什麼是正則以及正則表達式的簡單運用
    在實際開發中 ，經常會用到一些表單的驗證 ，提交表單的時候一般都會預校驗 ，比如手機號填寫是否合格 ，用戶暱稱填寫是否規範等 ，這些就要用到正則表達式什麼是正則表達式？用於匹配規律規則的表達式，正則表達式最初是科學家對人類神經系統的工作原理的早期研究，現在在程式語言中有廣泛的應用。正則表通常被用來檢索、替換那些符合某個模式(規則)的文本。
  • 關於前端開發的20篇文檔與指南
    所以本文整理一些有用的信息，希望可以幫助相關領域的前端開發人員。1. I want to use基於Can I use的數據和功能，這款應用給予你選擇一組前端開發特性的能力，並會讀取出一個全球性用戶能夠使用它的百分比。
  • 刨根究底正則表達式(1):開篇
    正則表達式目前市面上並不缺乏專業著作，比如那本被譽為正則表達式學習聖經的《精通正則表達式》就很值得一讀，另外該書的譯者餘晟先生所寫的《正則指引》也不錯。如果僅用於入門，則《正則表達式必知必會》肯定不能錯過，還有網上流傳極廣的《正則表達式30分鐘入門教程》也是不錯的入門資料。但是，結合我自身痛苦的正則表達式學習經歷和運用體會，僅有這些是遠遠不夠的。
  • Python 正則表達式
    最簡單的正則表達式就是普通字符串，可以匹配其自身。比如，正則表達式 『hello』 可以匹配字符串 『hello』。要注意的是，正則表達式並不是一個程序，而是用於處理字符串的一種模式，如果你想用它來處理字符串，就必須使用支持正則表達式的工具，比如 Linux 中的 awk, sed, grep，或者程式語言 Perl, Python, Java 等等。
  • Python正則表達式的7個使用典範
    但是，Python中的正則表達式在實際使用過程中還是有一些細小的差別。將介紹Python中對字符串進行搜索和查找的一些方法，討論如何使用分組來處理我們查找到的匹配對象的子項。使用的Python中正則表達式的模塊通常叫做『re'。
  • 正則表達式在VBA中間是如何應用?正則表達式的實現方式?
    Hi，大家好，本章節開始將會從零開始和大家用圖文的方式，讓你從零基礎學會正則表達式！有興趣的小夥伴可以持續關注我，或者在專欄中進行查看自我學習，願與君攜手前行！在上一個章節說到正則表達式的入門級知識點，本節將會與大家分享一下正則表達式的是具體實現方式是怎麼樣的？
  • 開發人員必知的20+HTML5技巧(下)
    今天中星小編繼續為你帶來《開發人員必知的20+HTML5技巧（下）》點擊此處，回顧《開發人員必知的20+HTML5技巧（上）》假設一個網站有名稱、副標題分別用<h1>、<h2>標籤來標記，在HTML4中還沒有一種能夠將兩者之間的關係用很好的語義關係來描述的方法，此外，當使用h2在頁面中顯示其它標題時，在層級方面問題就更多。
  • python正則表達式
    4''' 5#7.2.1創建正則表達式對象 6''' 7python中所有正則表達式的函數都在re模塊中，向 re.compile()傳入一個字符串值， 8表示正則表達式，它將返回一個 Regex 模式對象（或者就簡稱為 Regex 對象）。
  • C++、Java、JavaScript中的正則表達式
    「^[a-zA-Z]w{5,17}@126.com」就是我們所說的正則表達式，用Java的簡單實現如下：下面這個表格是Java中的正則表達式常用符號的含意(只抽取了其常用的部分進行說明，就這些部分其實可以解決關於正則表達式的絕大多數的問題了)。
  • Python正則表達式總結
    正則表達式 的起源、發展、流派、語法、引擎、優化等相關知識，今天我們主要來學習一下 正則表達式在 Python語言 中的應用！在Python 3.6以前版本是直接將常量寫在re.py中，使用枚舉的好處就是方便管理和使用！下面我們來快速學習這些常量的作用及如何使用他們，按常用度排序！1.
  • 正則表達式真的很騷,可惜你不會寫!!!
    文章提綱：元字符重複限定符分組轉義條件或區間正則表達式在幾乎所有語言中都可以使用，無論是前端的JavaScript、還是後端的Java、c#。他們都提供相應的接口/函數支持正則表達式。但很神奇的是：無論你大學選擇哪一門計算機語言，都沒有關於正則表達式的課程給你修，在你學會正則之前，你只能看著那些正則大師們，寫了一串外星文似的字符串，替代了你用一大篇幅的if else代碼來做一些數據校驗。
  • 給JAVA程式設計師的正則表達式一課
    「不會正則表達式，就算寫遍代碼也嘛不是」。說到正則表達式，可能動態語言的碼農Perl，Python，JS甚至是Golang的開發人員可能都熟悉。對Java碼農來說，可能CURD手到擒來，Spring Stuts Hibernat耳聞能詳，但是說到Regex RE模式，可能熟練的少。那麼，今天蟲蟲就來給廣大Java碼農來補補正則的課。
  • 【第977期】正則表達式回溯法原理
    前言一般很多人對待表達式都是要用的時候，取查一下，你是嗎？今日早讀文章由@老姚授權分享。
  • Matlab 正則表達式
    正則表達式是一個非常重要的編程概念，主流的程式語言都對正則表達式進行了很好的支持，Matlab也不例外。本期推文就讓我們來總結一下Matlab提供的正則表達式吧！假設我們要在文本中搜索美國的社會安全號碼，號碼的格式是 000-00-0000，那麼匹配它的正則表達式可以寫為 \d{3}\-\d{2}\-\d{4}。注意到 - 是特殊字符，所以用 \- 進行了轉義。
  • 正確的正則表達式學習方法是放棄抵抗^_^
    \目前以廣泛應用在網站開發、遊戲軟體開發、數據採集、機器學習等多個領域。\一般情況下Python是Java的20%，所以說人生苦短，我用Python。""";]'string = """Python是一門面向對象的程式語言，誕生於1991年;\目前以廣泛應用在網站開發、遊戲軟體開發、數據採集、機器學習等多個領域。\一般情況下Python是Java的20%，所以說人生苦短，我用Python。"""