《十章通用表示法》由会员分享，可在线阅读，更多相关《十章通用表示法（45页珍藏版）》请在金锄头文库上搜索。
1、JavaScript 程式設計與應用：用於網頁用戶端十章通用表示法Stillwatersrundeep.流静水深流静水深,人静心深人静心深Wherethereislife,thereishope。有生命必有希望。有生命必有希望JavaScript 程式設計與應用：用於網頁用戶端本章大綱n大綱n本章介紹通用表示法，使用強大的字串比對方式，可以在進行JavaScript程式設計時，能夠有事半功倍的效果。n主題n10-1：資料驗證n10-2：資料修改n10-3：通用式相關列表n10-4：常用資料規則2/45JavaScript 程式設計與應用：用於網頁用戶端10-1：資料驗證n本小節介紹通用表示法及
2、其用法。3/45JavaScript 程式設計與應用：用於網頁用戶端基本介紹n通用表示法或通用式（Regularexpressions）是在UNIX中發展出的字串比對技巧。nRegularexpressions應該翻成正規表示法或正規式，但是我們使用通用表示法或通用式似乎更能適切地表達其功能。n目標：用格式簡單、功能強大的符號來比對複雜的字串。n許多軟體或指令都支援通用表示法。nJavaScript及Vbscript：格式稍不同，但功能一樣nUnix指令：如grep、sed、awk、ed、vi、emacs等。nMATLAB,Python,Perl,4/45JavaScript 程式設計與應用：
3、用於網頁用戶端JavaScript的通用式n通用式是一個內建的物件n建構函數（Constructionfunctoin）為RegExp。n用法n說明npattern是通用表示法的字串。nflag是比對的方式：ng：全域比對（Globalmatch）ni：忽略大小寫（Ignorecase）ngi：全域比對並忽略大小寫re=newRegExp(pattern,flag)re=/pattern/flag/上面的簡寫格式5/45JavaScript 程式設計與應用：用於網頁用戶端範例10-1(1)n主題：簡易身分證字號驗證n連結：regExpID01.htm(remotehost,localhost)
4、n程式碼重點n說明nre=/A-Zd9$/就是一個通用式。n以re.test()比對字串string，回傳true代表比對正確，反之回傳false。functioncheckID(string)re=/A-Zd9$/;if(re.test(string)alert(成功！符合+re+的格式！);elsealert(失敗！不符合+re+的格式！);6/45JavaScript 程式設計與應用：用於網頁用戶端範例10-1(2)n通用表示法解釋：/A-Zd9$/n比對數個字元中的任一個字元，可用，並可用-來代表字母或是數字的範圍。nA-Z 代表由A至Z的任一個英文字母。（亦可寫成ABCDEFGHIJ
5、KLMNOPQRSTUVWXYZ）na-zA-Z 代表不限大小寫的一個英文字母nd 代表0至9的數字。n亦可寫成0-9或0123456789n9代表前一個字元的重複次數。nd9 代表需要有九個數字。n代表字串開始位置。n$ 代表字串結束位置。n若沒以上兩個符號，那麼只要任一個字串中間比對成功即可。7/45JavaScript 程式設計與應用：用於網頁用戶端範例10-2n主題：簡易信用卡卡號驗證n連結：regExpCreditCardNumber01.htm(remotehost,localhost)n程式碼重點n說明n也可寫成：re=/(d4-)3d4$/n重複的部分多於一個字母，必須將需要重
6、複的部分放入小括號內，再由大括號包夾重複的次數。re=/d4-d4-d4-d4$/8/45JavaScript 程式設計與應用：用於網頁用戶端範例10-3n主題：簡易英文名字驗證n連結：regExpEnglishName01.htm(remotehost,localhost)n程式碼重點n說明nA-Za-z-：一個英文字母（可以大寫或小寫），或字元-n-：已經有特殊意義，必須在-之前加上n+：重複前一個字元一次或多次n A-Za-z-+ ：英文字或-形成的字串，且長度至少為1ns：空白字元，可以是空格、定位鍵、換列字元re1=/A-Za-z-+s+A-Za-z-+$/;re2=/A-Za-z-
7、+s+A-Za-z-+s+A-Za-z-+$/;9/45JavaScript 程式設計與應用：用於網頁用戶端範例10-4n主題：簡易電子郵件格式驗證n連結：regExpEmail01.htm(remotehost,localhost)n程式碼重點n說明n.：比對任一個字元（不包含換列字元）n.+：長度不為零的字串n.：.原先已具有特殊意義，必須加上反斜線n.2,3：長度為2到3個字元re=/.+.+.2,3$/;10/45JavaScript 程式設計與應用：用於網頁用戶端範例10-5n主題：電子郵件格式驗證（可避開含有空白的電子郵件帳號）n連結：regExpEmail02.htm(remot
8、ehost,localhost)n說明ns ：所有可能的空白字元，包含空白、定位鍵、換列字元等（不包含全形的空白）n：在中括弧內是代表否定注意注意：在一般通用表示法的意義是字串開始的位置，但放在中括弧中括弧內內，則代表否定或非。ns+：一個或多個非空白字元所形成的字串re=/s+s+.s2,3$/;11/45JavaScript 程式設計與應用：用於網頁用戶端範例10-5(2)n主題：電子郵件格式驗證（可避開含有空白的電子郵件帳號）n若要對電郵進行更嚴苛的比對，上述通用式可以改成n其中w代表一個數字、字母或底線，全等於a-zA-Z0-9_。（但這樣嚴苛的標準也可能錯誤地阻擋正常的電郵。）re=
9、/w+w+.w2,3$/;12/45JavaScript 程式設計與應用：用於網頁用戶端範例10-6n主題：通用式的完整測試頁(列出比對到字串)n連結：regExpTest01.htm(remotehost,localhost)n程式碼重點n說明n使用了字串的match()方法，對通用式進行比對。nmatched=str.match(regexp)可將比對到的字串送到一個陣列，以便後續列出比對結果。varmatched=str.match(regexp);for(vari=0;imatched.length;i+)dispstr=dispstr+n+matchedi;13/45JavaScri
10、pt 程式設計與應用：用於網頁用戶端10-2：資料修改n本小節介紹如何使用通用表示法來進行字串字串的修改。14/45JavaScript 程式設計與應用：用於網頁用戶端通用表示法的字串方法n用途n強化搜尋比對n立即修改(修特別是改表單資料)n方法字串方法 功能 string.search(re)通用式re在某個字串string出現的位置string.match(re)從字串string抽取符合通用式re的子字串，並以字串陣列傳回string.replace(re,newStr)將字串string符合通用式re的部分，代換為newStr15/45JavaScript 程式設計與應用：用於網頁用戶
11、端範例10-7n主題：搜尋並列出位置(判斷第一個符合的位置)n連結：regExpSearch01.htm(remotehost,localhost)n程式碼重點n說明nstr.search(re)將會傳回符合re的第一個位置。(若沒找到則回傳-1)nstr.search(re)只能用來搜尋某個通用式在一個字串的第一次出現的位置。functionregExpMatch(string,pattern,flag)varregexp=newRegExp(pattern,flag);varindex=string.search(regexp);alert(index);16/45JavaScript 程
12、式設計與應用：用於網頁用戶端範例10-8n主題：搜尋並列出位置(取出符合的所有子字串)n連結：regExpMatch01.htm(remotehost,localhost)n程式碼重點n說明n使用string.match(regexp)可回傳符合的所有子字串。n傳回的matched變數是一個陣列，包含所比對到的字串。functionregExpMatch(string,pattern,flag)varregexp=newRegExp(pattern,flag);varmatched=string.match(regexp);alert(matched);17/45JavaScript 程式設計
13、與應用：用於網頁用戶端範例10-9n主題：搜尋並代換n連結：regExpReplace01.htm(remotehost,localhost)n程式碼重點n說明n使用str.replace將符合通用式的第一部分替換成新字串。n欲將所有符合的替換成新字串，只要將選項改成g。functionregExpReplace(strId,pat1id,pat2id,flagId)varregexp=newRegExp(pat1id.value,flagId.value);varstr=strId.value;varnewString=str.replace(regexp,pat2id.value);ale
14、rt(newString);18/45JavaScript 程式設計與應用：用於網頁用戶端範例10-10n主題：修正中文姓名(去除表單前後空白)n連結：regExpReplace02.htm(remotehost,localhost)n程式碼重點n說明ns：英文空白字元或大五碼的全形空白。nreplace(/s+/g,)：將(/s+/g 此類字串全部代換為空字串。functioncheckChineseName(uiControl)uiControl.value=uiControl.value.replace(/s+/g,);19/45JavaScript 程式設計與應用：用於網頁用戶端範例1
15、0-11n主題：修改英文姓名(消除前後空白並合併中間空白)n連結：regExpReplace03.htm(remotehost,localhost)n程式碼重點n說明n|可以代表或。n刪除頭尾字串兩式可合併：nstr=str.replace(/s+|s+$/g,);str=str.replace(/s+/g,);/刪除頭部的空白字串str=str.replace(/s+$/g,);/刪除尾部的空白字串str=str.replace(/s+/g,);/將空白字串換成一半形空格20/45JavaScript 程式設計與應用：用於網頁用戶端通用式的比對原則n貪心比對(GreedyMatch)n遇到重
16、複字元時，貪到越多的字元越好。n最小比對(MinimumMatch)n必須在重複字元後面加上一個問號，代表在可能比對成功的情況下，比對越少越好。21/45JavaScript 程式設計與應用：用於網頁用戶端範例10-12n主題：通用式的貪心比對與最小比對n連結：regExpGreedy01.htm(remotehost,localhost)n程式碼重點n說明n第一個通用式是採取預設的貪心比對貪心比對，因此比對到的字串會是在比對成功的情況下最長長的字串。n第二個通用式中，加了一個問號，採取最小比對最小比對，因此比對到的字串是在比對成功的情況下最短短的字串。re=/b.*t/;re=/b.*?t/
17、;22/45JavaScript 程式設計與應用：用於網頁用戶端範例10-13n主題：越左越貪比對方式n連結：regExpGreedy02.htm(remotehost,localhost)n程式碼重點n說明n通用式中加括號，代表符合比對條件者，將被設定至RegExp.$1(簡寫成$1)、RegExp.$2(簡寫成$2)等變數中。n使用貪心比對時，會採用越左越貪越左越貪，若要推翻此原則，可適時使用問號，以採用最小比對。n第一個通用式採取預設的貪心比對，第二個通用式適時加入問號，因此結果不同。re=/a(.*)b(.*)d/;re=/a(.*?)b(.*)d/;23/45JavaScript 程
18、式設計與應用：用於網頁用戶端範例10-14n主題：對調兩個英文字(replace的運用)n連結：regExpReplace04.htm(remotehost,localhost)n程式碼重點n說明n/(w+)s+(w+)/：判斷兩單字位置。nreplace(regexp,$2$1)：對調兩單字位置。varregexp=/(w+)s+(w+)/;varnewString=id.innerHTML.replace(regexp,$2$1);24/45JavaScript 程式設計與應用：用於網頁用戶端範例10-15n主題：表單資料的修正與驗證n連結：regExpReplace05.htm(remo
19、tehost,localhost)n說明n利用replace()在onBlur事件時，先修正文字欄位，再進行驗證。nonBlur事件後，JavaScript會以通用式對表單元素的值進行修正與驗證。25/45JavaScript 程式設計與應用：用於網頁用戶端10-3：通用式相關列表n本小節列出常用的方法與通用式字元介紹。26/45JavaScript 程式設計與應用：用於網頁用戶端通用式方法列表通用式相關的方法 功能 re.exec(string)從字串string抽取符合通用式re的子字串，並以字串陣列傳回re.test(string)以字串string比對通用式re，並傳回比對結果（tru
20、e代表比對成功，false代表比對失敗）string.search(re)通用式re在某個字串string出現的位置string.match(re)從字串string抽取符合通用式re的子字串，並以字串陣列傳回，此功能和re.exec(string)相同string.replace(re,newStr)將字串string符合通用式re的部分，代換為newStr27/45JavaScript 程式設計與應用：用於網頁用戶端通用式的應用(1)通用式 說明及範例 比對不成立之字串 /a/含字母a的字串，例如ab,bac,cbaxyz/a./含字母a以及其後任一個字元的字串，例如ab,bac（若要比對
21、.，請使用.）a,ba/xy/以xy開始的字串，例如xyz,xyab（若要比對，請使用）axy,bxy/xy$/以xy結尾的字串，例如axy,abxy（若要比對$，請使用$）xya,xyb/13579/包含1或3或5或7或9的字串，例如：a3b,1xyy2k/0-9/含數字之字串不含數字之字串/a-z0-9/含數字或小寫字母之字串不含數字及小寫字母之字串28/45JavaScript 程式設計與應用：用於網頁用戶端通用式的應用(2)n說明：n/代表一個字串的開始位置，同理/$/代表一個字串的結束位置，但如果就代表否定。n在字元前加上，可避掉特殊字元的特殊意義。通用式 說明及範例 比對不成立之字
22、串 /a-zA-Z0-9/含數字或字母之字串不含數字及字母之字串/baeiout/bat,bet,bit,bot,butbxt,bzt/0-9/含非數字之字串，例如25f6（若要比對，請使用）只含數字之字串/aeiouAEIOU/含非母音之字串，例如“abeu（若要比對，請使用）只含母音之字串/含非之字串，例如xyz,“b29/45JavaScript 程式設計與應用：用於網頁用戶端通用式的特定字元n說明nRegExp(pattern,flag)的方式建立通用式物件時，若pattern包含以反斜線開頭的特殊字元（例如d、w、s等）時，必須加上一個反斜線。n例：re=newRegExp(d+sw
23、+,g);通用表示法的特定字元 說明 等效的通用表示法 d數字0-9D非數字0-9w數字、字母、底線a-zA-Z0-9_W非wa-zA-Z0-9_s空白字元rtnfS非空白字元rtnf30/45JavaScript 程式設計與應用：用於網頁用戶端定義字元的重複次數通用表示法 說明 /a?/零或一個a（若要比對?字元，請使用?）/a+/一或多個a（若要比對+字元，請使用+）/a*/零或多個a（若要比對*字元，請使用*）/a4/四個a/a5,10/五至十個a/a5,/至少五個a/a,3/至多三個a/a.5b/a和b中間夾五個（非換行）字元31/45JavaScript 程式設計與應用：用於網頁用戶
24、端通用式總列表(1)字元 說明 簡單範例 避開特殊字元/A*/可用於比對A*，其中*是一個特殊字元，為避開其特殊意義，所以必須加上比對輸入列的起始位置/A/可比對Abcd中的A，但不可比對aAb$比對輸入列的結束位置/A$/可比對bcdA中的A，但不可比對aAb*比對前一個字元零次或更多次/bo*/可比對Goodboook中的booo，亦可比對Goodbk中的b+比對前一個字元一次或更多次，等效於1,/a+/可比對caaandy中的aaa，但不可比對cndy?比對前一個字元零次或一次/e?l/可比對angel中的el，也可以比對angle中的l.比對任何一個字元（但換行符號不算）/.n/可比對
25、nay,anappleisonthetree中的an和on，但不可比對nay32/45JavaScript 程式設計與應用：用於網頁用戶端通用式總列表(2)字元 說明 簡單範例 (x)比對x並將符合的部分存入一個變數/(a*)and(b*)/可比對aaaandbb中的aaa和bb，並將這兩個比對得到的字串設定至變數RegExp.$1和RegExp.$2。x|y比對x或y/a+|b+/g比對aaakbb中aaa和bbn比對前一個字元n次，n為一個正整數/a3/可比對lllaaalaa其中的aaa，但不可比對aan,比對前一個字元至少n次，n為一個正整數/a3,/可比對aaaaaaaaa其中的aa
26、a及aaaa，但不可比對aan,m比對前一個字元至少n次，至多m次，m、n均為正整數/a3,4/可比對aaaaaaaaaaaaaa其中的aaa及aaaa，但不可比對aa及aaaaaxyz比對中括弧內任一字元/ecm/比對welcome中e或c或mxyz比對不在中括弧內出現的任一個字元/ecm/可比對welcome中的w、l、o，可見出其與xyz功能相反。（同時請同學也注意/與之間功能的不同。）33/45JavaScript 程式設計與應用：用於網頁用戶端通用式總列表(3)字元 說明 簡單範例 b比對退位字元（Backspacecharacter）可以比對一個backspace，也請注意b與b之
27、間的差別b比對英文字的邊界，例如空格/bnw/可以比對noonday中no;/wyb/可比對possiblyyesterday.中lyB比對非英文字的邊界/wBn/可以比對noonday中on,另外/yBw/可以比對possiblyyesterday.中的yecX比對控制字元，X是控制字元/cM/可比對一個字串中的control-Md比對任一個數字，等效於0-9/d/可比對由0至9的任一數字但其餘如字母等就不可比對D比對任一個非數字，等於0-9/D/可比對wa.但不可比對如71等數字f比對form-feed若是在文字中有發生換頁的行為則可以比對成功34/45JavaScript 程式設計與應用
28、：用於網頁用戶端通用式總列表(4)字元 說明 簡單範例 n比對換行符號若是在文字中有發生換行的行為則可以比對成功r比對carriagereturns比對任一個空白字元（Whitespacecharacter），等效於fnrtv/sw*/可比對Ab中的bS比對任一個非空白字元，等效於fnrtv/Sw*/可比對Ab中的At比對定位字元（Tab）v比對垂直定位字元（Verticaltab）w比對數字字母字元（Alphanumericalcharacters）或底線字母（_），等效於A-Za-z0-9_/w/可比對.A_!9中的A、_、9。35/45JavaScript 程式設計與應用：用於網頁用戶端
29、通用式總列表(5)字元 說明 簡單範例 W比對非數字字母字元或底線字母，等效於A-Za-z0-9_/W/可比對.A_!9中的.、!，可見其功能與/w/恰好相反。ooctal比對八進位，其中octal是八進位數目 /o123/可比對與八進位的ASCII中123所相對應的字元值。xhex比對十六進位，其中hex是十六進位數目 /x38/可比對與16進位的ASCII中38所相對應的字元。36/45JavaScript 程式設計與應用：用於網頁用戶端10-4:常用資料規則n本小節介紹日常生活中常用的資料規則。37/45JavaScript 程式設計與應用：用於網頁用戶端身分證字號的檢查碼(1)n基本認
30、知n共有10位n第一位為英文字母n第二個數字男生為1，女生為2n最後一位為檢查碼，經過之前一個字母與8個數字的組合計算後得出。38/45JavaScript 程式設計與應用：用於網頁用戶端身分證字號的檢查碼(2)n計算方法1)英文代號轉換成數字（代表出生時的戶籍所在地）2)英文轉成的數字，個位數乘再加上十位數3)各數字從右到左依次乘、4)求出(2)、(3)之和5)求出(4)除10後之餘數，用10減該餘數，結果就是檢查碼，若餘數為0，檢查碼就是0。39/45JavaScript 程式設計與應用：用於網頁用戶端身分證字號的檢查碼(3)n英文代號以下表轉換成數字（代表出生時的戶籍所在地）：A=10台
31、北市J=18新竹縣S=26高雄縣B=11台中市K=19苗栗縣T=27屏東縣C=12基隆市L=20台中縣U=28花蓮縣D=13台南市M=21南投縣V=29台東縣E=14高雄市N=22彰化縣W=32金門縣F=15台北縣O=35新竹市X=30澎湖縣G=16宜蘭縣P=23雲林縣Y=31陽明山H=17桃園縣Q=24嘉義縣Z=33連江縣I=34嘉義市R=25台南縣40/45JavaScript 程式設計與應用：用於網頁用戶端身分證字號的檢查碼(4)n範例n例如:身分證號碼是3+18+8+0+0+10+12+6+14+5=7676/10=7.6(餘數)10-6=4(檢查碼)41/45JavaScript 程
32、式設計與應用：用於網頁用戶端信用卡卡片編碼(1)n不同卡別編碼規則n信用卡號的最後一個數字就是信用卡的檢查碼。卡別 位數 規則 VisaCard16第一碼為4。MasterCard16第一碼為5，且前二碼介於51和55中間。AmericanExpress15第一碼為3，且前三碼介於340和379之間。JCBCard151516第一碼為1，且前四碼為1800。第一碼為2，且前四碼為2131。第一碼為3，且前三碼介於300和399之間。42/45JavaScript 程式設計與應用：用於網頁用戶端信用卡卡片編碼(2)n計算方法1)將信用卡的每個數字設定權重：從右向左，檢查碼除外，每個數字的權重分別
33、是2、1、2、1、2、1.。（若信用卡共有16碼，那麼最左邊數字的權重是2；若信用卡卡號共有15碼，那麼最左邊數字的權重就是1。）2)將每個數字乘上權重，所得的加權數字若大於9，那麼就從這加權數字裡扣除9。3)將所有處理過的加權數字全部加總起來，並且除以10，取其餘數。4)若餘數是0，檢查碼就是0，否則檢查碼就等於10減掉此餘數所得的值。43/45JavaScript 程式設計與應用：用於網頁用戶端信用卡卡片編碼(3)n範例1n若某張Visa信用卡卡號是4311-4656-0640-6131，則其計算過程如下：卡號43114656064061311.權重212121212121212x2.加權數字8321861016068012316x3.計算總和594.計算檢查碼59除以10的餘數是9，所以檢查碼是10-9=1。44/45JavaScript 程式設計與應用：用於網頁用戶端信用卡卡片編碼(4)n範例2n美國運通卡（AmericanExpress），卡號是372802490654257（只有15碼），其計算過程如下：卡號3728024906542571.權重12121212121212x2.加權數字314521670441890123582101x3.計算總和534.計算檢查碼53除以10的餘數是3，所以檢查碼是10-3=7。45/45
