假設(shè)用戶需要在?HTML?表單中填寫姓名、地址、出生日期等。那么在將表單提交到服務(wù)器進一步處理前，JavaScript?程序會檢查表單以確認用戶確實輸入了信息并且這些信息是符合要求的。?
一．?什么是正則表達式?
正則表達式( ular?expression)是一個描述字符模式的對象。ECMAScript?的?RegExp?類表示正則表達式，而?String?和?RegExp?都定義了使用正則表達式進行強大的模式匹配和文本檢索與替換的函數(shù)。?
正則表達式主要用來驗證客戶端的輸入數(shù)據(jù)。?用戶填寫完表單單擊按鈕之后，?表單就會被發(fā)送到服務(wù)器，在服務(wù)器端通常會用?PHP、ASP.NET?等服務(wù)器腳本對其進行進一步處理?。因為客戶端驗證，可以節(jié)約大量的服務(wù)器端的系統(tǒng)資源，并且提供更好的用戶體驗。?
二．?創(chuàng)建正則表達式?
創(chuàng)建正則表達式和創(chuàng)建字符串類似，創(chuàng)建正則表達式提供了兩種方法，一種是采用?new運算符，另一個是采用字面量方式。?
1.兩種創(chuàng)建方式?
var?box?=?new?RegExp('box');?//第一個參數(shù)字符串?
var?box?=?new?RegExp('box',?'ig');?//第二個參數(shù)可選模式修飾符?
var?box?=?/box/;?//直接用兩個反斜杠?
var?box?=?/box/ig;?//在第二個斜杠后面加上模式修飾符?
2.測試正則表達式?
RegExp?對象包含兩個方法：test()和?exec()，功能基本相似，用于測試字符串匹配。test()方法在字符串中查找是否存在指定的正則表達式并返回布爾值，如果存在則返回?true，不存在則返回?false。exec()方法也用于在字符串中查找指定正則表達式，如果?exec()方法執(zhí)行成功，則返回包含該查找字符串的相關(guān)信息數(shù)組。如果執(zhí)行失敗，則返回?null。?
/*使用?new?運算符的?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.使用字符串的正則表達式方法?
除了?test()和?exec()方法，String?對象也提供了?4?個使用正則表達式的方法。?
/*使用?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?拆分成字符串數(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，正則表達式的源字符串?
var?pattern?=?/google/g;?
var?str?=?'google?google?google';?
pattern.test(str);?//google，匹配第一次?
alert(pattern.lastIndex);?//6，第二次匹配的位?
PS：?以上基本沒什么用。?并且?lastIndex?在獲取下次匹配位置上?IE?和其他瀏覽器有偏差?，?
主要表現(xiàn)在非全局匹配上。lastIndex?還支持手動設(shè)置，直接賦值操作。?
三．?獲取控制?
正則表達式元字符是包含特殊含義的字符。?它們有一些特殊功能，?可以控制匹配模式的?
方式。反斜杠后的元字符將失去其特殊含義。?
/*使用點元字符*/?
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+/;?//強制首?
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：以上是簡單電子郵件驗證，復(fù)雜的要比這個復(fù)雜很多，大家可以搜一下。?
