【JS複習筆記】05 正則表達式

来源:http://www.cnblogs.com/vvjiang/archive/2016/01/23/5152758.html
-Advertisement-
Play Games

好吧,正則表達式,我從來沒記過。以前要用的時候都是網上Copy一下的。這裡還是扯一下吧,以後要是有要用到的正則表達式那麼就收集到這個帖子里。(儘管我認為不會,因為我根本就不是一個專業的前端,我只是來划下水的\(^o^)/)應用範圍:正則表達式主要應用於對字元串中的信息實現查找,替換和提取操作。可處理...


好吧,正則表達式,我從來沒記過。以前要用的時候都是網上Copy一下的。

這裡還是扯一下吧,以後要是有要用到的正則表達式那麼就收集到這個帖子里。(儘管我認為不會,因為我根本就不是一個專業的前端,我只是來划下水的\(^o^)/)

應用範圍:正則表達式主要應用於對字元串中的信息實現查找,替換和提取操作。

可處理正則表達式的方法有6個:

regexp.exec,regexp.test,string.match,string.replace,string.search和string.split

應用原因:在JS中,正則表達式相對於等效的字元串處理來說,有著顯著的性能優勢。

缺點:正如大部分人所看到的,這個東西有的時候光是看起來就很複雜和難懂。起碼你讓我這種菜去維護一個正則表達式我在網上Copy不到,一般都會用非正則表達式的方式去處理,美其名曰:代碼可讀性!

JS中正則表達式必需寫在一行中,空白需要特別註意。

下麵上一段代碼:

var myRegExp=/^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;
var url="http://www.ora.com:8041/goodparts?q#fragment";
var result=myRegExp.exec(url);

看到上面這段代碼你知道什麼意思嗎,絕大多數人不知道,知道的人也要看半天。這就是為什麼大家都不願意寫這玩意。好了,這章就這樣吧,大家散了吧。

即使如此,我還是自己要寫下去,因為他實現的效果是這樣的:

result的結果是下麵這個數組:

["http://www.ora.com:8041/goodparts?q#fragment", "http", "//", "www.ora.com", "8041", "goodparts", "q", "fragment"]

這就是我為什麼繼續寫下去的原因所在。

