摘要:的對象表示正則表達式,而和都定義了使用正則表達式進行強大的模式匹配和文本檢索與替換的函數。對象也提供了個使用正則表達式的方法。如正則表達式將匹配除了和所有大寫字母之外的任何字符。
前端學習:教程&開發模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源匯總
歡迎提issues斧正:正則表達式
JavaScript-正則表達式 正則表達式簡述正則表達式(regular expression)描述了一種字符串匹配模式,可以用來檢查一個字符串是否含有某類字符串、將匹配的字符串做替換或者從某個字符串中取出符合某個條件的字符串等。ECMAScript的RegExp對象表示正則表達式,而String 和RegExp 都定義了使用正則表達式進行強大的模式匹配和文本檢索與替換的函數。
正則表達式修飾符參數 含義 備注 i 忽略大小寫 g 全局匹配 m 多行匹配 u 正確處理四個字節的UTF-16編碼 ES6新增 y 確保匹配必須從剩余的第一個位置開始 ES6新增正則表達式創建
創建正則表達式和創建字符串類似,創建正則表達式提供了兩種方法,一種是采用new
運算符,另一個是采用字面量方式。
var xzavier = new RegExp("xzavier"); //第一個參數字符串 var xzavier = new RegExp("xzavier", "ig"); //第二個參數可選修飾符 var xzavier = /xzavier/; //直接用兩個反斜杠 var xzavier = /xzavier/ig; //第二個斜杠后面加上的是修飾符
和對象數組等一樣,我們一致推崇使用字面量的方式。簡便快捷。但是也有必須使用new的方式,
當你的正則表達式中含有變量的時候:
var reg = "v"; var pattern = new RegExp("xza" + reg + "ier"); // 這時候就不能使用字面量的方式了正則表達式方法
RegExp 對象的test() 方法在字符串中查找是否存在指定的正則表達式并返回布爾值,如果存在則返回true,不存在則返回false。
var pattern = new RegExp("xzavier", "i"); //正則模式,不區分大小寫 var pattern1 = /xzavier/i; //創建正則模式,不區分大小寫 var str = "This is Xzavier!"; console.log(pattern.test(str)); //true console.log(pattern1.test(str)); //true console.log(/xzavier/i.test(str)); //true
RegExp 對象的exec()方法也用于在字符串中查找指定正則表達式,如果exec()方法執行成
功,則返回包含該查找字符串的相關信息數組。如果執行失敗,則返回null。
var pattern = new RegExp("xzavier", "i"); var pattern1 = /xzavier/i; var str = "This is Xzavier!"; console.log(pattern.exec(str)); //["Xzavier"] console.log(pattern1.exec(str)); //["Xzavier"] console.log(/xzavier1/i.exec(str)); //null
String 對象也提供了4 個使用正則表達式的方法。
match(pattern) 返回pattern中的匹配的字符串或null:
var pattern = /xzavier/ig; //全局匹配 var str = "This is Xzavier, this is Xzavier too."; console.log(str.match(pattern)); //["Xzavier", "Xzavier"] console.log(str.match(pattern).length); //2 console.log("javascript".match(/xzavier/ig)); //null
replace(pattern, replacement) 用replacement替換pattern:
var pattern = /xzavier/ig; var str = "This is Xzavier, this is Xzavier too."; console.log(str.replace(pattern, "JavaScript")); //This is JavaScript, this is JavaScript too.
search(pattern) 返回字符串中pattern開始位置,查找到返回位置,否則返回-1:
var pattern = /xzavier/i; var str = "This is Xzavier, this is Xzavier too."; var str1 = "This is JavaScript, this is JavaScript too."; console.log(str.search(pattern)); //8 console.log(str1.search(pattern)); //-1
split(pattern) 返回字符串按指定pattern 拆分的數組:
var pattern = / /ig; var str = "This is Xzavier, this is Xzavier too."; console.log(str.split(pattern)); //["This", "is", "Xzavier,", "this", "is", "Xzavier", "too."]RegExp對象的靜態屬性
屬性 短名 含義 input $_ 當前被匹配的字符串 lastMatch $& 最后一個匹配字符串 lastParen $+ 最后一對圓括號內的匹配子串 leftContext $` 最后一次匹配前的子串 rightContext $" 在上次匹配之后的子串 var pattern = /(x)zavier/; var str = "This is xzavier!"; pattern.test(str); console.log(RegExp.input); //This is xzavier! console.log(RegExp.leftContext); //This is console.log(RegExp.rightContext); //! console.log(RegExp.lastMatch); //xzavier console.log(RegExp.lastParen); //xRegExp對象的實例屬性
屬性 含義 global Boolean值,表示g是否已設置 ignoreCase Boolean 值,表示i 是否已設置 lastIndex 整數,代表下次匹配將從哪里字符位置開始 multiline Boolean值,表示m是否已設置 Source 正則表達式的源字符串形式 var pattern = /xzavier/ig; console.log(pattern.global); //true,是否設置了全局 console.log(pattern.ignoreCase); //true,是否設置了忽略大小寫 console.log(pattern.multiline); //false,是否設置了換行 console.log(pattern.lastIndex); //0,下次匹配位置 console.log(pattern.source); //xzavier,正則表達式的源字符串正則表達式元字符 字符類:單個字符和數字
說一下/./ 和 /[.]/ 只能匹配".",不匹配通配符
引用符,用來將這里列出的這些元字符當作普通的字符來進行匹配。如.用來匹配點字符,而不是任何字符的通配符。
[ ],[c1-c2],[^c1-c2]
字符組,匹配括號中的任何一個字符,并不是要全部匹配。如/x[zav]e/匹配xze、xae和xve,但是不匹配xxe。如/[0-9]/可以匹配任何數字字符;如/[A-Za-z]/可以匹配任何大小寫字母。如正則表達式[^269A-Z] 將匹配除了2、6、9和所有大寫字母之外的任何字符。
對于這兩個操作符,特殊符號沒有絕對規律,倒是特殊字母匹配符還是有規律的,見下
"love.".replace(/./, ""); //"ove." 通配 "love.".replace(/./, ""); //"love" 點 "love.".replace(/[.]/, ""); //"love" 點 "love.".replace(/[.]/, ""); //"love" 點 但是: "lo v^se.".replace(/^/, ""); //"lo vse." 匹配^ "lo v^se.".replace(/[^]/, ""); //"o v^se." 匹配開始去了,并沒有匹配^ "lo v^se.".replace(/[^]/, ""); //"lo vse." 要加一個這樣才匹配^ "lo vse.".replace(/s/, ""); //"lovse." 匹配空格 "lo vse.".replace(/[s]/, ""); //"lo ve." 匹配字母 "lo vse.".replace(/[s]/, ""); //"lovse." 要加一個才匹配空格 " lovte.".replace(/ /, ""); //"lovte. 匹配制表符 " lovte.".replace(/[t]/, ""); //" love." 匹配字母 " lovte.".replace(/[ ]/, ""); //"lovte." 要加一個才匹配制表符字符類:空白字符
是匹配字符串開頭結尾及空格回車等的位置,單詞邊界, 不會匹配空格符本身。s則是匹配空白字符本身、空格符本身、換行符本身。
字符類:錨字符 字符類:重復字符 字符類:替代字符a|b|c 匹配a或b或c中的任意一個字符類:記錄字符
$n 與 regexp 中的第 n(1~99) 個子表達式相匹配的文本 $& 表示與 regexp 相匹配的子串 $` 位于匹配子串左側的文本 $" 位于匹配子串右側的文本 $$ 直接量符號 "you are beautiful".replace(/beautiful/g, "so $&"); //"you are so beautiful" "leftright".replace(/right/, "$`"); //"leftleft" "leftright".replace(/left/, "$""); //"rightright"貪婪模式和惰性模式
貪婪 惰性 "+" +? ? ?? * *? {n} {n}? {n,} {n,}? {n,m} {n,m}? var pattern = /[a-z]+/; //貪婪匹配,全部替換 var str = "qqqwwweee"; var result = str.replace(pattern, "xxx"); console.log(result); //xxx var pattern = /[a-z]+?/; //?號關閉了貪婪匹配,只替換了第一個 var str = "qqqwwweee"; var result = str.replace(pattern, "xxx"); console.log(result); //xxxqqwwweee斷言
先行斷言: x(?=y),找到x后面緊跟著y的位置,如果找到則匹配這個位置
var pattern = /(xza(?=vier))/; //xza后面必須跟著vier才能捕獲 var str = "hello,xzavier"; console.log(pattern.test(str)); //true
先行否定斷言 x(?!y),找到x后面不是y的位置,如果找到則匹配這個位置
var pattern = /(xza(?!vier))/; //xza后面必須跟著的不是vier才能捕獲 var str = "hello,xzaqqqvier"; console.log(pattern.test(str)); //true
可惜,JavaScript不支持 后行斷言 和 后行否定斷言。
當然,現在不支持,不代表未來不支持。雖然外面最新的ES6也沒有推出正式的標準,但是已經有了提案,ES7中應該會推出標準實現 后行斷言 和 后行否定斷言。
屆時我們可能就能用到這兩個功能,這樣的代碼了:
var pattern = /(?=xza)vier/; //vier前面必須是xza才能捕獲 var str = "hello,xzavier"; console.log(pattern.test(str)); //true var pattern = /(?!xza)vier)/; //vier前面必須不是xza才能捕獲 var str = "hello,xzaqqqvier"; console.log(pattern.test(str)); //true
這代碼現在是不能使用的,但是我們想要實現類似的功能,用別的方式,多寫兩行代碼也就實現了。
捕獲性分組和非捕獲性分組捕獲性分組
var pattern = /(d+)([a-z])/; //捕獲性分組 var str = "123abc"; console.log(pattern.exec(str)); //["123a", "123", "a"]
非捕獲性分組 格式: (?:x)
var pattern = /(d+)(?:[a-z])/; //非捕獲性分組 var str = "123abc"; console.log(pattern.exec(str)); //["123a", "123"]常用正則表達式
親測有效:
匹配中文字符: [u4e00-u9fa5]
匹配Email地址:w[-w.+]*@([A-Za-z0-9][-A-Za-z0-9]+.)+[A-Za-z]{2,14}/
去除首尾空白:/(^s*)|(s*$)/g
去除多余空格:/s/g
身份證:d{17}[d|x]|d{15}
ip地址:d+.d+.d+.d+
網址URL: ^((https|http|ftp|rtsp|mms)?://)[^s]+
QQ號:[1-9]{4,}
數字串千分法:
function commafy(num){ return num && num .toString() .replace(/(d)(?=(d{3})+.)/g, function($1, $2){ return $2 + ","; }); } commafy(1234567.002); // 1,234,567.002"
判斷手機app內置瀏覽器:
var ua = navigator.userAgent.toLowerCase(), isWx = /microMessenger/i.test(ua), isQQ = /s+qq//ig.test(ua), isQZone = /qzone/i.test(ua), isWeibo = /weibo/i.test(ua);
首字母大寫:
str = "hello woRld"; String.prototype.initCap = function () { return this.toLowerCase().replace(/(?:^|s)[a-z]/g, function (s) { return s.toUpperCase(); }); }; console.log(str.initCap()); //Hello World
"yyyy-mm-dd" 格式的日期校驗(平閏年):
function testDate(str) { var reg = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/; return reg.test(str); } testDate("2016-03-12"); //true testDate("2016-23-12"); //false testDate("2016-02-29"); //true testDate("2017-02-29"); //false
延伸閱讀:正則表達式的擴展
測試:在線正則表達式測試
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/87780.html
摘要:特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入匯總深似海。還有很多不足&遺漏的地方,歡迎補充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應和斧正,會及時更新,平時業務工作時也會不定期更...
摘要:業務越復雜,邏輯就越復雜,判斷就越多比較判斷比較判斷是比較兩個值,返回一個布爾值,表示是否滿足比較條件。對于非布爾值的數據,取反運算符會自動將其轉為布爾值。 前端學習:教程&開發模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源匯總 歡迎提issues斧正:========== JavaScript-判斷 代碼中,多多少少會有判斷語句。業務越復雜,邏輯就越...
摘要:接收響應當請求發送到服務器端,收到響應后,響應的數據會自動填充對象的屬性。一般而已狀態代碼為作為成功的標志。必要時,可以將查詢字符串參數追加到的末尾,以便提交給服務器。后端實現可以自學一點后端知識,便于學習。 前端學習:教程&開發模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源匯總 歡迎提issues斧正:Ajax JavaScript-Ajax&&no...
摘要:該對象包含了函數的所有局部變量命名參數參數集合以及,然后此對象會被推入作用域鏈的前端。如果整個作用域鏈上都無法找到,則返回。此時的作用域鏈包含了兩個對象的活動對象和對象。 前端學習:教程&開發模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源匯總 歡迎提issues斧正:閉包 JavaScript-閉包 閉包(closure)是一個讓人又愛又恨的somet...
摘要:創建數組數組字面量數組構造函數參數為數組建議使用數組字面量方式,性能好,代碼少,簡潔,畢竟代碼少。數組判斷方法用來判斷某個值是否為。的這是最簡潔最直接的遍歷數組元素的語法。把數組轉換為本地數組,并返回結果。 前端學習:前端教程&開發模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源匯總 歡迎提issues斧正:數組&數組方法使用詳解 Array對象 之前一...
閱讀 1340·2021-09-01 11:40
閱讀 3952·2021-08-05 10:03
閱讀 982·2019-08-30 15:54
閱讀 2823·2019-08-29 12:53
閱讀 3189·2019-08-29 12:23
閱讀 945·2019-08-26 13:45
閱讀 2284·2019-08-26 10:41
閱讀 2542·2019-08-23 16:44