摘要:使用看完你就會正則表達式了四種操作驗證切分提取替換第一章正則表達式字符匹配攻略正則表達式是匹配模式,要么匹配字符,要么匹配位置至少,至多匹配中的任一個字符范圍表示法如果要匹配則要么要么要么通配符,表示幾乎任意
API 使用
String#search String#split String#match String#replace RegExp#test RegExp#exec
看完你就會正則表達式了
四種操作
驗證
切分
提取
替換
test search match exec
第一章 正則表達式字符匹配攻略正則表達式是匹配模式,要么匹配字符,要么匹配位置
{m,n} 至少m,至多n
[a-z] 匹配a-z中的任一個字符 --范圍表示法
如果要匹配a - z 則[-az] [az-] [a-z]
[abc] 要么a要么b要么c
d === [0-9] D === [^0-9] w === [0-9a-zA-Z_] W === [^0-9a-zA-Z_] s === [ v f] . 通配符,表示幾乎任意字符 {m} 表示出現(xiàn)m次
要匹配任意字符 可以使用
[dD] [wW] [sS] [^] 中的任意一個
貪婪匹配
惰性匹配 ?
var regex = /d{2,5}?/g var string = "123 3456 1290 13498" console.log(string.match(regex)) // 當(dāng)兩個足夠的時候就不在往下匹配了 ["12", "34", "56", "12", "90", "13", "49"]
貪婪量詞
{m,n} {m,} ? + *
惰性量詞 在貪婪量詞后面加上?就行
多選分支 | 也是惰性的
var regex = /good|goodbye/g var string = "goodbye" console.log(string.mathc(regex)) // good 匹配到一個了,后面的就不再嘗試了
匹配16進制顏色值
var regex = /#([0-9A-Fa-f])|(0-9A-Fa-f){3}/g
匹配時間
var regex = /^([01][0-9]|[2][0-3]) : [0-5][0-9]$/ console.log(regex.test("23:59")) //true
如果要求匹配 7:9 前面的0可以省略
var regex = /^(0?[0-9]|1[0-9]|[2][0-3]):(0?[0-9]|[1-5][0-9])$/;
匹配年月日
year [0-9]{4} month (0[1-9]|1[0-2]) 12個月 day 最大31 (0[1-9]|[12][0-9]|3[01]) 01 02...09 10,11....20,21....30,31 var regex = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/; console.log( regex.test("2017-06-10") ); //true
匹配id
var regex = /id=".*"/ var string = ""; console.log(string.match(regex)[0]); // => id="container" class="main" 因為 . 是通配符,本身就匹配雙引號的,而量詞 * 又是貪婪的,當(dāng)遇到 container 后面雙引號時,是不會 停下來,會繼續(xù)匹配,直到遇到最后一個雙引號為止。 解決之道,可以使用惰性匹配: var regex = /id=".*?"/ var string = ""; console.log(string.match(regex)[0]); // => id="container"第二章 正則表達式位置匹配攻略
如何匹配位置昵?
在es5中,共有6個錨
^ $ b B (?=p) (?!p)
多行匹配模式(即有修飾符 m)時,二者是行的概念,這一點需要我們注意:
換行 var result = "I love javascript".replace(/^|$/gm, "#"); console.log(result); /* #I# #love# #javascript# */
b 是單詞變界 具體是w 與W之間的位置 w與^ w與$之間的位置
var result = "[JS] Lesson_01.mp4".replace(//g, "#"); console.log(result); // => "[#JS#] #Lesson_01#.#mp4#"
B : w 與 w、 W 與 W、^ 與 W,W 與 $ 之間的位置
var result = "[JS] Lesson_01.mp4".replace(/B/g, "#"); console.log(result); // => "#[J#S]# L#e#s#s#o#n#_#0#1.m#p#4"
(?=p) p是一個子模式,即p前面的位置,或者說,該位置后面的字符要匹配p
var result = "hello".replace(/(?=l)/g, "#"); console.log(result); // => "he#l#lo"
(?!p)
而 (?!p) 就是 (?=p) 的反面意思,比如:
var result = "hello".replace(/(?!l)/g, "#"); console.log(result); // => "#h#ell#o#"
把位置理解空字符
千位分隔符
var regex = /(?!^)(?=(d{3})+$)/g var result = "1234567".replace(regex, ",")
如果要把 "12345678 123456789" 替換成 "12,345,678 123,456,789"。
此時我們需要修改正則,把里面的開頭 ^ 和結(jié)尾
$,修改成 : var string = "12345678 123456789", regex = /(?!)(?=(d{3})+)/g; var result = string.replace(regex, ",") console.log(result); // => "12,345,678 123,456,789"
(?!b) == B
貨幣案例
function format (num) { return num.toFixed(2).replace(/B(?=(d{3})+)/g, ",").replace(/^/, "$ "); }; console.log( format(1888) ); // => "$ 1,888.00"第三章 分組和分支結(jié)構(gòu)
() |
分組引用
分組可以捕獲數(shù)據(jù)
-分組引用
替換
var regex = /(d{4})-(d{2})-(d{2})/; var string = "2017-06-12"; var result = string.replace(regex, "$2/$3/$1"); console.log(result); // => "06/12/2017" // 其中 replace 中的,第二個參數(shù)里用 $1、$2、$3 指代相應(yīng)的分組。等價于如下的形式: var regex = /(d{4})-(d{2})-(d{2})/; var string = "2017-06-12"; var result = string.replace(regex, function () { return RegExp.$2 + "/" + RegExp.$3 + "/" + RegExp.$1; }); console.log(result); // => "06/12/2017" 也等價于: var regex = /(d{4})-(d{2})-(d{2})/; var string = "2017-06-12"; var result = string.replace(regex, function (match, year, month, day) { return month + "/" + day + "/" + year; }); console.log(result); // => "06/12/2017"
-反向引用 -- 引用之前出現(xiàn)的分組
regex.test(string)
regex.exec(string)
string.match(regex)
RegExp.$1
var regex = /d{4}(-|/|.)d{2}1d{2}/; var string1 = "2017-06-12"; var string2 = "2017/06/12"; var string3 = "2017.06.12"; var string4 = "2016-06/12"; console.log( regex.test(string1) ); // true console.log( regex.test(string2) ); // true console.log( regex.test(string3) ); // true console.log( regex.test(string4) ); // false 1 表示前面引用的那個分組 不管前面這個分組比如(-|/|.)匹配到什么 比如- 1都匹配那個同樣的具體某個字符 2 3表示指代第二個和第三個分組
tips 10 表示第10個分組
那么要匹配1 和0 的話,(?:1)0 1(?:0)
反向引用 是引用前面的分組,但是如果正則里面引用了不存在的分組時,只是匹配了反向引用的字符本身
分組后面有量詞會怎么樣?
分組后面有量詞的話,分組最終捕獲到的數(shù)據(jù)是最后一次的匹配
var regex = /(d)+/; var string = "12345"; console.log( string.match(regex) ); // => ["12345", "5", index: 0, input: "12345"] 從上面看出,分組 (d) 捕獲的數(shù)據(jù)是 "5"。 同理對于反向引用,也是這樣的。測試如下: var regex = /(d)+ 1/; console.log( regex.test("12345 1") ); // => false console.log( regex.test("12345 5") ); // => true
非捕獲括號 (?:p) (?:p1|p2|p3)
如果只想要括號最原始的功能,但不會引用它,即,既不在API里引用,也不在正則里反向引用,此時可以使用非捕獲括號(?:p) 和 (?:p1|p2|p3)
var regex = /(?:ab)+/g; var string = "ababa abbb ababab"; console.log( string.match(regex) ); // => ["abab", "ab", "ababab"] 同理,第二例子可以修改為: var regex = /^I love (?:JavaScript|Regular Expression)$/; console.log( regex.test("I love JavaScript") ); console.log( regex.test("I love Regular Expression") ); // => true // => true
捕獲與非捕獲括號區(qū)別
var str = "a1***ab1cd2***c2"; var reg1 = /((ab)+d+)((cd)+d+)/i; var reg2 = /((?:ab)+d+)((?:cd)+d+)/i; alert(str.match(reg1));//ab1cd2,ab1,ab,cd2,cd alert(str.match(reg2));//ab1cd2,ab1,cd2 //可以看出捕獲分組和非捕獲分組的區(qū)別了吧:非捕獲分組,只是用來匹配,并不會提取分組內(nèi)容。也就是說,如果我們只想用圓括號將一些字符用數(shù)量詞修飾,并不需要這個分組的內(nèi)容,這就是非捕獲分組
語法: stringObj.replace(regexp/substr,replacement)
NO.5 第一個參數(shù)是正則且有子表達式,第二個參數(shù)函數(shù)且?guī)в卸鄠€參數(shù)
var str5 = "這是一段原始文本,需要替換的內(nèi)容"3c這要替換4d"!";
var newStr = str5.replace( /([0-9])([a-z])/g,function (arg1,arg2,arg3,arg4,arg5){ console.log( arg1 ); console.log( arg2 ); console.log( arg3 ); console.log( arg4 ); console.log( arg5 ); } ); //輸出: 3c 3 c 17 這是一段原始文本,需要替換的內(nèi)容"3c這要替換4d"! 4d 4 d 23 這是一段原始文本,需要替換的內(nèi)容"3c這要替換4d"! 上面的例子第一個參數(shù)arg1表示匹配的整體,arg2表示第一個子表達式,arg3表示第二個子表達式,接下來的參數(shù)arg4是一個整數(shù),聲明了表示子匹配在 stringObject 中出現(xiàn)的位置。最后一個參數(shù)是 stringObject 本身。
NO.3 第一個參數(shù)是正則,第二個參數(shù)是帶$符的字符串
var str3 = "這是一段原始文本,"3c這要替換4d"!"; var newStr = str3.replace( /([0-9])([a-z])/g,"$1" ); console.log( newStr ); //輸出: 這是一段原始文本,"3這要替換4"!"; var newStr = str3.replace( /([0-9])([a-z])/g,"$2" ); // 這是一段原始文本,”c這要替換d”!";
cankao
案例
如果不加? 會多匹配一個空格 加問號后,因為? 是懶得匹配,所以不會匹配最后一個空格
function camelize (str) { return str.replace(/[-_s]+(.)?/g, function (match, c) { console.log(c,"c") return c ? c.toUpperCase() : ""; }); } console.log( camelize("-moz-transform ") );
其中分組 (.) 表示首字母。單詞的界定是,前面的字符可以是多個連字符、下劃線以及空白符。正則后面
的 ? 的目的,是為了應(yīng)對 str 尾部的字符可能不是單詞字符,比如 str 是 "-moz-transform "
第五章 正則表達式的拆分
匹配字符串
比如匹配 "[abc]" 和 "{3,5}"
var string = "[abc]" var regex = /[abc]/g console.log(string.macth(regex)[0])
在第一個方括號轉(zhuǎn)義即可 因為后面的方括號構(gòu)不成字符組
var string = "JavaScript"; console.log( string.match(/.{4}(.+)/)[1] ); // => Script // 前面的點出現(xiàn)四次 后面匹配的點出現(xiàn)一次以上
密碼匹配問題: 要求密碼長度 6-12 位,由數(shù)字、小寫字符和大寫字母組成,但必須至少包括 2 種字
符
var regex1 = /^[0-9A-Za-z]{6,12}$/; var regex2 = /^[0-9]{6,12}$/; var regex3 = /^[A-Z]{6,12}$/; var regex4 = /^[a-z]{6,12}$/; function checkPassword (string) { if (!regex1.test(string)) return false; if (regex2.test(string)) return false; if (regex3.test(string)) return false; if (regex4.test(string)) return false; return true; }
匹配浮點數(shù)
符號 [+-]
整數(shù)部分 d+
小數(shù)部分 .d+
匹配 1.23 +1.23 -1.23 10 +10 -10 .2 +.2 -.2
/^[+-]?(d.d+|d+|.d+)$/
第七章節(jié) 正則表達式編程
正則表達式的四種操縱
驗證 切分 提取 替換
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/101532.html
摘要:比如正則表示匹配這樣一個字符串第一個字符是,接下來是到個字符,最后是字符。其實現(xiàn)的方式是使用字符組。具體形式如下,其中和是子模式,用管道符分隔,表示其中任何之一。 貪婪模式: 在使用修飾匹配次數(shù)的特殊符號時,有幾種表示方法可以使同一個表達式能夠匹配不同的次數(shù),比如:{m,n}, {m,}, ?, *, +,具體匹配的次數(shù)隨被匹配的字符串而定。這種重復(fù)匹配不定次數(shù)的表達式在匹配過程中,總...
showImg(https://segmentfault.com/img/bVbfGSV?w=719&h=718); showImg(https://segmentfault.com/img/bVbfGTc?w=801&h=552); showImg(https://segmentfault.com/img/bVbfGTq?w=1017&h=501);
摘要:介紹這周開始學(xué)習(xí)老姚大佬的正則表達式迷你書,然后習(xí)慣性的看完一遍后,整理一下知識點,便于以后自己重新復(fù)習(xí)。感謝原書作者老姚,本文無意抄襲,只是作為自己知識點的整理,后續(xù)也會整理到自己的知識庫網(wǎng)站中。等價于,表示出現(xiàn)次。 showImg(https://segmentfault.com/img/remote/1460000018530584?w=919&h=449); 介紹 這周開始學(xué)習(xí)...
摘要:本文主要分析對象是的源碼中的正則表達式。表示空白符,包括空格,水平制表符,垂直制表符,換行符,回車符,換頁符。 對于Zepto源碼分析,可以說是每個前端修煉自己js技能的必經(jīng)之路。當(dāng)然,在讀源碼過程中,比較難以理解的地方,就是里面出現(xiàn)的各種神奇的正則表達式。 本文主要分析對象是zepto@1.1.6的源碼中的正則表達式。 這篇文章,主要總結(jié)了zepto源碼中使用到的一些正則表達式,分析...
閱讀 1061·2023-04-26 02:02
閱讀 2401·2021-09-26 10:11
閱讀 3553·2019-08-30 13:10
閱讀 3743·2019-08-29 17:12
閱讀 720·2019-08-29 14:20
閱讀 2187·2019-08-28 18:19
閱讀 2230·2019-08-26 13:52
閱讀 954·2019-08-26 13:43