Core JavaScript 1.5 Guide:Working with Regular Expressions:Examples of Regular Expressions
出典: MDC
[編集] 例
以下の例では正規表現の使用法をいくつか示します。
[編集] 入力文字列の順序変更
次の例では、正規表現の構造と string.split() および string.replace() の使用法を示します。空白、タブ、1 つのセミコロンで分割された名前(ファーストネームが先)からなる、簡単に整形された入力文字列をきれいにします。最終的に名前の順序を逆転し(ラストネームが先)、リストをソートします。
<script type="text/javascript">
// 名前の文字列は複数のスペースやタブを含む。
// また、ファーストネームとラストネームの間に複数のスペーがあることもある。
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>");
document.write(output.join("\n"));
</script>
[編集] 特殊文字を用いた入力の確認
次の例では、ユーザが電話番号を入力します。ユーザが Enter を押すと、スクリプトがその番号の妥当性を確認します。その番号が妥当である(正規表現で指定した文字の連続にマッチしている)場合、スクリプトはユーザへの感謝のメッセージをウィンドウに表示し、その番号を確認します。番号が妥当でない場合は、その電話番号が妥当でないということをユーザに知らせるメッセージをウィンドウに表示します。
正規表現は、0 または 1 つの左括弧 \(?、それに続く 3 つの数字 \d{3}、それに続く 0 または 1 つの右括弧 \)?、それに続き、見つかった場合は記憶しておく 1 つのダッシュ、スラッシュ、または小数点 ([-\/\.])、それに続く 3 つの数字 \d{3}、それに続く記憶しておいた 1 つのダッシュ、スラッシュ、または小数点のマッチ \1、それに続く 4 つの数字 \d{4} を探します。
ユーザが Enter を押したときに発動する Change イベントは RegExp.input の値をセットします。
<!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>