ywork2020.com

Title

正規表現パターンを生成する

目次 (INDEX)

RegExpとは

ここで説明するRegExp とは次の語句からなるjavascriptのオブジェクトです。
regular
読み: レギュラー
意味: 規則的、習慣的
expression
読み: エクスプレッション
意味: 表現

目次に戻る

RegExpの概要

このRegExpはregular expressionの略語であり、正規表現を意味します。

このオブジェクトは引数を基に正規表現のパターンを生成することができます。 これの引数に引用符(関数の引数)を使うことで動的に正規表現のパターンを生成することができます。 もちろん、リテラル記法(引数をスラッシュで囲む)方法も利用できます。

RegExpはコンストラクタであり、オブジェクトはインスタンスを生成して使用します。

目次に戻る

構文

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

var objVariable = new RegExp(/Pattern/Flag)
var objVariable = new RegExp("Pattern", "Flag")
  • 01: リテラル記法
  • 02: 引用符

目次に戻る

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

このサンプルでは正規表現のパターンに該当する文字列を"x"の文字に置き換えするという、 実験的なツールを作成してみました。

まず、RegExpの引数にユーザーが選択したPatternとFlagを与えてオブジェクトのインスタンスを生成します。 そして、そのオブジェクトをreplaceの引数に使って検索対象テキスト内の文字列に該当文字があれば、span要素で包含した文字列で置き換えるというものです。

サンプルコード: CSS
<style>
	#idTextArea{
		width: 600px;
	}
	#idOutput{
		display: block;
		width: 600px;
		word-wrap: break-word;
	}
	#idOutput span{
		background-color: ##pink;
	}
</style>
サンプルコード: HTML
<body>
	<p><textarea id="idTextArea">abcdefgYWORKhijklmnYWORKopqrstYWORKuvwxyz0123456789日本山田山根島田島根</textarea></p>
	<p><output id="idOutput">innerHTML</output></p>
	<p>
		<select id="idPattern">
			<option value="[a-z]">[a-z] : aからzまでの文字</option>
			<option value="[3-6]">[3-6] : 3から6までの数字</option>
			<option value="[ace]">[ace] : aとcとe</option>
			<option value="[^ace]">[^ace] : aとcとe以外</option>
			<option value="山">山 : 山 の文字</option>
			<option value="abc|xyz">abc|xyz : abcとxyzの文字</option>
		</select>
	</p>
	<p>
		<select id="idFlag">
			<option value="g">g</option>
			<option value="i">i</option>
			<option value="m">m</option>
			<option value="s">s</option>
			<option value="u">u</option>
			<option value="y">y</option>
		</select>
	</p>
	<p><input id="idButton" type="button" value='replace(/Pattern/Flag, "x")'></p>
</body>
  • 02: textarea要素 (この要素内のテキストが検索の対象となります。)
  • 03: output要素 (該当文字を置き換え処理した結果が出力されます。)
  • 05: select要素 (RegExpのPatternを数項目、選択できるにしています。)
  • 15: select要素 (RegExpのFlagを、選択できるにしています。)
サンプルコード: script
<script>
	let elmTextArea = document.getElementById("idTextArea");
	let elmOutput = document.getElementById("idOutput");
	let elmPattern = document.getElementById("idPattern");
	let elmFlag = document.getElementById("idFlag");
	let elmButton = document.getElementById("idButton");
	elmButton.addEventListener("click",function(){
		let objRegExp = new RegExp(elmPattern.value, elmFlag.value);
		elmOutput.innerHTML = 
			elmTextArea.value.replace(objRegExp,"<span>$&</span>") + "
" + elmTextArea.value.match(objRegExp).length + "箇所のテキストが検索にマッチしました" ; }); </script>
  • 02: 変数の定義 (idTextAreaの要素を参照するための変数です。)
  • 03: 変数の定義 (idOutputの要素を参照するための変数です。)
  • 04: 変数の定義 (idPatternの要素を参照するための変数です。)
  • 05: 変数の定義 (idFlagの要素を参照するための変数です。)
  • 06: 変数の定義 (idButtonの要素を参照するための変数です。)
  • 07: イベント登録 (elmButtonにclickイベントをバインドして関数を呼びます。)
  • 08: 関数の内容 (objRegExpという変数でRegExpのインスタンスを生成します。)
  • 09-11: 関数の内容 (elmOutputのinnerHTMLにreplaceとmatchの結果を出力します。)
実行結果:

検索対象テキスト: id="idTextArea"

実行結果の出力: id="idOutput"
innerHTML

パターンの選択: Pattern

フラグの選択: Flag

replaceの実行: replace(RegExp, "置換値")

目次に戻る

RegExpを使用する上での要点

このページのサンプルだけでは、正規表現のパターンを説明できません。 パターンやフラグの詳細については「 term: 正規表現とは 」のページに一覧表を設けていますので、そちらを参考にしてください。

目次に戻る