ywork2020.com

Title

特定の文字パターンに一致する文字列を抽出する

目次 (INDEX)

match とは

ここで説明する match とは次の語句からなる JavaScript のメソッドです。
match
読み: マッチ
意味: 合わせる

目次に戻る

match メソッドの概要

このメソッドは、引数に与えた文字列、または正規表現を元に、引数の文字列パターンと一致する文字列を配列として返します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var arrMatch = ##String.match(##RegExp);
var arrMatch = ##String.match(/Pattern/##flag);
var arrMatch = ##String.match(strString);

目次に戻る

サンプルコードと実行結果

ここでは、match() の引数に文字列を与えた場合と RegExp オブジェクトを与えた場合のサンプルを用意しました。

また、RegExp オブジェクトを生成する場合にリテラル記法を使用した場合と、コンストラクター関数を使用した場合のサンプルも用意しました。

サンプルコード: HTML
<body>
	<output id="idOutput"> inner </output>
	<script>...</script>
</body>
サンプルコード: script ( match() の引数に文字列を与えた場合 )

これは、RegExp オブジェクトを 使用せずに match() の引数に文字列を与えた場合のサンプルです。 戻り値の配列が単独の要素である場合には、 結果は連想配列として戻り、 "input" や "index" の値を取得することができます。

<script>
	let elmOutput = document.getElementById("idOutput");
	let strString = "日本山田山根島田島根";
	let arrMatch = strString.match("山");
	elmOutput.innerHTML = 
		"入力した値 -> " + arrMatch["input"] + "<br>" + 
		"配列の要素 -> " + arrMatch + "<br>" + 
		"マッチ位置 -> " + arrMatch["index"] + "<br>" + 
		"配列の長さ -> " + arrMatch.length
	;
</script>
実行結果:
inner
サンプルコード: script ( match() の引数に RegExp を与えた場合 - その 1 )

これは、RegExp オブジェクトをリテラル記法を使って生成した場合のサンプルです。 戻り値の配列に複数の要素がある場合には、 "input" や "index" の値は取得できません。

<script>
	let elmOutput = document.getElementById("idOutput");
	let strString = "日本山田山根島田島根";
	let objRegExp = new RegExp(/田/g);
	let arrMatch = strString.match(objRegExp);
	elmOutput.innerHTML = 
		"入力した値 -> " + arrMatch["input"] + "<br>" + 
		"配列の要素 -> " + arrMatch + "<br>" + 
		"マッチ位置 -> " + arrMatch["index"] + "<br>" + 
		"配列の長さ -> " + arrMatch.length
	;
</script>
実行結果:
inner
サンプルコード: script ( match() の引数に RegExp を与えた場合 - その 2 )

これは、RegExp オブジェクトをコンストラクター関数を使って生成した場合のサンプルです。 戻り値の配列に複数の要素がある場合には、 "input" や "index" の値は取得できません。

<script>
	let elmOutput = document.getElementById("idOutput");
	let strString = "日本山田山根島田島根";
	let objRegExp = new RegExp("根","g");
	let arrMatch = strString.match(objRegExp);
	elmOutput.innerHTML = 
		"入力した値 -> " + arrMatch["input"] + "<br>" + 
		"配列の要素 -> " + arrMatch + "<br>" + 
		"マッチ位置 -> " + arrMatch["index"] + "<br>" + 
		"配列の長さ -> " + arrMatch.length
	;
</script>
実行結果:
inner

目次に戻る