ywork2020.com

Title

ストリング.マッチを使えば、文字列から特定の文字パターンが含まれるか調べることが出来る

String.matchの概要

このページでは matchメソッドを使ったコードに似せたツールを作成して説明しています。
言葉の説明よりもシンプルに実験をして理解しやすいようにしています。

実機サンプル

サンプルストリング:

"". ("");

結果エリア:

matchボタンを押すとmatchメソッドの結果が、ここに表示されます
matchボタンを押すと該当箇所の有無を、ここ表示します

サンプルコード


<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset = "utf-8">
		<title>JavaScript : String.match | 独学 Webプログラミング! - YWORK</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
		<style>
			.classRed{
				color: white;
				background-color: darkred;
			}
		</style>
	</head>
	<body>

		<p>
			サンプルストリング:<br>
			"<textarea id="idTextArea" cols="45" rows="1">abcdefgijklmnopqrstuvwxyz日本山田山根島田島根</textarea>".
			<button id="idMatchButton">match</button>("<input type="text" id="idSWord" value="山">");
		</p>
		<hr>
		<p>
			結果エリア:<br>
			<samp id="idSampleString">matchボタンを押すとmatchメソッドの結果が、ここに表示されます</samp><br>
			<samp id="idAnswer">matchボタンを押すと該当箇所の有無を、ここ表示します</samp>
		</p>
		<hr>

		<script>
			document.open();
			//input elements
			let textArea = document.getElementById("idTextArea");
			let matchButton = document.getElementById("idMatchButton");

			//output elements
			let sampleString = document.getElementById("idSampleString");
			let answer = document.getElementById("idAnswer");

			//function
			matchButton.addEventListener('click',function(){
				/*javascript*/
				let sWord = document.getElementById("idSWord").value;
				let testString = textArea.innerHTML;
				sampleString.innerHTML = testString;
				let result = testString.match(sWord);	//matchメソッド
				if(result==null){
					answer.innerHTML = '\"'+sWord+'\"にマッチしたテキストはありませんでした';
				}
				else{
					answer.innerHTML = '\"'+sWord+'\"にマッチしたテキストが見つかりました';
					/*jquery*/
					$('#idSampleString').each(function(){
						let txt = $(this).text();
						$(this).html(txt
							.replace(result,'<samp class="classRed">'+result+'</samp>')
						);
					});
				}
			});
			document.close();
		</script>
	</body>
</html>

サンプルコードの要点

  1. '文字列A'.match('文字B');で文字列Aの中に文字Bが有るかを検査できる

サンプルコードの補足

サンプルコードにはjQueryのコードも含まれていますのでご容赦ください。/*jquery*/から下のコードです。