摘要:讀這篇文章之前你需要掌握基本的知識,并且有安靜舒適的環境與寬裕的時間,文章有點長,你可以選擇備好或茶來慢慢學習。文章標題有點夸大了,這是一篇正則表達式的入門文章。如有錯誤,歡迎指正。
讀這篇文章之前你需要掌握基本的JavaScript知識,并且有安靜舒適的環境與寬裕的時間,文章有點長,你可以選擇備好coffee或茶來慢慢學習。
文章標題有點夸大了,這是一篇正則表達式的入門文章。如有錯誤,歡迎指正。
REGEXP對象
JavaScript 通過內置對象RegExp支持正則表達式,有兩種方法實例化RegExp對象
字面量1.字面量 2.構造函數
var reg = /is /g //匹配單詞is g是global 進行全文搜索匹配
沒有g: var reg = /is/; //只替換第一項 "He is a boy. This is a dog. Where is she?".replace(reg,"IS"); "He IS a boy. This is a dog. Where is she?" 有g: var reg = /is/g; //替換了所有的 "He is a boy. This is a dog. Where is she?".replace(reg,"IS"); "He IS a boy. This IS a dog. Where IS she?"構造函數
var reg = new RegExp( "is" , "g"); //同樣,如果不加g 則只替換第一項
修飾符g:global 全文搜索,不添加,搜索到第一個匹配停止
i:ignore case 忽略大小寫,默認大小寫敏感
m:multiplelines 多行搜索
//未忽略大小寫 "He is a boy. Is he?".replace(/is/g, "0"); "He 0 a boy. Is he?" //忽略大小寫 "He is a boy. Is he?".replace(/is/gi, "0"); "He 0 a boy. 0 he?"元字符
·正則表達式由兩種基本字符類型組成:
原義文本字符
元字符
·元字符是在正則表達式中有特殊含義的非字母字符
`· * + ? $ ^ . / () {} []`字符類
我們可以使用元字符 [] 來構建一個簡單的類
所謂類是指符合某些特性的對象,一個泛指,而不是特指某個字符
表達式[abc] 把字符a或b或c歸為一類,表達式可以匹配這類的字符(one of)
"a1b2c3d4".replace(/[abc]/g,"X") "X1X2X3d4"字符類取反
使用元字符^創建 反向類/負向類
"a1b2c3d4".replace(/[^abc]/g,"X") "aXbXcXXX"范圍類
正則表達式還提供了 范圍類
所以我們可以使用 [a-z] 來連接兩個字符表示 從a到z的任意字符
這是個閉區間,也就是包含a和z本身
"a1b2d3x4z9".replace(/[a-z]/g,"Q") "Q1Q2Q3Q4Q9"
在[]組成的類內部是可以連寫的[a-zA-Z] (one of)
"a1b2d3x4z9AJHGK".replace(/[a-zA-Z]/g,"Q") "Q1Q2Q3Q4Q9QQQQQ"
中劃線:如果是在里面 如[a-z],就表示范圍的意思,如果想匹配中劃線,在后面加
"2016-09-12".replace(/[0-9-]/g,"A") "AAAAAAAAAA"預定義類
正則表達式提供 預定義類 來匹配常見的字符類
邊界字符 . 等價類[^ ] 除了回車符和換行符之外的所有字符
d [0-9] 數字字符 D [^0-9] 非數字字符 s 空白符 S非空白符 w 單詞字符(字母、數字下劃線) W 非單詞字符 abd. //ab+數字+任意字符
正則表達式還提供了幾個常用的邊界匹配字符
^ 以xxx開始 $ 以xxx結束 單詞邊界 B 非單詞邊界
"@123@abc@".replace(/@./g, "Q") "Q23Qbc@" "@123@abc@".replace(/^@./g, "Q") "Q23@abc@" "@123@abc@".replace(/.@/g, "Q") "@12QabQ" "@123@abc@".replace(/.@$/g, "Q") "@123@abQ"量詞
我們希望匹配一個連續出現20次數字的字符串
貪婪模式+ 出現一次或多次(至少出現一次)
* 出現零次或多次(任意次)
{n} 出現n次
{n,m}出現n到m次
{n,}至少出現n次
d{3,6} 12345678
//盡可能多的匹配 "12345678".replace(/d{3,6}/g,"X") "X78"非貪婪模式
讓正則表達式盡可能少的匹配,也就是說一旦成功匹配不再繼續嘗試就是非貪婪模式
//在量詞后加上?即可 如下面的為3個一組 "12345678".replace(/d{3,6}?/g,"X") "XX78"分組
匹配字符串Byron連續出現3次的場景
Byron{3} 只是將n重復三次
使用()可以達到分組的功能,使量詞作用于分組
(Byron){3} 是將Byron重復三次
//錯誤的 "a1b2c3d4".replace(/[a-z]d{3}/g,"X") "a1b2c3d4" //正確的 "a1b2c3d4".replace(/([a-z]d){3}/g,"X") "Xd4"或
使用 | 可以達到或的效果
//示例一 "ByronCasper".replace(/Byron|Casper/g,"X") "XX" //示例二(分組和或配合使用) "ByronsperByrCasper".replace(/Byr(on|Ca)sper/g,"X") "XX"反向引用
2016-08-12 => 08/12/2016
//分組捕獲 "2016-08-12".replace(/(d{4})-(d{2})-(d{2})/g,"$1") "2016" "2016-08-12".replace(/(d{4})-(d{2})-(d{2})/g,"$2/$3/$1") "08/12/2016"忽略分組
不希望捕獲某些分組,只需要在分組內加上?:就可以
(?:Byron).(ok)
正則表達式從文本頭部向尾部開始解析,文本尾部方向,稱為“前”
前瞻就是在正則表達式匹配到規則的時候,向前檢查是否符合斷言,
后顧/后瞻方向相反
正向前瞻 exp(?=assert)
負向前瞻 exp(?!assert)
//單詞后面是數字 "a2*3".replace(/w(?=d)/g,"X") "X2*3" "a2*34v8".replace(/w(?=d)/g,"X") "X2*X4X8" //單詞后面不是數字 "a2*34vv".replace(/w(?!d)/g,"X") "aX*3XXX"對象屬性
對象屬性是只讀的
test和exec方法global:是否全文搜索,默認false
ignore case:是否大小寫敏感,默認是false
multiline:多行搜索,默認值是false
lastIndex:是當前表達式匹配內容的最后一個字符的下一個位置
source:正則表達式的文本字符串
RegExp.prototype.test(str)
用于測試字符串參數中是否存在匹配正則表達式模式的字符串
如果存在則返回true,否則返回false
var reg1 = /w/; reg1.test("a") true reg1.test("$") false 但是如果這樣: var reg2 = /w/g; //第一次 reg1.test("ab") true //第二次 reg1.test("ab") true //第三次 reg1.test("ab") false
這是lastIndex在作怪!
第一次匹配的時候當前匹配內容為a,最后一個字符也是a本身,下一個位置為b前面;
第二次匹配的時候當前匹配內容為b,最后一個字符也是b本身,下一個位置為b后面;
第三次匹配的時候當前匹配內容為空,最后一個字符也是空本身,下一個位置重置為a前面。
解決方法:
①每次都實例化一個新對象
(/w/g).test("ab") 這樣就能每次都是true,但是會產生內存開銷,不采用!
②如果想用test本意的話,不用加g,只需檢測有沒有就可以了。
RegExp.prototype.exec(str)
使用正則表達式模式對字符串執行搜索,并將更新全局RegExp對象的屬性以反映匹配結果
如果沒有匹配的文本則返回null,否則返回一個結果數組:
- index 聲明匹配文本的第一個字符的位置
- input 存放被檢索的字符串 string
非全局調用
調用非全局的RegExp對象的exec()時,返回數組
第一個元素是與正則表達式相匹配的文本
第二個元素是與RegExpObject的第一個子表達式相匹配的文本(如果有的話)
第三個元素是與RegExp對象的第二個子表達式相匹配的文本(如果有的話),以此類推
var reg3 = /d(w)(w)d/; var reg4 = /d(w)(w)d/g; var ts = "$1az2bb3cy4dd5ee"; var ret = reg3.exec(ts); //在非全局下 lastIndex失效 console.log(reg3.lastIndex + " " + ret.index + " " + ret.toString()); console.log(reg3.lastIndex + " " + ret.index + " " + ret.toString()); while(ret = reg4.exec(ts)){ console.log(reg4.lastIndex + " " + ret.index + " " + ret.toString()); } //結果: "0 1 1az2,a,z" "0 1 1az2,a,z" "5 1 1az2,a,z" "11 7 3cy4,c,y"字符串對象方法
Stringl.protatype.search(reg)
search()方法用于檢索字符串中指定的子字符串,或檢索與正則表達式相匹配的子字符串
方法返回第一個匹配結果index,查找不到返回 -1
search()方法不執行全局匹配,它將忽略標志g,并且總是從字符串的開始進行檢索
String.prototype.match(reg)
match()方法將檢索字符串,以找到一個或多個與regexp匹配的文本
regexp是否具有標志g對結果影響很大
非全局調用
如果regexp沒有標志g,那么match()方法就只能在字符串中執行一次匹配
如果沒有找到任何匹配的文本,將返回null
否則它將返回一個數組,其中存放了與它找到的匹配文本有關的信息
返回數組的第一個元素存放的是匹配文本,而其余的元素存放的是與正則表達式的子表達式匹配的文本
除了常規的數組元素之外,返回的數組還含有2個對象屬性
index 聲明匹配文本的起始字符在字符串的位置
input 聲明對stringObject的引用
var reg3 = /d(w)d/; var reg4 = /d(w)d/g; var ts = "$1a2b3c4d5e"; var ret = ts.match(reg3); console.log(ret); console.log(ret.index + " " + reg3.lastIndex); //結果 ["1a2", "a"] "1 0"
全局調用
如果regexp具有標志g則match()方法將執行全局檢索,找到字符串中的所有匹配字符串
沒有找到任何匹配的子串,則返回null
如果找到了一個或多個匹配子串,則返回一個數組
數組元素中存放的是字符串中所有的匹配子串,而且也沒有index屬性或input屬性
ret = ts.match(reg4); console.log(ret); console.log(ret.index + " " + reg3.lastIndex); //結果 ["1a2", "3c4"] "undefined 0"
String.prototype.split(reg)
我們經常使用split方法把字符串分割為字符數組
"a,b,c,d".split(","); //["a","b","c","d"]
在一些復雜的分割情況下我們可以使用正則表達式解決
"a1b2c3d".split(/d/); //["a","b","c","d"]
String.prototype.replace
String.prototype.replace(str,replaceStr)
String.prototype.replace(reg,replaceStr)
String.prototype.replace(reg,function)
function參數含義
function會在每次匹配替換的時候調用,有四個參數 ①匹配字符串 ②正則表達式分組內容,沒有分組則沒有該參數 ③匹配項在字符串中的index ④原字符串
"a1b2c3d4e5".replace(/d/g, function(match,index,origin){ console.log(index); return parseInt(match) + 1; }); //結果 1 3 5 7 9 "a2b3c4d5e6" "a1b2c3d4e5".replace(/(d)(w)(d)/g, function(match,group1,group2,group3,index,origin){ console.log(match); return group1 + group3; }); //結果 "1b2" "3d4" "a12c34e5"
希望能對你有所幫助,更好的運用正則來解決問題!
附:
1.正則表達式檢測網站:(https://regexper.com/)
2.JSBin:(http://jsbin.com/?js,console)
博客地址:(http://fehey.com/2016/08/12/r... )
歡迎前端小伙伴交流~
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/87823.html
摘要:阿里云是國內云服務器市場的龍頭,性價比高,速度快又安全,是站長建站首選的云服務器之一。作為一個老司機,福利吧也和大家分享一下我的阿里云推廣經驗,教大家如何免費推廣云大使。阿里云是國內云服務器市場的龍頭,性價比高,速度快又安全,是站長建站首選的云服務器之一。福利吧使用的也是阿里云服務器,是折騰了很多次網站搬家后,才選擇了阿里云。身邊好幾個站長最后都殊途同歸,用了阿里云,可見阿里云服務器性能確實...
摘要:說明處理方法被異步執行了。意味著操作成功完成。狀態的對象可能觸發狀態并傳遞一個值給相應的狀態處理方法,也可能觸發失敗狀態并傳遞失敗信息。注生命周期相關內容引用自四使用和異步加載圖片這是官方給出的示例,部分的代碼如下 帶你玩轉 JavaScript ES6 (七) - 異步 本文同步帶你玩轉 JavaScript ES6 (七) - 異步,轉載請注明出處。 本章我們將學習 ES6 中的 ...
摘要:選擇選項,可以添加名稱和描述的數據,以便其他用戶了解你的相關信息,如圖創建一個新集合。如果用戶正在處理一些特定的集合,可以單擊圖標將集合置頂,如圖過濾集合。 集合...
摘要:深入淺出容器云系列文章是由時速云出品,本文是第二篇,歡迎大家不吝賜教。容器服務是一種高度可擴展的高性能容器管理服務,服務于應用的完整生命周期。存儲卷容器服務支持有狀態和無狀態服務。當容器重新部署時也會隨著容器在不同主機之間遷移。 導語:隨著以Docker為代表的容器技術在國內的迅速發展,容器云也逐漸被廣大開發者所熟知,但容器云(CaaS)相比傳統的云主機(IaaS)在實際應用中還存在著...
摘要:透視即是以現實的視角來看屏幕上的事物,從而展現的效果。旋轉則不再是平面上的旋轉,而是三維坐標系的旋轉,就包括軸,軸,軸旋轉。必須與屬性一同使用,而且只影響轉換元素??勺杂赊D載引用,但需署名作者且注明文章出處。 showImg(https://segmentfault.com/img/bVzJoZ); 話不多說,先上demo 酷炫css3走馬燈/正方體動畫: https://bupt-...
閱讀 1226·2023-04-25 15:53
閱讀 2101·2021-11-19 09:40
閱讀 3488·2021-10-11 10:59
閱讀 2066·2019-08-30 15:55
閱讀 1955·2019-08-30 15:54
閱讀 2293·2019-08-29 13:03
閱讀 2754·2019-08-28 18:17
閱讀 1510·2019-08-27 10:51