エンジニアの将来って?

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

【JavaScript】RegExpを使って、全文をreplaceするプログラム

こんにちは。たいら(@tairaengineer2)です。
今回の記事はJavaScriptのアウトプット記事です。
replaceメソッドを使って、テキストボックスに入力されたものを変換するプログラムです。

プログラムの概要

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

3つテキストボックスがあり、各テキストボックスに以下の文を入力。

  • 変換する元の文
  • 変換対象の文字
  • 変換後の文字

ボタンを押すと、変換する元の文から変換対象の文字を変換して表示するプログラムです。

フォルダ構成

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

f:id:Tairax:20180806161825p:plain

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>文字を置換</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="../js/ReplaceAllSample.js"></script>
	</head>

	<body>
		文を入力してください<br />

		変換する元の文<input id="inputText" type="text"><br />
		変換対象の文字<input id="changeText" type="text"><br />
		変換後の文字<input id="afterText" type="text"><br />
		<input id="replaceButton" type="button" value="変換" onclick="replaceAllInputText();" />
		<br />
		変換後の文<input id="outputText" type="text" readonly="readonly">
	</body>

</html>

JavaScript

/**
 * テキストボックスの値を変換する
 */
function replaceAllInputText(){
	// 入力された値を取得
	var inputText = document.getElementById("inputText").value;
	var changeText = document.getElementById("changeText").value;
	var afterText = document.getElementById("afterText").value;

	// 正規表現
	var regex = new RegExp(changeText, 'g');

	// 変換
	var outputText = inputText.replace(regex, afterText);

	// 変換後を表示
	document.getElementById("outputText").value = outputText;
}

実行結果

f:id:Tairax:20180806162937p:plain

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

変換対象の文字が無い場合

f:id:Tairax:20180806163308p:plain

変換対象の文字が無い状態で、「変換」ボタンを押します。

f:id:Tairax:20180806164154p:plain

全く変換されないで表示されました!

変換対象の文字がある場合

f:id:Tairax:20180806164414p:plain

変換対象の文字がある状態で、「変換」ボタンを押します。

f:id:Tairax:20180806164600p:plain

ちゃんと変換されて表示されました!

解説

このJavaScriptでポイントなのは

// 正規表現
var regex = new RegExp(changeText, 'g');

// 変換
var outputText = inputText.replace(regex, afterText);

です。
ただ単にreplaceメソッドを使うと、最初に合致したものしか変換されません。
それが正規表現を使うことで

f:id:Tairax:20180806165611p:plain

このように複数あっても

f:id:Tairax:20180806170714p:plain

全ての文字を変換してくれます。
全文検索をするフラグは

var regex = new RegExp(changeText, 'g');

赤文字のgで設定しています。

まとめ

いかがでしたか?
全文検索してから、replaceメソッドで変換するプログラムを作りました。
皆さまのご参考になれば幸いです。
ではでは~(・ω・)ノシ

参考にさせて頂いたサイト様

【JavaScript入門】RegExp(正規表現)の使い方と活用事例! | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト

 

他にもJavaScript勉強記事を書いています。
良ければ、ご参考ください。

【JavaScript】巻き上げ、ホイストをできるだけ分かりやすく解説します

【JavaScript】テキストボックスの中身をmatchを使って判定