【JavaScript】matchメソッドを使って、正規表現で文字列判定するやり方を解説します

こんにちは。たいら(@tairaengineer2)です。
この記事では、JavaScriptのmatchメソッドで判定させるするやり方について解説します。

matchメソッドとは
プログラムの概要
フォルダ構成
HTML
JavaScript
実行結果
まとめ

matchメソッドとは

match() メソッドは、正規表現に対する文字列のマッチングの際に、そのマッチの結果を得るために使われます。

String.prototype.match() - JavaScript | MDNから引用させて頂きました

正規表現とは、文字列内で文字の組み合わせを照合するために用いられるパターンです。
JavaScript では、正規表現はオブジェクトでもあります。
これらのパターンは RegExp の exec および test メソッドや、String の match、replace、search、および split メソッドで使用できます。

正規表現 - JavaScript | MDNから引用させて頂きました

つまりmatchメソッドとは、とある文字列がどのように構成されているのかを判定するときに使われます。

書き方は

var resultStr = searchTarget.match(regexp);

と書きます。
意味として

f:id:Tairax:20190417083215p:plain

簡単に書くと

判定結果 = 検索対象文字列.match(正規表現);

という意味になります。

プログラムの概要

作ったのはhtml、jsを1つずつ作りました。

テキストボックスに文字を入力。
ボタンを押すとテキストボックスの中身が数字か英字かどうかをalertするプログラムです。

フォルダ構成

フォルダ構成は下記の通りです。

f:id:Tairax:20180804163926p:plain

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-9０-９]+$/)) {
		alert('数字が入力されました')
	}
	// 英字（小文字大文字含む）が入力されたか判定
	else if(str.match(/^[a-zA-Z]+$/)) {
		alert('英字が入力されました')
	}
}