正規表達式的範例

範例

以下範例示範正規表達式的一些用法。

改變輸入字串的順序

以下範例解說了正規表達式的構造，以及 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>