假設(shè)用戶需要在?HTML?表單中填寫姓名赁濒、地址、出生日期等孟害。那么在將表單提交到服務(wù)器進(jìn)一步處理前拒炎，JavaScript?程序會檢查表單以確認(rèn)用戶確實輸入了信息并且這些信息是符合要求的。?
一．?什么是正則表達(dá)式?
正則表達(dá)式( ular?expression)是一個描述字符模式的對象挨务。ECMAScript?的?RegExp?類表示正則表達(dá)式击你，而?String?和?RegExp?都定義了使用正則表達(dá)式進(jìn)行強(qiáng)大的模式匹配和文本檢索與替換的函數(shù)。?
正則表達(dá)式主要用來驗證客戶端的輸入數(shù)據(jù)谎柄。?用戶填寫完表單單擊按鈕之后果漾，?表單就會被發(fā)送到服務(wù)器，在服務(wù)器端通常會用?PHP谷誓、ASP.NET?等服務(wù)器腳本對其進(jìn)行進(jìn)一步處理?绒障。因為客戶端驗證，可以節(jié)約大量的服務(wù)器端的系統(tǒng)資源捍歪，并且提供更好的用戶體驗户辱。?
二．?創(chuàng)建正則表達(dá)式?
創(chuàng)建正則表達(dá)式和創(chuàng)建字符串類似，創(chuàng)建正則表達(dá)式提供了兩種方法糙臼，一種是采用?new運(yùn)算符庐镐，另一個是采用字面量方式。?
1.兩種創(chuàng)建方式?
var?box?=?new?RegExp('box');?//第一個參數(shù)字符串?
var?box?=?new?RegExp('box',?'ig');?//第二個參數(shù)可選模式修飾符?
var?box?=?/box/;?//直接用兩個反斜杠?
var?box?=?/box/ig;?//在第二個斜杠后面加上模式修飾符?
2.測試正則表達(dá)式?
RegExp?對象包含兩個方法：test()和?exec()变逃，功能基本相似必逆，用于測試字符串匹配。test()方法在字符串中查找是否存在指定的正則表達(dá)式并返回布爾值揽乱，如果存在則返回?true名眉，不存在則返回?false。exec()方法也用于在字符串中查找指定正則表達(dá)式凰棉，如果?exec()方法執(zhí)行成功损拢，則返回包含該查找字符串的相關(guān)信息數(shù)組。如果執(zhí)行失敗撒犀，則返回?null福压。?
/*使用?new?運(yùn)算符的?test?方法示例*/?
var?pattern?=?new?RegExp('box',?'i');?//創(chuàng)建正則模式，不區(qū)分大小寫?
var?str?=?'This?is?a?Box!';?//創(chuàng)建要比對的字符串?
alert(pattern.test(str));?//通過?test()方法驗證是否匹配?
/*使用字面量方式的?test?方法示例*/?
var?pattern?=?/box/i;?//創(chuàng)建正則模式或舞，不區(qū)分大小寫?
var?str?=?'This?is?a?Box!';?
alert(pattern.test(str));?
/*使用一條語句實現(xiàn)正則匹配*/?
alert(/box/i.test('This?is?a?Box!'));?//模式和字符串替換掉了兩個變量?
/*使用?exec?返回匹配數(shù)組*/?
var?pattern?=?/box/i;?
var?str?=?'This?is?a?Box!';?
alert(pattern.exec(str));?//匹配了返回數(shù)組荆姆，否則返回?null?
PS：exec?方法還有其他具體應(yīng)用，我們在獲取控制學(xué)完后再看映凳。?
3.使用字符串的正則表達(dá)式方法?
除了?test()和?exec()方法胆筒，String?對象也提供了?4?個使用正則表達(dá)式的方法。?
/*使用?match?方法獲取獲取匹配數(shù)組*/?
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);?//獲取數(shù)組的長度?
/*使用?search?來查找匹配數(shù)據(jù)*/?
var?pattern?=?/box/ig;?
var?str?=?'This?is?a?Box!腐泻，That?is?a?Box?too';?
alert(str.search(pattern));?//查找到返回位置决乎，否則返回-1;?
PS：因為?search?方法查找到即返回队询，也就是說無需?g?全局?
/*使用?replace?替換匹配到的數(shù)據(jù)*/?
var?pattern?=?/box/ig;?
var?str?=?'This?is?a?Box!派桩，That?is?a?Box?too';?
alert(str.replace(pattern,?'Tom'));?//將?Box?替換成了?Tom?
/*使用?split?拆分成字符串?dāng)?shù)組*/?
var?pattern?=?/?/ig;?
var?str?=?'This?is?a?Box!，That?is?a?Box?too';?
alert(str.split(pattern));?//將空格拆開分組成數(shù)組?
??次獒 ? ? ? ? ? ??二狗子?
?RegExp;?
RegExp.input ? ? ? ? ? ? ? ? ? ? ? ?RegExp['$_']?
?/*?使用靜態(tài)屬性/?*/?
var?pattern?=?/(g)oogle/;?
var?str?=?'This?is?google蚌斩！';?
pattern.test(str);?//執(zhí)行一下?
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.$_虏束。?
/*使用實例屬性*/?
var?pattern?=?/google/ig;?
alert(pattern.global);?//true，是否全局了?
alert(pattern.ignoreCase);?//true厦章，是否忽略大小寫?
alert(pattern.multiline);?//false镇匀，是否支持換行?
alert(pattern.lastIndex);?//0，下次的匹配位置?
alert(pattern.source);?//google袜啃，正則表達(dá)式的源字符串?
var?pattern?=?/google/g;?
var?str?=?'google?google?google';?
pattern.test(str);?//google汗侵，匹配第一次?
alert(pattern.lastIndex);?//6，第二次匹配的位?
PS：?以上基本沒什么用群发。?并且?lastIndex?在獲取下次匹配位置上?IE?和其他瀏覽器有偏差?晰韵，?
主要表現(xiàn)在非全局匹配上。lastIndex?還支持手動設(shè)置熟妓，直接賦值操作宫屠。?
三．?獲取控制?
正則表達(dá)式元字符是包含特殊含義的字符。?它們有一些特殊功能滑蚯，?可以控制匹配模式的?
方式浪蹂。反斜杠后的元字符將失去其特殊含義。?
/*使用點(diǎn)元字符*/?
var?pattern?=?/g..gle/;?//.匹配一個任意字符?
var?str?=?'google';?
alert(pattern.test(str));?
/*重復(fù)匹配*/?
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*匹配任意多個所有字母數(shù)字_?
var?str?=?'google';?
alert(pattern.test(str));?
var?pattern?=?/google\d*/;?//\d*匹配任意多個數(shù)字?
var?str?=?'google444';?
alert(pattern.test(str));?
var?pattern?=?/\D{7,}/;?//\D{7,}匹配至少?7?個非數(shù)字?
var?str?=?'google8';?
alert(pattern.test(str));?
/*使用錨元字符匹配*/?
var?pattern?=?/^google$/;?//^從開頭匹配告材，$從結(jié)尾開始匹配?
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);?//得到第一個分組里的字符串內(nèi)容?
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);?
/*關(guān)于貪婪和惰性*/?
var?pattern?=?/[a-z]+?/;?//?號關(guān)閉了貪婪匹配坤次，只替換了第一個?
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?返回數(shù)組*/?
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?)))/;?//從外往內(nèi)獲取?
var?str?=?'ABC';?
alert(pattern.exec(str));?
/*使用前瞻捕獲*/?
var?pattern?=?/(goo(?=gle))/;?//goo?后面必須跟著?gle?才能捕獲?
var?str?=?'google';?
alert(pattern.exec(str));?
/*使用特殊字符匹配*/?
var?pattern?=?/\.\[\/b\]/;?//特殊字符斥赋，用\符號轉(zhuǎn)義即可?
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);?
四．?常用的正則?
1.檢查郵政編碼?
var?pattern?=?/[1-9][0-9]{5}/;?//共?6?位數(shù)字缰猴，第一位不能為?0?
var?str?=?'224000';?
alert(pattern.test(str));?
2.檢查文件壓縮包?
var?pattern?=?/[\w]+\.zip|rar|gz/;?//\w?表示所有數(shù)字和字母加下劃線?
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+/;?//強(qiáng)制首?
var?str?=?'?goo?gle?';?
var?result?=?str.replace(pattern,?'');?
pattern?=?/\s+$/;?//強(qiáng)制尾?
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：以上是簡單電子郵件驗證滑绒，復(fù)雜的要比這個復(fù)雜很多闷堡，大家可以搜一下。?
