第十章通用表示法

第十章通用表示法 張智星 jang@cs.nthu.edu.tw http://www.cs.nthu.edu.tw/~jang 清大資工系多媒體檢索實驗室

本章大綱 • 大綱 • 本章介紹通用表示法，使用強大的字串比對方式，可以在進行 JavaScript 程式設計時，能夠有事半功倍的效果。 • 主題 • 10-1：資料驗證 • 10-2：資料修改 • 10-3：通用式相關列表 • 10-4：常用資料規則

10-1：資料驗證 • 本小節介紹通用表示法及其用法。

基本介紹 • 「通用表示法」或「通用式」（Regular expressions）是在 UNIX 中發展出的字串比對技巧。 • Regular expressions 應該翻成「正規表示法」或「正規式」，但是我們使用「通用表示法」或「通用式」似乎更能適切地表達其功能。 • 目標：用格式簡單、功能強大的符號來比對複雜的字串。 • 許多軟體或指令都支援通用表示法。 • JavaScript 及 Vbscript：格式稍不同，但功能一樣 • Unix 指令：如 grep、sed、awk、ed、vi、emacs 等。 • Perl

JavaScript 的通用式 • 通用式是一個內建的物件 • 建構函數（Construction functoin）為 RegExp。 • 用法 • 說明 • pattern 是通用表示法的字串。 • flag 是比對的方式： • g：全域比對（Global match） • i：忽略大小寫（Ignore case） • gi：全域比對並忽略大小寫

範例10-1(1) • 主題：簡易身份證字號驗證 • 連結：regExpID01.htm • 程式碼重點 • 說明 • re=/^[A-Z]\d{9}$/ 就是一個通用式。 • 以re.test()比對字串string，回傳true代表比對正確，反之回傳false。

範例10-1(2) • 通用表示法解釋： /^[A-Z]\d{9}$/ • 比對數個字元中的任一個字元，可用「[]」，並可用「-」來代表字母或是數字的範圍。 • [A-Z] 代表由 A 至 Z 的任一個英文字母。（亦可寫成[ABCDEFGHIJKLMNOPQRSTUVWXYZ]） • [a-zA-Z] 代表不限大小寫的一個英文字母 • \d 代表0 至 9 的數字。 • 亦可寫成[0-9]或[0123456789] • {9}代表前一個字元的重複次數。 • \d{9} 代表需要有九個數字。 • ^代表字串開始位置。 • $ 代表字串結束位置。 • 若沒以上兩個符號，那麼只要任一個字串中間比對成功即可。

範例10-2 • 主題：簡易信用卡卡號驗證 • 連結： regExpCreditCardNumber01.htm • 程式碼重點 • 說明 • 也可寫成： re = /^(\d{4}-){3}\d{4}$/ • 重複的部分多於一個字母，必須將需要重複的部分放入小刮號內，再由大刮號包夾重複的次數。

範例10-3 • 主題：簡易英文名字驗證 • 連結： regExpEnglishName01.htm • 程式碼重點 • 說明 • [A-Za-z\-]：一個英文字母（可以大寫或小寫），或字元「-」 • 「-」：已經有特殊意義，必須在「-」之前加上「\」 • 「+」：重複前一個字元一次或多次 • [A-Za-z\-]+ ：英文字或「-」形成的字串，且長度至少為1 • \s：空白字元，可以是空格、定位鍵、換列字元

範例10-4 • 主題：簡易電子郵件格式驗證 • 連結： regExpEmail01.htm • 程式碼重點 • 說明 • 「.」：比對任一個字元（不包含換列字元） • 「.+」：長度不為零的字串 • 「\.」：「.」原先已具有特殊意義，必須加上反斜線 • .{2,3} ：長度為 2到3個字元

範例10-5 • 主題：電子郵件格式驗證（可避開含有空白的電子郵件帳號） • 連結： regExpEmail02.htm • 說明 • \s ：所有可能的空白字元，包含空白、定位鍵、換列字元等（不包含全形的空白） • [^]：在中括弧內是代表「否定」 • 注意：^在一般通用表示法的意義是「字串開始的位置」，但放在中括弧內，則代表「否定」或「非」。 • [^\s]+：一個或多個非空白字元所形成的字串

範例10-5 (2) • 主題：電子郵件格式驗證（可避開含有空白的電子郵件帳號） • 若要對電郵進行更嚴苛的比對，上述通用式可以改成 • 其中 \w 代表一個數字、字母或底線，全等於 [a-zA-Z0-9_]。（但這樣嚴苛的標準也可能錯誤地阻擋正常的電郵。）

範例10-6 • 主題：通用式的完整測試頁(列出比對到字串) • 連結：regExpTest01.htm • 程式碼重點 • 說明 • 使用了字串的 match() 方法，對通用式進行比對。 • matched = str.match(regexp) 可將比對到的字串送到一個陣列，以便後續列出比對結果。

10-2：資料修改 • 本小節介紹通用表示法的字串使用與範例。

通用表示法的字串方法 • 用途 • 強化搜尋比對 • 立即修改(修改表單資料) • 方法

範例10-7 • 主題：搜尋並列出位置(判斷第一個符合的位置) • 連結：regExpSearch01.htm • 程式碼重點 • 說明 • str.search(re) 將會傳回符合 re 的第一個位置。(若沒找到則回傳-1) • str.search(re) 只能用來搜尋某個通用式在一個字串的第一次出現的位置。

範例10-8 • 主題：搜尋並列出位置(取出符合的所有子字串) • 連結：regExpMatch01.htm • 程式碼重點 • 說明 • 使用string.match(regexp)可回傳符合的所有子字串。 • 傳回的 matched 變數是一個陣列，包含所比對到的字串。

