第十五章正則表達式 · HTML5游戲入門（下）之Javascript

#第十五章正則表達式講師：_無腦碼農(張磊)_ 博客：http://www.h5code.com 課程內容： [TOC] >假設用戶需要在HTML表單中填寫姓名、地址、出生日期等。那么在將表單提交到服務器進一步處理前，JavaScript程序會檢查表單以確認用戶確實輸入了信息并且這些信息是符合要求的。 ###1.什么是正則表達式 >正則表達式(regular expression)是一個描述字符模式的對象。ECMAScript的RegExp類表示正則表達式，而String和RegExp都定義了使用正則表達式進行強大的模式匹配和文本檢索與替換的函數。 >正則表達式主要用來驗證客戶端的輸入數據。用戶填寫完表單單擊按鈕之后，表單就會被發送到服務器，在服務器端通常會用PHP、ASP.NET 等服務器腳本對其進行進一步處理。因為客戶端驗證，可以節約大量的服務器端的系統資源，并且提供更好的用戶體驗。 ###2.創建正則表達式 >創建正則表達式和創建字符串類似，創建正則表達式提供了兩種方法，一種是采用new運算符，另一個是采用字面量方式。 **1.兩種創建方式** ~~~ var box = new RegExp('box'); //第一個參數字符串 var box = new RegExp('box', 'ig'); //第二個參數可選模式修飾符 ~~~ **模式修飾符的可選參數** | 參數 | 含義 | | -- | -- | | i | 忽略大小寫 | | g | 全局匹配 | | m | 多行匹配 | ~~~ var box = /box/; //直接用兩個反斜杠 var box = /box/ig; //在第二個斜杠后面加上模式修飾符 ~~~ **2.測試正則表達式** >RegExp 對象包含兩個方法：test()和exec()，功能基本相似，用于測試字符串匹配。test()方法在字符串中查找是否存在指定的正則表達式并返回布爾值，如果存在則返回true，不存在則返回false。exec()方法也用于在字符串中查找指定正則表達式，如果exec()方法執行成功，則返回包含該查找字符串的相關信息數組。如果執行失敗，則返回null。 **RegExp 對象的方法** | 方法 | 功能 | | -- | -- | | test | 在字符串中測試模式匹配，返回true 或false | | exec | 在字符串中執行匹配搜索，返回結果數組 | ~~~ /*使用new 運算符的test 方法示例*/ var pattern = new RegExp('box', 'i'); //創建正則模式，不區分大小寫 var str = 'This is a Box!'; //創建要比對的字符串 alert(pattern.test(str)); //通過test()方法驗證是否匹配 /*使用字面量方式的test 方法示例*/ var pattern = /box/i; //創建正則模式，不區分大小寫 var str = 'This is a Box!'; alert(pattern.test(str)); /*使用一條語句實現正則匹配*/ alert(/box/i.test('This is a Box!')); //模式和字符串替換掉了兩個變量 /*使用exec 返回匹配數組*/ var pattern = /box/i; var str = 'This is a Box!'; alert(pattern.exec(str)); //匹配了返回數組，否則返回null ~~~ *PS：exec 方法還有其他具體應用，我們在獲取控制學完后再看。* **3.使用字符串的正則表達式方法** >除了test()和exec()方法，String對象也提供了4個使用正則表達式的方法。 **String 對象中的正則表達式方法** | 方法 | 含義 | | -- | -- | | match(pattern) | 返回pattern 中的子串或null | | replace(pattern, replacement) | 用replacement 替換pattern | | search(pattern) | 返回字符串中pattern 開始位置 | | split(pattern) | 返回字符串按指定pattern 拆分的數組 | ~~~ /*使用match 方法獲取獲取匹配數組*/ var pattern = /box/ig; //全局搜索 var str = 'This is a Box!，That is a Box too'; alert(str.match(pattern)); //匹配到兩個Box,Box alert(str.match(pattern).length); //獲取數組的長度 /*使用search 來查找匹配數據*/ var pattern = /box/ig; var str = 'This is a Box!，That is a Box too'; alert(str.search(pattern)); //查找到返回位置，否則返回-1 ~~~ *PS：因為search 方法查找到即返回，也就是說無需g 全局* ~~~ /*使用replace 替換匹配到的數據*/ var pattern = /box/ig; var str = 'This is a Box!，That is a Box too'; alert(str.replace(pattern, 'Tom')); //將Box 替換成了Tom /*使用split 拆分成字符串數組*/ var pattern = / /ig; var str = 'This is a Box!，That is a Box too'; alert(str.split(pattern)); //將空格拆開分組成數組 ~~~ **RegExp對象的靜態屬性** | 屬性 | 短名 | 含義 | | -- | -- | -- | | input| $_| 當前被匹配的字符串| |lastMatch| $& |最后一個匹配字符串| |lastParen| $+ |最后一對圓括號內的匹配子串| |leftContext| $` |最后一次匹配前的子串| |multiline| $*| 用于指定是否所有的表達式都用于多行的布爾值| |rightContext| $'| 在上次匹配之后的子串 | */*使用靜態屬性*/* *var pattern = /(g)oogle/;* *var str = 'This is google！';* *pattern.test(str); //執行一下* *alert(RegExp.input); //This is google！* *alert(RegExp.leftContext); //This is* *alert(RegExp.rightContext); //！* *alert(RegExp.lastMatch); //google* *alert(RegExp.lastParen); //g* *alert(RegExp.multiline); //false* *PS：Opera 不支持input、lastMatch、lastParen 和multiline屬性。IE 不支持multiline 屬性。* >所有的屬性可以使用短名來操作 RegExp.input 可以改寫成RegExp['$_']，依次類推。但RegExp.input 比較特殊，它還可以寫成RegExp.$_。 **RegExp對象的實例屬性** |屬性|含義| | -- | -- | |global| Boolean 值，表示g 是否已設置| |ignoreCase| Boolean 值，表示i 是否已設置| |lastIndex| 整數，代表下次匹配將從哪里字符位置開始| |multiline| Boolean 值，表示m 是否已設置| |Source |正則表達式的源字符串形式| ~~~ /*使用實例屬性*/ var pattern = /google/ig; alert(pattern.global); //true，是否全局了 alert(pattern.ignoreCase); //true，是否忽略大小寫 alert(pattern.multiline); //false，是否支持換行 alert(pattern.lastIndex); //0，下次的匹配位置 alert(pattern.source); //google，正則表達式的源字符串 var pattern = /google/g; var str = 'google google google'; pattern.test(str); //google，匹配第一次 alert(pattern.lastIndex); //6，第二次匹配的位 ~~~ *PS：以上基本沒什么用。并且lastIndex 在獲取下次匹配位置上IE 和其他瀏覽器有偏差，主要表現在非全局匹配上。lastIndex還支持手動設置，直接賦值操作*。 ###3.獲取控制 >正則表達式元字符是包含特殊含義的字符。它們有一些特殊功能，可以控制匹配模式的方式。反斜杠后的元字符將失去其特殊含義。 **字符類：單個字符和數字** |元字符/元符號|匹配情況| | -- | -- | |. |匹配除換行符外的任意字符| |[a-z0-9]| 匹配括號中的字符集中的任意字符| |[^a-z0-9] |匹配任意不在括號中的字符集中的字符| |\d |匹配數字| |\D |匹配非數字，同[^0-9]相同| |\w |匹配字母和數字及_| |\W |匹配非字母和數字及_| **字符類：空白字符** |元字符/元符號|匹配情況| | -- | -- | |\0| 匹配null 字符| |\b| 匹配空格字符| |\f| 匹配進紙字符| |\n| 匹配換行符| |\r| 匹配回車字符| |\t| 匹配制表符| |\s| 匹配空白字符、空格、制表符和換行符| |\S| 匹配非空白字符| **字符類：錨字符** |元字符/元符號|匹配情況| | -- | -- | |^ |行首匹配| |$ |行尾匹配| |\A |只有匹配字符串開始處| |\b |匹配單詞邊界，詞在[]內時無效| |\B |匹配非單詞邊界| |\G |匹配當前搜索的開始位置| |\Z |匹配字符串結束處或行尾| |\z |只匹配字符串結束處| **字符類：重復字符** |元字符/元符號|匹配情況| | -- | -- | |x? |匹配0 個或1 個x| |x* |匹配0 個或任意多個x| |x+ |匹配至少一個x| |(xyz)+ |匹配至少一個(xyz)| |x{m,n} |匹配最少m 個、最多n 個x| **字符類：替代字符** |元字符/元符號|匹配情況| | -- | -- | |this\where\logo| 匹配this 或where 或logo 中任意一個| **字符類：記錄字符** |元字符/元符號|匹配情況| | -- | -- | |(string)| 用于反向引用的分組| |\1 或$1| 匹配第一個分組中的內容| |\2 或$2| 匹配第二個分組中的內容| |\3 或$3| 匹配第三個分組中的內容| ~~~ /*使用點元字符*/ var pattern = /g..gle/; //.匹配一個任意字符 var str = 'google'; alert(pattern.test(str)); /*重復匹配*/ var pattern = /g.*gle/; //.匹配0 個一個或多個 var str = 'google'; //*,?,+,{n,m} alert(pattern.test(str)); /*使用字符類匹配*/ var pattern = /g[a-zA-Z_]*gle/; //[a-z]*表示任意個a-z 中的字符 var str = 'google'; alert(pattern.test(str)); var pattern = /g[^0-9]*gle/; //[^0-9]*表示任意個非0-9 的字符 var str = 'google'; alert(pattern.test(str)); var pattern = /[a-z][A-Z]+/; //[A-Z]+表示A-Z 一次或多次 var str = 'gOOGLE'; alert(pattern.test(str)); /*使用元符號匹配*/ var pattern = /g\w*gle/; //\w*匹配任意多個所有字母數字_ var str = 'google'; alert(pattern.test(str)); var pattern = /google\d*/; //\d*匹配任意多個數字 var str = 'google444'; alert(pattern.test(str)); var pattern = /\D{7,}/; //\D{7,}匹配至少7 個非數字 var str = 'google8'; alert(pattern.test(str)); /*使用錨元字符匹配*/ var pattern = /^google$/; //^從開頭匹配，$從結尾開始匹配 var str = 'google'; alert(pattern.test(str)); var pattern = /goo\sgle/; //\s 可以匹配到空格 var str = 'goo gle'; alert(pattern.test(str)); var pattern = /google\b/; //\b 可以匹配是否到了邊界 var str = 'google'; alert(pattern.test(str)); /*使用或模式匹配*/ var pattern = /google|baidu|bing/; //匹配三種其中一種字符串 var str = 'google'; alert(pattern.test(str)); /*使用分組模式匹配*/ var pattern = /(google){4,8}/; //匹配分組里的字符串4-8 次 var str = 'googlegoogle'; alert(pattern.test(str)); var pattern = /8(.*)8/; //獲取8..8 之間的任意字符 var str = 'This is 8google8'; str.match(pattern); alert(RegExp.$1); //得到第一個分組里的字符串內容 var pattern = /8(.*)8/; var str = 'This is 8google8'; var result = str.replace(pattern,'$1'); //得到替換的字符串輸出 document.write(result); var pattern = /(.*)\s(.*)/; var str = 'google baidu'; var result = str.replace(pattern, '$2 $1'); //將兩個分組的值替換輸出 document.write(result); ~~~ |貪婪|惰性| | -- | -- | |+ |+?| |? |??| |* |*?| |{n} |{n}?| |{n,} |{n,}?| |{n,m} |{n,m}?| ~~~ /*關于貪婪和惰性*/ var pattern = /[a-z]+?/; //?號關閉了貪婪匹配，只替換了第一個 var str = 'abcdefjhijklmnopqrstuvwxyz'; var result = str.replace(pattern, 'xxx'); alert(result); var pattern = /8(.+?)8/g; //禁止了貪婪，開啟的全局 var str = 'This is 8google8, That is 8google8, There is 8google8'; var result = str.replace(pattern,'$1'); document.write(result); var pattern = /8([^8]*)8/g; //另一種禁止貪婪 var str = 'This is 8google8, That is 8google8, There is 8google8'; var result = str.replace(pattern,'$1'); document.write(result); /*使用exec 返回數組*/ var pattern = /^[a-z]+\s[0-9]{4}$/i; var str = 'google 2012'; alert(pattern.exec(str)); //返回整個字符串 var pattern = /^[a-z]+/i; //只匹配字母 var str = 'google 2012'; alert(pattern.exec(str)); //返回google var pattern = /^([a-z]+)\s([0-9]{4})$/i; //使用分組 var str = 'google 2012'; alert(pattern.exec(str)[0]); //google 2012 alert(pattern.exec(str)[1]); //google alert(pattern.exec(str)[2]); //2012 /*捕獲性分組和非捕獲性分組*/ var pattern = /(\d+)([a-z])/; //捕獲性分組 var str = '123abc'; alert(pattern.exec(str)); var pattern = /(\d+)(?:[a-z])/; //非捕獲性分組 var str = '123abc'; alert(pattern.exec(str)); /*使用分組嵌套*/ var pattern = /(A?(B?(C?)))/; //從外往內獲取 var str = 'ABC'; alert(pattern.exec(str)); /*使用前瞻捕獲*/ var pattern = /(goo(?=gle))/; //goo 后面必須跟著gle 才能捕獲 var str = 'google'; alert(pattern.exec(str)); /*使用特殊字符匹配*/ var pattern = /\.\[\/b\]/; //特殊字符，用\符號轉義即可 var str = '.[/b]'; alert(pattern.test(str)); /*使用換行模式*/ var pattern = /^\d+/mg; //啟用了換行模式 var str = '1.baidu\n2.google\n3.bing'; var result = str.replace(pattern, '#'); alert(result); ~~~ ###4.常用的正則 1.檢查郵政編碼 ~~~ var pattern = /[1-9][0-9]{5}/; //共6 位數字，第一位不能為0 var str = '224000'; alert(pattern.test(str)); ~~~ 2.檢查文件壓縮包 ~~~ var pattern = /[\w]+\.zip|rar|gz/; //\w 表示所有數字和字母加下劃線 var str = '123.zip'; //\.表示匹配.，后面是一個選擇 alert(pattern.test(str)); ~~~ 3.刪除多余空格 ~~~ var pattern = /\s/g; //g 必須全局，才能全部匹配 var str = '111 222 333'; var result = str.replace(pattern,''); //把空格匹配成無空格 alert(result); ~~~ 4.刪除首尾空格 ~~~ var pattern = /^\s+/; //強制首 var str = ' goo gle '; var result = str.replace(pattern, ''); pattern = /\s+$/; //強制尾 result = result.replace(pattern, ''); alert('|' + result + '|'); var pattern = /^\s*(.+?)\s*$/; //使用了非貪婪捕獲 var str = ' google '; alert('|' + pattern.exec(str)[1] + '|'); var pattern = /^\s*(.+?)\s*$/; var str = ' google '; alert('|' + str.replace(pattern, '$1') + '|');//使用了分組獲取 ~~~ 5.簡單的電子郵件驗證 ~~~ var pattern = /^([a-zA-Z0-9_\.\-]+)@([a-zA-Z0-9_\.\-]+)\.([a-zA-Z]{2,4})$/; var str = 'yc60.com@gmail.com'; alert(pattern.test(str)); var pattern = /^([\w\.\-]+)@([\w\.\-]+)\.([\w]{2,4})$/; var str = 'yc60.com@gmail.com'; alert(pattern.test(str)); ~~~ *PS：以上是簡單電子郵件驗證，復雜的要比這個復雜很多，大家可以搜一下。*