好吧,讓我們一起學學這蛋疼又犀利的語法吧:

  • ^     表示字元串以下麵匹配的方式開始
  • (?:([A-Za-z]+):)?   這個是套著捕獲分組1的非捕獲分組,必須後面跟著一個冒號才匹配(記住這裡的冒號才匹配是由後面那個冒號決定的),匹配一個協議名,也就是http。
    • (?:)   表示一個非捕獲型分組
    • 尾碼? 表示這個分組是可選的,他表示重覆0次或者一次。就比如你輸入的url為www.baidu.com,不帶協議名也是可以匹配的。
    • (...)   表示一個捕獲型分組。一個捕獲型分組會複製它所匹配的文本,並將其放在result數組裡。每個捕獲分組都會被指定一個編號。第一個捕獲分組的編號是1,所以result[1]表示它。result[0]就是原字元串。
    • [...]   表示一個字元類。A-Za-z其實很好理解,就是26個大寫字母和26個小寫字母。-代表範圍。
    • 尾碼+ 表示這個字元類會被匹配一次或者多次。
    • 後面那個: 它表示匹配的字元串必須後面跟著一個冒號
  •   (\/{0,3})   這個是捕獲分組2,這個因數匹配的是兩個左斜杠
    • \/     表示的就是一個/,可以理解為\n一樣的轉義字元。
    • {0,3} 表示/這個東西會被匹配0到3次
  • ([0-9.\-A-Za-z]+) 這個是捕獲分組3,匹配一個www.baidu.com之類的東西,由一個或多個字母和數字,以及 .- 兩個字元組成。也就是說你的網址是www.baidu.....----com---也是正確的
  • (?::(\d+)?  這個是套著捕獲分組4的非捕獲分組,匹配的是埠號。也就是以:開頭的數字。同事將這個數字捕獲後放入結果數組  
    • \d 表示的是一個數字字元,[0-9]也可以實現一樣的效果
  • (?:\/([^?#]*))?   這又是一個套著捕獲分組5的非捕獲分組,它捕獲了goodparts
    • (?:\/(...))? 匹配以左斜杠/開頭的字串0到1次
    • [^?#]    匹配非#的所有字元,^表示非的意思
    • 尾碼*  表示被匹配0次或者多次,和尾碼+差不多,不過+是從1開始,
  • (?:\?([^#]*))? 同上吧,類似的,自己應該可以理解了吧
  • (?:#(.*))?  大致同上,
    • .  會匹配除行結束符以外的所有字元
  • $   表示字元串以上面那些匹配的方式結束

老實說,我照著書看完,又把這些話歸納總結出來,然後我就一直在想一個問題。

到底我是什麼時候覺得正則表達式很難的呢?

是我還超級菜,並且還不愛學的時候。看什麼都覺得難,再加上人也浮躁,不想沉下心來去學,所以形成了一個這樣的印象。如今看來真是簡單至極。

我會告訴你我基本上就從來沒有自己寫過正則表達式嗎,我只會copy。

但是我在剛剛一個小時的學習中,我覺得我可以了,而且我能立馬寫出一段很6的正則表達式,無論多長,只需要把每個捕獲分組換一行寫就行了,然後貼到代碼里時再合成一行。

突然的感悟:程式員只是需要一個安靜的心和學習的興趣。

我不會告訴你我是邊看書邊寫博客的,好了,接下來我們繼續吧。

無論如何,即時我現在明白了正則表達式不難,但是仍然還是把正則表達式寫得越簡單越好。

那麼下麵來寫一個匹配數字的正則表達式吧

var myRegExp=/^-?\d+(?:\.\d*)?(?:e[+\-])?\d+)?$/i;
var url="-1.3e-3";
var result=myRegExp.test(url);//result為true

這上面的正則表達式的最後的 i 表示匹配字元串時忽略大小寫。那麼讓我們擴展一下:

  • 以i結尾:表示忽略字元串大小寫,都會匹配
  • 以g結尾: 表示全局的(匹配多次)。對於test方法不建議使用g,string的search方法會自動忽略g標識。
  • 以m結尾:多行($和^能匹配行結束符)

創建正則表達式的方式:

  • 最簡單的,就像我上面那麼玩的
    • var myRegExp=/^-?\d+$/i
  • 另外一種是使用RegExp構造器。Reg構造器適用於,必須在運行時動態生成正則表達式的情形。
    •   
      var myRegExp=new RegExp("\"(?:\\\\.|[^\\\\\\\"])*\"",'g');

       

    • RegExp的屬性
      • global:如果標識g被使用,值為true。
      • ignoreCase:如果標識i被使用,值為true。
      • lastIndex:下一次exec匹配開始的索引。初始值為0.
      • multiline:如果標識m被使用,值為true
      • source:正則表達式源碼文本
    • 用正則表達式字面量創造的RegExp對象,共用同一個單例。(我自己測了一下發現並非如此,所以這句話真實性有待確認

關於構成正則表達式的元素

  • 分支:用|表示,兩個正則表達式可以用|並起來成為一個,如果字元串匹配由|分隔的兩個正則表達式任意一個,那麼這個選擇匹配。
  • 正則表達式匹配量詞,簡單來講就是匹配多少次
    • {3,6}表示會匹配3到6次 
    • *  等同於{0,}
    • +  等同於{1,}
    • ?  等同於{0,1}
  • ASCII碼特殊字元的匹配寫法
    • [!-\/:-@\[-'{-~]

      非常難看,且難懂,所以我的正則表達式啊,唉~~~

  • 正則表達式分組類型
    • 捕獲型:()
    • 非捕獲型:(?:)進行簡單的匹配,並不會捕獲所匹配的文本。會有微弱的性能優勢。
    • 向前正向匹配:(?=)   作者說這個特性和下麵這個特性並非好的特性,所以,我已經決定開始忘掉了。
    • 向後負向匹配:(?!)
  • 需要加轉義字元的字元:\ / [ ]  (  )  ? + - * | . ^ s
  • 同時一些有趣的轉義字元
    • \f 換頁符
    • \n 換行符
    • \r  回車符
    • \t  製表符即tab
    • \u 允許指定一個Unicode字元來表示一個16進位的常量
    • \d 等同於[0-9],\D正好相反,等同於[^0-9]
    • \s 等同於[\f\n\r\t\u000B\u0020\u00A0\u2028\u2029].這是一個Unicode空白字元的不完全子集,\S正好相反
    • \w 等同於[0-9A-Z_a-z],\W正好相反,\W希望表示的是字母類但是它通常很難起作用。
    • 所以一個更簡單的字母類是[A-Za-z\u00C0-\u1FFF\u2800-\uFFFD],它包括所有Unicode字母和其他非字母字元。Unicode比這大的多,但是太龐大而低效了。所以用這個簡單的就好
    • \b 被指定為一個字邊界標識,方便對文本的字邊界進行匹配。然而他會用\w去找邊界,所以對多語言來說這是個不好的特性。
    • \1 \2 \3分別值的第1、2、3個分組所捕獲的文本的一個引用
      • 所以用此正則表達式可以用來搜索文本中是否存在重覆的單詞隔著幾個空白字元挨在一起的情況:
        var doubledWord=/([A-Za-z\u00C0-\u1FFF\u2800-\uFFFD]+)\s+\1/gi;

         


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 因為公司的項目用到是slim 框架,所以想把它學習一下。在公司用到是Slim2版本,現在官網已經到達 Slim3的版本了。官網地址:http://www.cnblogs.com/lmenglliren89php/。 首先按照官網的教程,安裝Slim: 1.curl -sS https:/...
  • <h2 CSS 偽元素 (Pseudo elements)實例</h2 <h3 CSS 實例</h3 CSS 背景實例 CSS 文本實例 CSS 字體(font)實例 CSS 邊框(border)實例 CSS 外邊距 (margin) 實例 CSS 內邊距 (padding) 實例 CSS 列表實....
  • 下麵,我們給大家提供了一個用於HTML5開發的各種用途的JavaScript庫列表。這些框架能夠給前端開發人員提供更好的功能實現的解決方案。如果你有收藏優秀的框架,也可以在後面的評論中分享給我們。1.EasyStar.js如果構建HTML5游戲或其他互動內容,那麼一定要檢查outEasyStar.j...
  • <h2 CSS 偽類 (Pseudo classes) 實例</h2 <h3 CSS 實例</h3 CSS 背景實例 CSS 文本實例 CSS 字體(font)實例 CSS 邊框(border)實例 CSS 外邊距 (margin) 實例 CSS 內邊距 (padding) 實例 CSS 列表實例....
  • 一.highcharts簡介以及引入 highcharts作為免費提供給個人學習、個人網站和非商業用途使用的前端圖表演示插件的確使用起來十分方便和輕便。在我最近完成一個需求的時候用到了它, 它的相容性也很強,其在標準(W3C標準)瀏覽器中使用SVG技術渲染圖形,在遺留的IE瀏覽器中使用VML技術來....
  • Form Plugin API 里提供了很多有用的方法可以讓你輕鬆的處理表單里的數據和表單的提交過程。測試環境:部署到Tomcat中的web項目。一、引入依賴js 二、初始化回調函數。首先,我們初始化這個表單,給它一個beforeSubmit回調函數 - 這是一個用來校驗的函數。$(docum...
  • JS中處理相容的方式總結:1、使用try、catch來處理相容 ->原理:在try中讓JS代碼執行,如果執行過程中報錯了,說明不相容,我們在catch中用其他的方式來實現我們的相容處理 ->前提:不相容的情況下執行報錯才可以 ->弊端:不管當前的瀏覽器是否相容,都要先把try中的代碼執行一遍,...
  • 在AngularJS中,有時候需要監視Scope中的某個變數,因為變數的改變會影響一些界面元素的顯示。有時,也希望通過jQuery調用Scope的某個方法。比如以下場景: jQ Button Toggle jQ button state Counter: {{counter}}以...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...