【麻雀】Javascriptでpreタグチェンジャーを作る

#05 preタグチェンジャーを作る

2017年11月28日

preタグで囲まれた範囲は、スペース・改行などが等幅フォントで表示されます。WEBページにソースコードを入れたいたいときによく使われタグです。しかし、<と>は特殊文字として扱われるので、コード内にタグがあるときは注意が必要です。

プログラムの解説と実行

ソースコード内の特殊文字を手作業で変換するのが面倒くさいので自作することにしました。単純な変換しかできませんが、ぜひご利用ください。テキスト内の特殊文字を一括置換します。変換される文字は以下の表の通りです。

対象になる特殊文字	変換後の文字列
&	&
<	<
>	>

●変換したいテキストを貼り付ける ●変換後のテキスト

JavaScriptソースコード

本記事で紹介したサンプルプログラムをダウンロードできます。

サンプルプログラムのダウンロード

ダウンロードをする前にお読みください

サイトで紹介している記事の内容や公開しているプログラムの動作は100%保障するものではありません。
当プログラム使用による如何なる不具合やトラブル、損害の責任も負いかねます。
当プログラムは断り無く内容が変わることがあります。
当プログラムを別サイトで配布することは禁止します。
サポートはいたしません。
自己責任にてご利用くださいませ。

以上をご確認の上、プログラムのダウンロードをお願いいたします。

サンプルプログラムのソースコード

ソースコードは折りたたんであります。［+］を押すと、折りたたまれたソースコードが開きます。［-］を押すと、コードは折りたたまれます。

+ program_005.jsを開く

//テキストエリア内の文字列を置換する
$("#preChangeBtn").click(function() {
	var txtVal = $("#beforeText").val();
	txtVal = txtVal.replace(/&/g, "&amp;");
	txtVal = txtVal.replace(/</g, "&lt;");
	txtVal = txtVal.replace(/>/g, "&gt;");
	$("#afterText").val(txtVal);
});

//テキストエリア内の文字列を削除する
$("#preCleaeBtn").click(function(){
	$("#beforeText").val("").focus();
	$("#afterText").val("");
});

//テキストエリア内の文字列を選択する
$("#txtSelectBtn").click(function(){
	$("#afterText").select();
});