詳解Javascript中正則表示式的使用
正則表示式用來處理字串特別好用,在JavaScript中能用到正則表示式的地方有很多,本文對正則表示式基礎知識和Javascript中正則表示式的使用做一個總結。
第一部分簡單列舉了正則表示式在JavaScript中的使用場景;第二部分詳細介紹正則表示式的基礎知識,寫出一些例子方便理解。
本文的內容是我自己看完正則表示式寫法,和犀牛書中js正則表示式的章節後的總結,所以內容可能會有疏漏和不嚴謹的地方。若有大神路過發現文中錯誤的地方,歡迎斧正!
Javascript中正則表示式的使用
一個正則表示式可以認為是對一種字元片段的特徵描述,而它的作用就是從一堆字串中找出滿足條件的子字串。比如我在JavaScript中定義一個正則表示式:
var reg=/hello/ 或者 var reg=new RegExp("hello")
那麼這個正則表示式可以用來從一堆字串中找出 hello 這個單詞。而“找出”這個動作,其結果可能是找出第一個hello的位置、用別的字串替換hello、找出所有hello等等。下面就列舉一下JavaScript中可以使用正則表示式的函式,簡單介紹一下這些函式的作用,更復雜的用法會在第二部分中介紹。
String.prototype.search方法
用來找出原字串中某個子字串首次出現的index,沒有則返回-1
"abchello".search(/hello/); // 3
String.prototype.replace方法
用來替換字串中的子串
"abchello".replace(/hello/,"hi"); // "abchi"
String.prototype.split方法
用來分割字串
"abchelloasdasdhelloasd".split(/hello/); //["abc", "asdasd", "asd"]
String.prototype.match方法
用來捕獲字串中的子字串到一個數組中。預設情況下只捕獲一個結果到陣列中,正則表示式有”全域性捕獲“的屬性時(定義正則表示式的時候新增引數g),會捕獲所有結果到陣列中
"abchelloasdasdhelloasd".match(/hello/); //["hello"]
"abchelloasdasdhelloasd".match(/hello/g); //["hello","hello"]
作為match引數的正則表示式在是否擁有全域性屬性的情況下,match方法的表現還不一樣,這一點會在後邊的正則表示式分組中講到。
RegExp.prototype.test方法
用來測試字串中是否含有子字串
/hello/.test("abchello"); // true
RegExp.prototype.exec方法
和字串的match方法類似,這個方法也是從字串中捕獲滿足條件的字串到陣列中,但是也有兩個區別。
1. exec方法一次只能捕獲一份子字串到陣列中,無論正則表示式是否有全域性屬性
var reg=/hello/g; reg.exec("abchelloasdasdhelloasd"); // ["hello"]
2. 正則表示式物件(也就是JavaScript中的RegExp物件)有一個lastIndex屬性,用來表示下一次從哪個位置開始捕獲,每一次執行exec方法後,lastIndex就會往後推,直到找不到匹配的字元返回null,然後又從頭開始捕獲。 這個屬性可以用來遍歷捕獲字串中的子串。
var reg=/hello/g; reg.lastIndex; //0 reg.exec("abchelloasdasdhelloasd"); // ["hello"] reg.lastIndex; //8 reg.exec("abchelloasdasdhelloasd"); // ["hello"] reg.lastIndex; //19 reg.exec("abchelloasdasdhelloasd"); // null reg.lastIndex; //0
正則表示式基礎
元字元
上面第一節以/hello/為例,但是實際應用中可能會遇到這樣的需求: 匹配一串不確定的數字、匹配開始的位置、匹配結束的位置、匹配空白符。此時就可以用到元字元。
元字元:
//匹配數字: \d "ad3ad2ad".match(/\d/g); // ["3", "2"] //匹配除換行符以外的任意字元: . "a\nb\rc".match(/./g); // ["a", "b", "c"] //匹配字母或數字或下劃線 : \w "a5_ 漢字@!-=".match(/\w/g); // ["a", "5", "_"] //匹配空白符:\s "\n \r".match(/\s/g); //[" ", " ", ""] 第一個結果是\n,最後一個結果是\r //匹配【單詞開始或結束】的位置 : \b "how are you".match(/\b\w/g); //["h", "a", "y"] // 匹配【字串開始和結束】的位置: 開始 ^ 結束 $ "how are you".match(/^\w/g); // ["h"]
反義元字元,寫法就是把上面的小寫字母變成大寫的,比如 , 匹配所有不是數字的字元: \D
另外還有一些用來表示重複的元字元,會在下面的內容中介紹。
字元範圍
在 [] 中使用符號 - ,可以用來表示字元範圍。如:
// 匹配字母 a-z 之間所有字母 /[a-z]/ // 匹配Unicode中 數字 0 到 字母 z 之間的所有字元 /[0-z]/ // unicode編碼查詢地址: //https://en.wikibooks.org/wiki/Unicode/Character_reference/0000-0FFF //根據上面的內容,我們可以找出漢字的Unicode編碼範圍是 \u4E00 到 \u9FA5,所以我們可以寫一個正則表示式來判斷一個字串中是否有漢字 /[\u4E00-\u9FA5]/.test("測試"); // true
重複 & 貪婪與懶惰
首先來講重複,當我們希望匹配一些重複的字元時,就需要用到一些和重複相關的正則表示式,寫法如下
//重複n次 {n} "test12".match(/test\d{3}/); // null "test123".match(/test\d{3}/); // ["test123"] //重複n次或更多次 {n,} "test123".match(/test\d{3,}/); // ["test123"] //重複n到m次 "test12".match(/test\d{3,5}/); // null "test12345".match(/test\d{3,5}/); // ["test12345"] "test12345678".match(/test\d{3,5}/); // ["test12345"] // 匹配字元test後邊跟著數字,數字重複0次或多次 "test".match(/test\d*/); // ["test"] "test123".match(/test\d*/); // ["test123"] //重複一次或多次 "test".match(/test\d+/) ; // null "test1".match(/test\d*/); //["test1"] //重複一次或0次 "test".match(/test\d?/) ; // null "test1".match(/test\d?/); //["test1"]
從上面的結果可以看到,字元test後邊跟著的數字可以重複0次或多次時,正則表示式捕獲的子字串會返回儘量多的數字,比如/test\d*/匹配 test123 ,返回的是test123,而不是test或者test12。
正則表示式捕獲字串時,在滿足條件的情況下捕獲儘可能多的字串,這就是所謂的“貪婪模式”。
對應的”懶惰模式“,就是在滿足條件的情況下捕獲儘可能少的字串,使用懶惰模式的方法,就是在字元重複標識後面加上一個 "?",寫法如下
// 數字重複3~5次,滿足條件的情況下返回儘可能少的數字 "test12345".match(/test\d{3,5}?/); //["test123"] // 數字重複1次或更多,滿足條件的情況下只返回一個數字 "test12345".match(/test\d+?/); // ["test1"]
字元轉義
在正則表示式中元字元是有特殊的含義的,當我們要匹配元字元本身時,就需要用到字元轉義,比如:
/\./.test("."); // true
分組 & 分支條件
正則表示式可以用 " () " 來進行分組,具有分組的正則表示式除了正則表示式整體會匹配子字串外,分組中的正則表示式片段也會匹配字串。
分組按照巢狀關係和前後關係,每個分組會分配得到一個數字組號,在一些場景中可以用組號來使用分組。
在 replace、match、exec函式中,分組都能體現不同的功能。
replace函式中,第二個引數裡邊可以用 $+數字組號來指代第幾個分組的內容,如:
" the best language in the world is java ".replace(/(java)/,"$1script"); // " the best language in the world is javascript " "/static/app1/js/index.js".replace(/(\/\w+)\.js/,"$1-v0.0.1.js"); //"/static/app1/js/index-v0.0.1.js" (\/\w+)分組匹配的就是 /index ,在第二個引數中為其新增上版本號
match函式中,當正則表示式有全域性屬性時,會捕獲所有滿足正則表示式的子字串
"abchellodefhellog".match(/h(ell)o/g); //["hello", "hello"]
但是當正則表示式沒有全域性屬性,且正則表示式中有分組的時候,match函式只會返回整個正則表示式匹配的第一個結果,同時會將分組匹配到的字串也放入結果陣列中:
"abchellodefhellog".match(/h(ell)o/); //["hello", "ell"] // 我們可以用match函式來分解url,獲取協議、host、path、查詢字串等資訊 "http://www.baidu.com/test?t=5".match(/^((\w+):\/\/([\w\.]+))\/([^?]+)\?(\S+)$/); // ["http://www.baidu.com/test?t=5", "http://www.baidu.com", "http", "www.baidu.com", "test", "t=5"]
exec函式在正則表示式中有分組的情況下,表現和match函式很像,只是無論正則表示式是否有全域性屬性,exec函式都只返回一個結果,並捕獲分組的結果
/h(ell)o/g.exec("abchellodefhellog"); //["hello", "ell"]
當正則表示式需要匹配幾種型別的結果時,可以用到分支條件,例如
"asdasd hi asdad hello asdasd".replace(/hi|hello/,"nihao"); //"asdasd nihao asdad hello asdasd" "asdasd hi asdad hello asdasd".split(/hi|hello/); //["asdasd ", " asdad ", " asdasd"]
注意,分支條件影響它兩邊的所有內容, 比如 hi|hello 匹配的是hi或者hello,而不是 hiello 或者 hhello
分組中的分支條件不會影響分組外的內容
"abc acd bbc bcd ".match(/(a|b)bc/g); //["abc", "bbc"]
後向引用
正則表示式的分組可以在其後邊的語句中通過 \+數字組號來引用
比如
// 匹配重複的單詞 /(\b[a-zA-Z]+\b)\s+\1/.exec(" asd sf hello hello asd"); //["hello hello", "hello"]
斷言
(?:exp) , 用此方式定義的分組,正則表示式會匹配分組中的內容,但是不再給此分組分配組號,此分組在replace、match等函式中的作用也會消失,效果如下:
/(hello)\sworld/.exec("asdadasd hello world asdasd") // ["hello world", "hello"],正常捕獲結果字串和分組字串 /(?:hello)\sworld/.exec("asdadasd hello world asdasd") // ["hello world"] "/static/app1/js/index.js".replace(/(\/\w+)\.js/,"$1-v0.0.1.js"); //"/static/app1/js/index-v0.0.1.js" "/static/app1/js/index.js".replace(/(?:\/\w+)\.js/,"$1-v0.0.1.js"); //"/static/app1/js$1-v0.0.1.js"
(?=exp) 這個分組用在正則表示式的後面,用來捕獲exp前面的字元,分組中的內容不會被捕獲,也不分配組號
/hello\s(?=world)/.exec("asdadasd hello world asdasd") // ["hello "]
(?!exp) 和前面的斷言相反,用在正則表示式的後面,捕獲後面不是exp的字元,同樣不捕獲分組的內容,也不分配組號
/hello\s(?!world)/.exec("asdadasd hello world asdasd") //null
處理選項
javascript中正則表示式支援的正則表示式有三個,g、i、m,分別代表全域性匹配、忽略大小寫、多行模式。三種屬性可以自由組合共存。
// 全域性匹配 g "abchelloasdasdhelloasd".match(/hello/); //["hello"] "abchelloasdasdhelloasd".match(/hello/g); //["hello","hello"] //忽略大小寫 i "abchelloasdasdHelloasd".match(/hello/g); //["hello"] "abchelloasdasdHelloasd".match(/hello/gi); //["hello","Hello"]
在預設的模式下,元字元 ^ 和 $ 分別匹配字串的開頭和結尾處,模式 m 改變了這倆元字元的定義,讓他們匹配一行的開頭和結尾
"aadasd\nbasdc".match(/^[a-z]+$/g); //null 字串^和$之間有換行符,匹配不上 [a-z]+ ,故返回null "aadasd\nbasdc".match(/^[a-z]+$/gm); // ["aadasd", "basdc"] ,改變^$的含義,讓其匹配一行的開頭和末尾,可以得到兩行的結果
相關推薦
詳解Javascript中正則表示式的使用
正則表示式用來處理字串特別好用,在JavaScript中能用到正則表示式的地方有很多,本文對正則表示式基礎知識和Javascript中正則表示式的使用做一個總結。 第一部分簡單列舉了正則表示式在JavaScript中的使用場景;第二部分詳細介紹正則表示式的基礎知識,寫出一些例子方便理解。 本文的內容是
javascript中正則表示式的基礎語法
前面的話 正則表示式在人們的印象中可能是一堆無法理解的字元,但就是這些符號卻實現了字串的高效操作。通常的情況是,問題本身並不複雜,但沒有正則表示式就成了大問題。javascript中的正則表示式作為相當重要的知識,本文將介紹正則表示式的基礎語法 定義 正則表示式(Regular Expres
強大的grep用法詳解:grep與正則表示式
首先要記住的是: 正則表示式與萬用字元不一樣,它們表示的含義並不相同!正則表示式只是一種表示法,只要工具支援這種表示法, 那麼該工具就可以處理正則表示式的字串。vim、grep、awk 、sed 都支援正則表示式,也正是因為由於它們支援正則,才顯得它們強大;在以前上班的公司裡,由於公司是基於web的服務型網站
JavaScript中正則表示式常見使用函式
最近越來越感覺到正則表示式的強大,可以簡化很多程式碼。並且正則表示式入門並不是很難。簡單列一下JavaScript中使用正則表示式的一些方法。 //定義幾個會用到的變數 var href = 'bai
php 中正則表示式詳解
概述 正則表示式是一種描述字串結果的語法規則,是一個特定的格式化模式,可以匹配、替換、擷取匹配的字串。常用的語言基本上都有正則表示式,如JavaScript、java等。其實,只有瞭解一種語言的正則使用,其他語言的正則使用起來,就相對簡單些。文字主要圍繞解決下面問題展開。 有哪些常用的
JS中正則表示式詳解及最基本的判斷手機號,郵箱,身份證
首先最基本的符號型別及含義整理一下。 1,最基本的符號:^ $ * + ? ^ 代表字串的開始位置 &nbs
Jmeter中正則表示式提取器使用詳解
在使用Jmeter過程中,會經常使用到正則表示式提取器提取器,雖然並不直接涉及到請求的測試,但是對於資料的傳遞起著很大的作用,本篇博文就是主要講解關於正則表示式及其在Jmeter的Sampler中的呼叫。 一、首先來介紹一下J meter中正則表示式提取器的元素組成,下圖所示: 下面是各引數值的含義:
JDK中正則表示式類庫詳解(一)
二、以下是自己對正則表示式的一些理解。 [size=medium]1. 正則表示式規則1.1 普通字元 字母、數字、漢字、下劃線、以及後邊章節中沒有特殊定義的標點符號,都是"普通字元"。表示式中的普通字元,在匹配一個字串的時候,匹配與之相同的一個字元。 舉例1:表示式 "c",在匹配字串 "
【2017-11+10】 JS中正則表示式詳解
在JS的開發過程中,很多時候都需要驗證表單的正確性;使用正則表示式能夠很好的簡化表單的驗證過程。 在JS中,內建了 RegExp 物件,用來進行正則匹配。 一. RegExp 物件的使用
【RegExp】JavaScript中正則表達式判斷匹配規則以及常用方法
返回 空字符串 tro true 正則表達式 str 本地 大小 表示範圍 字符串是編程時涉及到的最多的一種數據結構,對字符串進行操作的需求幾乎無處不在。 正則表達式是一種用來匹配字符串的強有力的武器。它的設計思想是用一種描述性的語言來給字符串定義一個規則,凡是符合規則的字
詳解 javascript 中的比較(==和===)
不一致 mit 如果 asc onu tin 算法 復雜 undefine 抽象相等比較算法 比較運算 x==y, 其中 x 和 y 是值,產生 true 或者 false。這樣的比較按如下方式進行: 若 Type(x) 與 Type(y) 相同, 則 若 Type(x)
詳解javascript中this的工作原理
new 變量 person get 工作 func 存在 嚴格 es5 在 JavaScript 中 this 常常指向方法調用的對象,但有些時候並不是這樣的,本文將詳細解讀在不同的情況下 this 的指向。 一、指向 window: 在全局中使用 this,它將會指向全局
Python中正則表示式re.match的用法
re.match(pattern, string, flags) 第一個引數是正則表示式,如果匹配成功,則返回一個Match,否則返回一個None; 第二個引數表示要匹配的字串; 第三個引數是標緻位,用於控制正則表示式的匹配方式,如:是否區分大小寫,多行匹配等等。 需要特別注意的是,這個方法並不是完
WPF中正則表示式的部分應用
無論在哪一種語言中,正則表示式在一定程度上都可以簡化程式碼程式設計。以下為在WPF中的部分應用。 如var sql = new System.Text.RegularExpressions.Regex("[\\r\\n]").Replace(str, " "); 表示對str字串中匹配換行符
Python中正則表示式常用函式sub,search,findall,split等使用
1.原生字串r python中字串前面加上 r 表示原生字串,不會轉義。與大多數程式語言相同,正則表示式裡使用"\"作為轉義字元,這就可能造成反斜槓困擾。假如你需要匹配文字中的字元"\",那麼使用程式語言表示的正則表示式裡將需要4個反斜槓"\\":前兩個和後兩個分別用於在程式語言裡轉義成反斜
Python中正則表示式對單個字元,多個字元,匹配邊界等使用
Regular Expression,正則表示式,又稱正規表示式、正規表示法、正則表示式、規則表示式、常規表示法(英語:Regular Expression,在程式碼中常簡寫為regex、regexp或RE),是電腦科學的一個概
詳解Javascript 中的this指標
前言 Javascript是一門基於物件的動態語言,也就是說,所有東西都是物件,一個很典型的例子就是函式也被視為普通的物件。Javascript可以通過一定的設計模式來實現面向物件的程式設計,其中this “指標”就是實現面向物件的一個很重要的特性。但是this也是Javascript中一個非常
【前端】JavaScript與正則表示式
一、正則表示式(regular expression簡稱res) 1、定義 一個正則表示式就是由普通字元以及特殊字元(稱為元字元)組成的文字模式。該模式描述在查詢文字主體時待匹配的一個或多個字串。正則表示式作為一個模板,將某個字元模式與所搜尋的字串進行匹配。 2、作用 正則表示式
js中正則表示式test()方法
正則表示式即描述字串規則的表示式 /pattern/attrs /規則/屬性 new RegExp(pattern,attrs) regexObj.test(str)方法:測試正則表示式與指定字串是否匹
java中正則表示式的瞭解與實踐記錄
Pattern pattern = Pattern.compile("^\\S+/q/"); Matcher matcher = pattern.matcher(resultString); String qrcode=""; while(matcher.find()){ String path