範例10-9 • 主題：搜尋並代換 • 連結：regExpReplace01.htm • 程式碼重點 • 說明 • 使用str.replace將符合通用式的第一部分替換成新字串。 • 欲將所有符合的替換成新字串，只要將選項改成「g」。

範例10-10 • 主題：修正中文姓名(去除表單前後空白) • 連結：regExpReplace02.htm • 程式碼重點 • 說明 • [\s]：英文空白字元或大五碼的全形空白。 • replace(/[\s]+/g, "") ：將「(/[\s]+/g 」此類字串全部代換為空字串。

範例10-11 • 主題：修改英文姓名(消除前後空白並合併中間空白) • 連結：regExpReplace03.htm • 程式碼重點 • 說明 • 「|」可以代表「或」。 • 刪除頭尾字串兩式可合併： • str = str.replace(/^[\s]+|[\s]+$/g, "");

通用式的比對原則 • 貪心比對(Greedy Match) • 遇到重複字元時，「貪」到越多的字元越好。 • 最小比對(Minimum Match) • 必須在重複字元後面加上一個問號，代表「在可能比對成功的情況下，比對越少越好」。

範例10-12 • 主題：通用式的「貪心比對」與「最小比對」 • 連結：regExpGreedy01.htm • 程式碼重點 • 說明 • 第一個通用式是採取預設的「貪心比對」，因此比對到的字串會是在比對成功的情況下最長的字串。 • 第二個通用式中，加了一個問號，採取「最小比對」，因此比對到的字串是在比對成功的情況下最短的字串。

範例10-13 • 主題：「越左越貪」比對方式 • 連結：regExpGreedy02.htm • 程式碼重點 • 說明 • 通用式中加括號，代表符合比對條件者，將被設定至 RegExp.$1(簡寫成$1)、RegExp.$2 (簡寫成$2)等變數中。 • 使用「貪心比對」時，會採用「越左越貪」，若要推翻此原則，可適時使用問號，以採用「最小比對」。 • 第一個通用式採取預設的貪心比對，第二個通用式適時加入問號，因此結果不同。

範例10-14 • 主題：對調兩個英文字(replace的運用) • 連結：regExpReplace04.htm • 程式碼重點 • 說明 • /(\w+)\s+(\w+)/：判斷兩單字位置。 • replace(regexp, "$2 $1")：對調兩單字位置。

範例10-15 • 主題：表單資料的修正與驗證 • 連結：regExpReplace05.htm • 說明 • 利用 replace() 在 onBlur 事件時，先修正文字欄位，再進行驗證。 • onBlur 事件後，JavaScript 會以通用式對表單元素的值進行修正與驗證。

10-3：通用式相關列表 • 本小節列出常用的方法與通用式字元介紹。

通用式方法列表

通用式的應用(1)

通用式的應用(2) • 說明： • 「/^/」代表一個字串的開始位置，同理「/$/」代表一個字串的結束位置，但如果「 [^]」就代表「否定」。 • 在字元前加上「\」，可避掉特殊字元的特殊意義。

通用式的特定字元 • 說明 • RegExp(pattern, flag) 的方式建立通用式物件時，若 pattern 包含以反斜線開頭的特殊字元（例如 \d、\w、\s 等）時，必須加上一個反斜線。 • 例：re = new RegExp("\\d+\\s\\w+", "g");

定義字元的重複次數

通用式總列表(1)

10-4:常用資料規則 • 本小節介紹日常生活中常用的資料規則。

身份證字號的檢查碼(1) • 基本認知 • 共有10位 • 第一位為英文字母 • 第二個數字男生為 1，女生為 2 • 最後一位為檢查碼，經過之前一個字母與 8 個數字的組合計算後得出。

身分證字號的檢查碼(2) • 計算方法 • 英文代號轉換成數字（代表出生時的戶籍所在地） • 英文轉成的數字，個位數乘９再加上十位數 • 各數字從右到左依次乘１、２、３、４．．．８ • 求出(2)、(3)之和 • 求出(4)除10後之餘數，用10減該餘數，結果就是檢查碼，若餘數為0，檢查碼就是 0。

身分證字號的檢查碼(3) • 英文代號以下表轉換成數字（代表出生時的戶籍所在地）： A=10 台北市 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 台南縣

身分證字號的檢查碼(4) • 範例 • 例如: 身分證號碼是Ｗ１００２３２７５４　　　Ｗ　１　０　０　２　３　２　７　５　　　３２　ＸＸＸＸＸ　ＸＸＸＸＸ１９８　７　６　５　４　３　２　１　　─────────────────── 3+18 +8 + 0 + 0 +10 +12 +6 +14 +5 =76 76/10=7....6 (餘數) 10-6=4 (檢查碼)

信用卡卡片編碼(1) • 不同卡別編碼規則 • 信用卡號的最後一個數字就是信用卡的檢查碼。

信用卡卡片編碼(2) • 計算方法 • 將信用卡的每個數字設定權重：從右向左，檢查碼除外，每個數字的權重分別是 2、1、2、1、2、1 ...。（若信用卡共有16碼，那麼最左邊數字的權重是 2；若信用卡卡號共有15碼，那麼最左邊數字的權重就是 1。） • 將每個數字乘上權重，所得的加權數字若大於 9，那麼就從這加權數字裡扣除 9。 • 將所有處理過的加權數字全部加總起來，並且除以 10，取其餘數。 • 若餘數是 0，檢查碼就是 0，否則檢查碼就等於 10 減掉此餘數所的的值。

信用卡卡片編碼(3) • 範例1 • 若某張 Visa 信用卡卡號是 4311-4656-0640-6131，則其計算過程如下：

信用卡卡片編碼(4) • 範例2 • 美國運通卡（American Express），卡號是 3728 024906 54257（只有 15 碼），其計算過程如下：

第十章 通用表示法