MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

以下の例では正規表現の使用法をいくつか示します。

入力文字列の順序変更

次の例では、正規表現の構造と string.split() および string.replace() の使用法を示します。空白、タブ、1 つのセミコロンで分割された名前(ファーストネームが先)からなる、簡単に整形された入力文字列をきれいにします。最終的に名前の順序を逆転し(ラストネームが先)、リストをソートします。

// 名前の文字列は複数のスペースやタブを含む。
// また、ファーストネームとラストネームの間に複数のスペーがあることもある。
var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ";

var output = new Array(
  "---------- Original String<br><br>",
  names + "<br><br>");

// 2 つの正規表現パターンと、格納用の配列を用意する。
// 文字列を配列の要素に分割する。

// パターン:ホワイトスペースが存在しうる・セミコロン・ホワイトスペースが存在しうる
var pattern = /\s*;\s*/;

// 上記のパターンで文字列を断片に分割し、
// nameList という配列に断片を格納する。
var nameList = names.split(pattern);

// 新パターン:1 つ以上の文字・1 つ以上のスペース・1 つ以上の文字
// 括弧を用いてパターンの断片を記憶する。
// 記憶しておいた断片は後から参照される。
var pattern = /(\w+)\s+(\w+)/;

// 処理された名前を格納する新しい配列。
var bySurnameList = new Array();

// 名前の配列を表示し、新しい配列にコンマ区切りの名前を
// ラストネーム、ファーストネームの順で格納する。
//
// replace メソッドはパターンにマッチしたものを除去し、
// 記憶しておいた文字列に置き換える。
//「2 番目の記憶しておいた断片とその後に続くコンマとスペース、
// さらにその後に続く 1 番目の記憶しておいた断片」
//
// 変数 $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>");

console.log(output.join("\n"));

特殊文字を用いた入力の確認

次の例では、ユーザが電話番号を入力します。ユーザが Enter を押すと、スクリプトがその番号の妥当性を確認します。その番号が妥当である(正規表現で指定した文字の連続にマッチしている)場合、スクリプトはユーザへの感謝のメッセージをウィンドウに表示し、その番号を確認します。番号が妥当でない場合は、その電話番号が妥当でないということをユーザに知らせるメッセージをウィンドウに表示します。

正規表現は、0 または 1 つの左括弧 \(?、それに続く 3 つの数字 \d{3}、それに続く 0 または 1 つの右括弧 \)?、それに続き、見つかった場合は記憶しておく 1 つのダッシュ、スラッシュ、または小数点 (-\\/\\.)、それに続く 3 つの数字 \d{3}、それに続く記憶しておいた 1 つのダッシュ、スラッシュ、または小数点のマッチ \1、それに続く 4 つの数字 \d{4} を探します。

ユーザが Enter を押したときに発動する Change イベントは RegExp.input の値をセットします。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="ISO-8859-1">
    <script>
      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>
      <input name="phone" onchange="testInfo(this);">
    </form>
  </body>
</html>

ドキュメントのタグと貢献者

 このページの貢献者: teoli, ethertank, dextra, happysadman, Potappo, Electrolysis, Mgjbot
 最終更新者: teoli,