エンジニアの将来って?

現在7年目のCOBOL→Java→C#エンジニアが、将来への考えや勉強のアウトプット、たまに腎臓について書くブログです

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

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

 

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

実行結果

最初の画面はこんな感じです。

f:id:Tairax:20180804164349p:plain

スタイルを特にいじってないのでシンプルな画面です。
テキストボックスに色々入力してalertさせます。

何も入力しなかった場合

f:id:Tairax:20180804164349p:plain

何も入力しない状態で「matchテスト」ボタンを押します。

f:id:Tairax:20180804165139p:plain

何も入力していないとalertしてくれました!

数字を入力した場合

テキストボックスに数字のみを入力します。

f:id:Tairax:20180804164551p:plain

「matchテスト」ボタンを押します。

f:id:Tairax:20180804164757p:plain

数字が入力されたととalertしてくれました!

英字を入力した場合

テキストボックスに英字のみを入力します。

f:id:Tairax:20180804165410p:plain

「matchテスト」ボタンを押します。

f:id:Tairax:20180804165533p:plain

英字が入力されたととalertしてくれました!

まとめ

いかがでしたか?
matchメソッドのを使って色々判定させてみました。
皆さまのご参考になれば幸いです。
ではでは~(・ω・)ノシ

初心者向けのおすすめ本を紹介

最後に

 

もっとJavaScriptの基礎を固めたい!

 

という、JavaScript初心者向けにおすすめの本をご紹介します。

【書評】「知識ゼロからのJavaScript入門」はJavaScript初心者におすすめの本