日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間:8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
超好用的6種正則表達式,前端開發(fā)人員必知

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

創(chuàng)新互聯(lián)建站服務(wù)項目包括禹城網(wǎng)站建設(shè)、禹城網(wǎng)站制作、禹城網(wǎng)頁制作以及禹城網(wǎng)絡(luò)營銷策劃等。多年來,我們專注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等,向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案,禹城網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前,我們服務(wù)的客戶以成都為中心已經(jīng)輻射到禹城省份的部分城市,未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任!

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

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

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

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

注意:使用該正則表達式時要小心,因為它不會匹配以標點符號結(jié)尾的URL,也可能無法匹配更復(fù)雜的URL。

下面來看看其原理:

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

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

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

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

3. 從文件名中去除無效字符

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

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

使用正則表達式刪除無效字符非常簡單。來看一個例子:

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

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

注意,在字符類中,反斜杠具有特殊含義,必須用另一個反斜杠進行轉(zhuǎn)義:\\。操作符+重復(fù)字符類,以便同時替換無效字符序列,這有助于提升性能??墒÷运挥绊懡Y(jié)果。

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

還有幾個保留的名稱被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

若要去掉保留的名稱,請運行以下代碼:

 
 
 
 
  1. 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中的字符(若其構(gòu)成由豎線字符(|)分隔的單詞之一)。本例中不能使用空字符串作為第二個參數(shù),因為文件沒有名稱。

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

也可以使用字符類采用更緊湊的方式編寫該正則表達式:

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

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

4.用單個空白替換多個空白

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

 
 
 
 
  1. 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 命令正則表達式引擎匹配所有出現(xiàn)的項而不是在首次匹配后即停止

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

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

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

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

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

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

假設(shè)你想匹配文本中包含特定單詞的所有句子。或者你想在搜索結(jié)果中突出顯示這些句子,又或者想將其從文本中刪除。正則表達式/[^.!?]*\bword\b[^.!?]*.?/gi可實現(xiàn)以上需求。以下是其原理:

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

下文將逐步研究該正則表達式:

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

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

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

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

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

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

注意:該正則表達式僅適用于英語,不匹配重音字母或其他語言的字母。

下面是其原理:

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

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

希望這篇文章對你有用!


當(dāng)前題目:超好用的6種正則表達式,前端開發(fā)人員必知
網(wǎng)址分享:http://www.dlmjj.cn/article/djojgee.html