正規表現を利用して文字列を検索するコードを紹介します。
パターンに一致するか判定する
パターンに一致するかを判定する場合は、RegExp オブジェクトのtest メソッドを利用します。
プログラム例 : コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function buttonClick() {
textbox_input_ctl = document.getElementById("textbox_input");
inputStr = textbox_input_ctl.value;
textbox_expression_ctl = document.getElementById("textbox_expression");
expressionStr = textbox_expression_ctl.value;
var reg = new RegExp(expressionStr)
result = reg.test(inputStr);
textbox_output_ctl = document.getElementById("textbox_output");
if (result == true) {
textbox_output_ctl.value = "マッチしました。";
} else {
textbox_output_ctl.value = "マッチしませんでした。";
}
}
</script>
</head>
<body>
input:<input id="textbox_input" type="text" size="40"/><br/>
expression:<input id="textbox_expression" type="text" size="40" /><br />
<button onclick="buttonClick();">Button1</button>
<hr/>
結果:<input id="textbox_output" type="text" size="40" />
</body>
</html>
プログラム例 : 解説
HTML部分ではページ内にテキストボックス3つとボタンを一つ配置しています。
ボタンクリック時にはonclickイベントにより buttonClick() 関数を呼び出す動作にしています。
input:<input id="textbox_input" type="text" size="40"/><br/>
expression:<input id="textbox_expression" type="text" size="40" /><br />
<button onclick="buttonClick();">Button1</button>
<hr/>
結果:<input id="textbox_output" type="text" size="40" />
JavaScript部分のbuttonClick関数は下記です。
document.getElementById() メソッドを呼び出しInputとExpression のテキストボックスの値を取得します。続いて、RegExpオブジェクトを作成します。RegExpオブジェクトのコンストラクタの引数にExpression のテキストボックスに入力した値(正規表現式)を与えます。
作成したRegExpオブジェクトのインスタンスをreg変数に格納し、regオブジェクトのtestメソッドを呼び出します。testメソッドの引数に検索対象の入力文字列を与えます。
入力文字列がregオブジェクトの正規表現式にマッチした場合はtestメソッドの戻り値がtrueになります。regオブジェクトの正規表現式にマッチしなかった場合は、falseの値が戻ります。戻り値の値に応じてテキストボックスに検索結果のメッセージを表示します。
function buttonClick() {
textbox_input_ctl = document.getElementById("textbox_input");
inputStr = textbox_input_ctl.value;
textbox_expression_ctl = document.getElementById("textbox_expression");
expressionStr = textbox_expression_ctl.value;
var reg = new RegExp(expressionStr)
result = reg.test(inputStr);
textbox_output_ctl = document.getElementById("textbox_output");
if (result == true) {
textbox_output_ctl.value = "マッチしました。";
} else {
textbox_output_ctl.value = "マッチしませんでした。";
}
}
プログラム例 : 実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
inputの欄のテキストボックスに "Penguin" を入力します。expressionの欄のテキストボックスに "e" を入力します。入力後 [Button1]のボタンをクリックします。
下部のテキストボックスに「マッチしました。」の文字列が表示されます。"Penguin" の文字列内に "e" は含まれますのでマッチしたことになります。
inputを"Penguin"、expressionを"z"として、[Button1]をクリックします。"Penguin" の文字列内に "z" は含まれませんので、「マッチしませんでした。」のメッセージが表示されます。
inputを"Penguin"、expressionを"eng"として、[Button1]をクリックします。"Penguin" の文字列内に "eng" が含まれますので、「マッチしました。」のメッセージが表示されます。
inputを"Penguin"、expressionを"enk"として、[Button1]をクリックします。"Penguin" の文字列内に "enk" 含まれませんので、「マッチしませんでした。」のメッセージが表示されます。
inputを"Penguin"、expressionを"e..u"として、[Button1]をクリックします。"Penguin" の文字列内に "e"+任意の二文字+"u" は"engu" の部分に該当するので、「マッチしました。」のメッセージが表示されます。
inputを"Penguin"、expressionを"e..g"として、[Button1]をクリックします。"Penguin" の文字列内に "e"+任意の二文字+"g" は含まれませんので、「マッチしませんでした。」のメッセージが表示されます。
パターンに一致した場合の入力文字列中での位置を取得する
パターンに一致するかの判定と一致した場合の入力文字列中の位置を取得する場合は、RegExp オブジェクトとStringクラスの match メソッドを利用します。
プログラム例 : コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function buttonClick() {
textbox_input_ctl = document.getElementById("textbox_input");
inputStr = textbox_input_ctl.value;
textbox_expression_ctl = document.getElementById("textbox_expression");
expressionStr = textbox_expression_ctl.value;
var reg = new RegExp(expressionStr)
result = inputStr.match(reg);
textbox_output_ctl = document.getElementById("textbox_output");
if (result==null) {
textbox_output_ctl.value = "マッチしませんでした。";
} else {
textbox_output_ctl.value = result.index + "の位置でマッチしました。";
}
}
</script>
</head>
<body>
input:<input id="textbox_input" type="text" size="40"/><br/>
expression:<input id="textbox_expression" type="text" size="40" /><br />
<button onclick="buttonClick();">Button1</button>
<hr/>
結果:<input id="textbox_output" type="text" size="40" />
</body>
</html>
プログラム例 : 解説
HTML部分ではページ内にテキストボックス3つとボタンを一つ配置しています。
ボタンクリック時にはonclickイベントにより buttonClick() 関数を呼び出す動作にしています。
ボタンのクリックで実行されるbuttonClick関数では、document.getElementById() メソッドを呼び出しテキストボックスの入力値を取得します。
入力した Expression のテキストボックスの値をRegExpクラスのコンストラクタに与えRegExpオブジェクトを作成します。
入力文字列 inputStr のmatch メソッドを呼び出し文字列の判定を実行します。matchメソッドの引数に先に作成したRegExpオブジェクトを与えます。
パターンに一致しなかった場合は、matchメソッドの戻り値がnullとなります。戻り値がnullでない場合はパターンに一致し、indexプロパティにマッチした文字列の位置が返されます。
function buttonClick() {
textbox_input_ctl = document.getElementById("textbox_input");
inputStr = textbox_input_ctl.value;
textbox_expression_ctl = document.getElementById("textbox_expression");
expressionStr = textbox_expression_ctl.value;
var reg = new RegExp(expressionStr)
result = inputStr.match(reg);
textbox_output_ctl = document.getElementById("textbox_output");
if (result==null) {
textbox_output_ctl.value = "マッチしませんでした。";
} else {
textbox_output_ctl.value = result.index + "の位置でマッチしました。";
}
}
プログラム例 : 実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
inputのテキストボックスに "Penguin" expression のテキストボックスに "ngu" を入力します。入力後[Button1]をクリックします。
下部の[結果]テキストボックスに、「2の位置でマッチしました。」のメッセージが表示されます。"Penguin" の文字列中に "ngu" の文字列が見つかり、3文字目に一致部分があることがわかります。インデックス番号は0から開始するため、3文字目の一致であればインデックス番号は2となります。
inputのテキストボックスに "Penguin" expression のテキストボックスに "ze" を入力し、[Button1]をクリックした場合はzeの文字列は入力文字列中には見つからないため、matcuメソッドの戻り値はnullとなり「マッチしませんでした。」のメッセージが表示されます。
inputのテキストボックスに "Penguin" expression のテキストボックスに "g..n" を入力し、[Button1]をクリックします。
g(任意の文字)(任意の文字)n となるパターンは入力文字列の"guin"部分が該当しますので、パターンにマッチします "guin"のgの文字は入力文字列の4文字目になりますので、インデックスの値は3となり、下部のテキストボックスには「3の位置でマッチしました。」のメッセージが表示されます。
JavaScirptで正規表現を利用して文字列を検索することができました。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2024-01-07
作成日: 2019-11-20
