摘要:正則表達式基礎實戰篇在理論基礎篇之后呢應該就對正則表達式有了一些了解比如說如何去創建一個正則表達式以及其中的匹配規則等等那么就開始正則表達式的實戰吧建議把所有的實例在窗口敲一遍例子中展現的只是一部分配合正則表達式理論基礎篇地址原址使用效
正則表達式-基礎實戰篇
一個手機號碼匹配的進化歷程在理論基礎篇之后呢,應該就對正則表達式有了一些了解.比如說如何去創建一個正則表達式以及其中的匹配規則等等.那么就開始正則表達式的實戰吧!
建議把所有的實例在console窗口敲一遍.例子中展現的只是一部分,配合《正則表達式-理論基礎篇》SF地址、原址使用效果更佳哦!
第一階段-字符直接量:匹配自身實例代碼依托于:RegExpObj.test(String),其含義是測試正則表達式與指定字符串是否匹配。成功匹配返回true
先假設一個手機號碼為13762571094.
最初形態
/13762571094/.test("13783281094");//false /13762571094/.test("13762571094");//true /13762571094/.test("ui13762571094dd");//true //正則表達式在匹配時,只要輸出匹配內容就返回true,不考慮前面的ui和后面的dd //最后這種情況顯然不是我們想要的.那么就進入下一階段的實踐吧.第二階段-錨點:指定匹配位置
^匹配起始位置
/^http:/.test("http://www.163.com");//true /^http:/.test("ahttp://www.163.com");//false /^http:/.test("https://www.163.com");//false
$匹配結尾位置
/.jpg$/.test("1.jpg");//true /.jpg$/.test("1.jpg png");//false /.jpg$/.test("1.png");//false /.jpg$/.test("regexp.png");//false
:匹配單詞邊界
/is/.test("this");//false /is/.test("that is reg");//true
在了解錨點之后我們的正則就有了第一次進化
/^13762571094$/.test("13762571094");//true /^13762571094$/.test("ui13762571094dd");//false //此時這個程序就能正確識別頭尾的字符了.下面我們看看 /^13762571094$/.test("13712345674");//false /*在試過了多個號碼后發現,這個正則只能識別這個標準的手機號碼. 這顯然不是我們想要的,而不是識別一個手機號碼的格式. 在下一階段我們將實現一個手機號碼的匹配.*/第三階段-字符類:匹配一類字符中的一個
[abc]:a或b或c。[0-9]:一個數字
[^0-9]:非數字的一個字符。[a-z]:一個字母
. :任一字符(換行符除外)
[0-9]/.test("123")//true /[0-9]/.test("asd")//false /[^0-9]/.test("asd")//true /[a-z]/.test("asd")//true /./.test("allen")//true /./.test("12")//true
了解了字符類后,我們就可以進行第二次進化(50%)。此時就能匹配一個手機號碼啦!
/^1[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]$/.test("13762571094");//true /^1[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]$/.test("13712345678");//true //是不是感覺代碼太長了呢?[0-9]足足5個字符呢,為了省力,當然不會就這樣算了.繼續向下看吧元字符-具有特殊意義的字符
其實我們已經在前面使用過它啦
^、$、。
d:[0-9]。D:[^d]
s:空白符。S:[^s]
w:[A-Za-z0-9_]。W:[^w]
/d/.test("123");//true /d/.test("1dsf");//true /D/.test("1dsf");//true /D/.test("123");//false //自己再多去實驗一些例子吧
了解了元字符后我們就可以進行第二次進化(100%)了。
/^1ffffdffffdffffdd$/.test("13762571094");//true /^1ffffdffffdffffdd$/.test("13712345678");//true /^1ffffdffffdffffdd$/.test("1376257109x");//false //是不是感覺代碼比剛剛短了很多了呢?但這還是不夠,什么事情都阻止不了我想偷懶的心,繼續學習吧.第四階段-量詞:出現的次數
{n,m}:n到m次。?:{0,1}
+:{1,}。*:{0,}
/d*/.test("abc");//true /d+/.test("abc");//false /d+/.test("1abc");//true /^https?:/.test("http://www.163.com");//true /^https?:/.test("https://www.163.com");//true /^https?:/.test("httpss://www.163.com");//false
此時我們的匹配手機號碼的正則表達式就到了最后階段了
/^1d{10}$/.test("13762571094");//true /^1d{10}$/.test("13712345678");//true /^1d{10}$/.test("1376257109x");//false //到這里手機號碼就匹配完成了!需要注意的地方-轉義符:需要匹配的字符是元字符
/^http:///../@163.com$/
/http:///.test("http://www.163.com");//true /@163.com$/.test("abc@163.com");//true /@163.com$/.test("abc@163acom");//true /@163.com$/.test("abc@163.com");//true /@163.com$/.test("abc@163acom");//false多選分支:網易郵箱的匹配
/thi(c|n)k/===thi[cn]k
.(png|jpg|jpeg|gif)$:檢測一個文件是不是圖片文件.
/(w+)@(163|126|188).com$/.test("guo啊圣誕節了@163acom")//false /(w+)@(163|126|188).com$/.test("guodong111@163acom")//false /(w+)@(163|126|188).com$/.test("guodong111@163.com")//true捕獲
保存匹配到的字符串,日后再用
():捕獲/(w+)@(163|126|188).com$/
(?:):不捕獲/(w+)@(?:163|126|188).com$/
使用:
$1,$2,...
api參數或返回值
獲取匹配的字符串:String.match(regexp)var url = "http://blog.163.com/album?id=1#comment"; var reg = /^(https?:)//([^/]+)(/[^?]*)?(?[^#]*)?(#.*)?$/; // var reg = /^(https?:)//([^/]+)([^?]*)([^#]*)(.*)$///與上面的正則效果相同.; var arr = url.match(reg); //arr[0]為原字符串."http://blog.163.com/album?id=1#comment" //對應括號所匹配的字符 var protocol= arr[1]//"http:" var host= arr[2]//"blog.163.com" var pathname= arr[3]//"/album" var search= arr[4]//"?id=1" var hash= arr[5]//"#comment"替換一個子串:str.replace(regexp/substr,replacement)
第二個參數是字符時
var str = "the price of tomato is 5, the price of apple is 10." str.replace(/(d+)/,"$1.00") "the price of tomato is 5.00, the price of apple is 10." //使用全局模式 str.replace(/(d+)/g,"$1.00") "the price of tomato is 5.00, the price of apple is 10.00."
第二個參數是函數時
var html = ""; html = html.replace(/[<>]/g, function(m0){ switch(m0){ case "<": return "<"; case ">": return ">"; } }); console.log(html);//更強大的檢索 - regexpObj.exec(str)
更詳盡的結果:index
過程的狀態:lastIndex
感覺基本用不到..就不說了...喜歡就推薦一下吧^_^
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86183.html
摘要:正則表達式基礎實戰篇在理論基礎篇之后呢應該就對正則表達式有了一些了解比如說如何去創建一個正則表達式以及其中的匹配規則等等那么就開始正則表達式的實戰吧建議把所有的實例在窗口敲一遍例子中展現的只是一部分配合正則表達式理論基礎篇地址原址使用效 正則表達式-基礎實戰篇 在理論基礎篇之后呢,應該就對正則表達式有了一些了解.比如說如何去創建一個正則表達式以及其中的匹配規則等等.那么就開始正則表達...
摘要:基礎語法鞏固正則表達式引擎根據正則去匹配字符的時候,是通過檢查索引的方式。妻原配就是好,可以直接使用正則表達式調用它。下面解釋一下上面這些常用的元字符查找單個字符,除了換行和行結束符。正則系列文章整理到了 上一章內容:正則表達式實戰篇 知識回顧 前2章分別學習了正則表達式入門技巧,以及遇到正則需求該如何去分析問題,還有正則表達式實戰的一些場景解釋。 這一章內容偏向理論,推薦你點擊開頭的...
摘要:特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入匯總深似海。還有很多不足&遺漏的地方,歡迎補充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應和斧正,會及時更新,平時業務工作時也會不定期更...
閱讀 2368·2021-11-18 10:07
閱讀 2318·2021-09-22 15:59
閱讀 3077·2021-08-23 09:42
閱讀 2276·2019-08-30 15:44
閱讀 1191·2019-08-29 15:06
閱讀 2303·2019-08-29 13:27
閱讀 1210·2019-08-29 13:21
閱讀 1412·2019-08-29 13:13