こんにちは。たいら(@tairaengineer2)です。
この記事では、JavaScriptのmatchメソッドで判定させるするやり方について解説します。
スポンサーリンク
matchメソッドとは
match() メソッドは、正規表現に対する文字列 のマッチングの際に、そのマッチの結果を得るために使われます。
String.prototype.match() - JavaScript | MDNから引用させて頂きました
正規表現とは、文字列内で文字の組み合わせを照合するために用いられるパターンです。
JavaScript では、正規表現はオブジェクトでもあります。
これらのパターンは RegExp の exec および test メソッドや、String の match、replace、search、および split メソッドで使用できます。
正規表現 - JavaScript | MDNから引用させて頂きました
つまりmatchメソッドとは、とある文字列がどのように構成されているのかを判定するときに使われます。
書き方は
var resultStr = searchTarget.match(regexp);
と書きます。
意味として
簡単に書くと
判定結果 = 検索対象文字列.match(正規表現);
という意味になります。
プログラムの概要
作ったのはhtml、jsを1つずつ作りました。
テキストボックスに文字を入力。
ボタンを押すとテキストボックスの中身が数字か英字かどうかをalertするプログラムです。
フォルダ構成
フォルダ構成は下記の通りです。
HTML
<!DOCTYPE html>
<html>
<head>
<title>matchサンプル</title>
<script type="text/javascript" src="../js/MatchSample.js"></script>
</head>
<body>
<form action="" id="formId">
<input type="text" id="matchText">
<input type="button" id="matchButton" value="matchテスト" onclick="matchTest()">
</form>
</body>
</html>
JavaScript
function matchTest() {
// テキストボックスに入力された値を取得
var str = document.forms.formId.matchText.value;
// 入力されたか判定
if (str == '') {
alert('何も入力されていません');
}
// 数字(半角全角含む)が入力されたか判定
else if(str.match(/^[0-90-9]+$/)) {
alert('数字が入力されました')
}
// 英字(小文字大文字含む)が入力されたか判定
else if(str.match(/^[a-zA-Z]+$/)) {
alert('英字が入力されました')
}
}
実行結果
最初の画面はこんな感じです。
スタイルを特にいじってないのでシンプルな画面です。
テキストボックスに色々入力してalertさせます。
何も入力しなかった場合
何も入力しない状態で「matchテスト」ボタンを押します。
何も入力していないとalertしてくれました!
数字を入力した場合
テキストボックスに数字のみを入力します。
「matchテスト」ボタンを押します。
数字が入力されたととalertしてくれました!
英字を入力した場合
テキストボックスに英字のみを入力します。
「matchテスト」ボタンを押します。
英字が入力されたととalertしてくれました!
スポンサーリンク
まとめ
matchメソッドのを使って色々判定させてみました。
皆さまのご参考になれば幸いです。
ではでは~(・ω・)ノシ
ほかにもJavaScript解説記事を書いてます。
よければご参考ください。
【JavaScript】指定したidの要素を取得するgetElementByIdメソッドについて解説します。