正規表達式的範例
範例
以下範例示範正規表達式的一些用法。
改變輸入字串的順序
以下範例解說了正規表達式的構造,以及 string.split()
和 string.replace()
的用法。他會整理凌亂的格式化輸入字串,字串中內含以空白、TAB、和唯一的分號所分割的姓名(名字在前)。最後,他會調換姓名的順序(姓氏在前)並重新排序列表。
<script type="text/javascript"> // 內含很多空白和 TAB 的 names 字串, // 在名字和姓氏之間也會有很多空白。 var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand "; var output = new Array( "---------- Original String<br><br>", names + "<br><br>"); // 預備兩個正規表達式的模式和儲存用的陣列。 // 把字串分割存入陣列元素裡。 // 模式︰可能的空白,然後是分號,然後是可能的空白 var pattern = /\s*;\s*/; // 使用上面的模式把字串分割成多個斷片, // 並且把斷片儲存至稱為 nameList 的陣列。 var nameList = names.split(pattern); // 新的模式︰1 個以上的字元,然後是空白字元,然後是 1 個以上的字元。 // 使用括弧來記憶模式的某一部分。 // 已記憶的部分稍後會被參考。 var pattern = /(\w+)\s+(\w+)/; // 用來保存已處理的姓名的新陣列。 var bySurnameList = new Array(); // 顯示 names 陣列,並移動以逗號分隔且姓氏在前的姓名到新的陣列。 // // replace 方法除去符合模式的所有內容,並以已記憶的字串取代。 // 字串是以第二個已記憶的部分、後接逗號和空格、後接第一個已記憶的部分所組成。 // // 變數 $1 和 $2 參考了符合模式的已記憶的部分。 output.push("---------- After Split by Regular Expression<br>"); var i, len; for (i = 0, len = nameList.length; i < len; i++) { output.push(nameList[i] + "<br>"); bySurnameList[i] = nameList[i].replace(pattern, "$2, $1") } // 顯示新的陣列。 output.push("---------- Names Reversed<br>"); for (i = 0, len = bySurnameList.length; i < len; i++) { output.push(bySurnameList[i] + "<br>") } // 以姓氏來排序,然後顯示已排序的陣列。 bySurnameList.sort(); output.push("---------- Sorted<br>"); for (i = 0, len = bySurnameList.length; i < len; i++) { output.push(bySurnameList[i] + "<br>") } output.push("---------- End<br>"); document.write(output.join("\n")); </script>
使用特殊字元來對輸入進行驗證
在以下的範例中,有位使用者輸入電話號碼。當使用者按下 Enter 時,Script 就會檢查電話號碼的有效性。如果電話號碼有效(符合由正規表達式所指定的字元序列),Script 在視窗上表示感謝使用者,並確認了電話號碼。如果電話號碼無效,Script 在視窗上表示使用者的電話號碼有誤的資訊。
正規表達式尋找 0 或 1 個左括弧 \(?
,後接三個數字 \d{3}
,後接 0 或 1 個右括弧 \)?
,如果有的話,就後接橫線 (-) 或斜線 (\) 或小數點 (.),並記憶字元 (-\\/\\.)
,後接三個數字 \d{3}
,後接已記憶的橫線、斜線、小數點的比對結果 \1
,後接四個數字 \d{4}
。
當使用者按下 Enter 設定 RegExp.input
的值時,就會發動 Change
事件。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> var re = /\(?\d{3}\)?([-\/\.])\d{3}\1\d{4}/; function testInfo(phoneInput) { var OK = re.exec(phoneInput.value); if (!OK) { window.alert(RegExp.input + " isn't a phone number with area code!"); } else { window.alert("Thanks, your phone number is " + OK[0]); } } </script> </head> <body> <p>Enter your phone number (with area code) and then press Enter.</p> <form action=""> <input name="phone" onchange="testInfo(this);"> </form> </body> </html>