Javascriptにはとても興味があるのですが、仕事で使用してない言語なので、勉強する機会が今までありませんでした。このままだと永遠に触れないままの気がするので、一念発起して簡単なコードを書いてみる事にします。

　JavaScriptに全く手を付けた事が無い方（だけど、「プログラムは経験ある」と言う方）のレベルに合わせていきます。

　フォームのみの記事は下記にあります。変換したいだけで、解説要らないよって方は下記のリンクへ。

≫　JavaScript：HTMLを特殊文字に変換するツール（フォームのみ）

　ブログになんて書かないで、単に勉強すれば良いのにと思われそうですが、僕がなぜこんなまどろっこしい事をするかと言うと、人に伝える努力をする事により、知識はより早く身に付くと言う観点からです。

　手始めに今回は、ブログを書く際に重要な作業の一つである、「HTMLを特殊文字列に変換する」です。

　ブログにHTMLのソースを埋め込む際は、必ずこの作業が必要となります。あちこちにこれ系のツール（CGI）は有りますが、JavaScriptとして作りこめば、誰でも自分のサイトに組み込めると思いましたので、これを選んでいます。

仕様

　HTMLのタグ（<,>）やダブルクォーテーション（"）、アンパーサンド（&）をそれぞれ、特殊文字列（&lt,&gt,&quot;,&amp;）に変換します。

　改行の文字列を<br />に変換するかどうか選択できます。

　ブログ等にHTMLを載せるにはこの変換作業が必ず必要です。変換後の文字列はコピーするために選択ができます。使用するためには変換後の文字列をペーストしてください。

用意するもの

　特に無いです。テキストエディタだけあればOKです。書いたコードは、FTPクライアントなどでアップロードします。

　僕は知識が無いので、基本的には似たようなJavaScriptを見つけてきてカスタマイズを加えます。

JavaScriptのコード

　初めてJavascriptのコードを書きました。見づらいかも知れませんが短いので大丈夫かと。僕はC言語を一番使うのですが、Cが分かっていれば素直に理解できるコードだなぁと感じました。

function htmlconv(){
	// init
	document.htmldata.aft.value = '';
	stramp = '&';
	strlt = '<';
	strquot = '"';
	strgt = '>';
	strcr = '';
	strlf = '<br />';
	amp = new RegExp('&','g');
	lt = new RegExp('<','g');
	quot = new RegExp('"','g');
	gt = new RegExp('>','g');
	cr = new RegExp('\r','g');
	lf = new RegExp('\n','g');
	// get string
	convstr = document.htmldata.bef.value;

	if (document.htmldata.br.checked){
		// convert include lf
		document.htmldata.aft.value = convstr.replace(amp,stramp).replace(lt,strlt).replace(quot,strquot).replace(gt,strgt).replace(cr,strcr).replace(lf,strlf);
	}
	else{
		// not include lf
		document.htmldata.aft.value = convstr.replace(amp,stramp).replace(lt,strlt).replace(quot,strquot).replace(gt,strgt);
	}
};

　コピペして使って下さい。

JavaScriptをサーバーにUPする

　上記のコードをテキストエディタに記載して、ファイル名を付けて保存します。htmlconv.jsとしました。

　めんどくさい方は、下記からダウンロードしてください。

≫　htmlconv.js

JavaScript実行用にHTMLを埋め込みます

　JavaScript実行用にHTMLを埋め込みます。フォームから得たデータを使用し、ボタンを押す事により、JavaScriptが動きます。

<script language="JavaScript" type="text/javascript" src="/htmlconv.js"></script>
<form name="htmldata"><br />
HTMLを入力してください<br />
<textarea name="bef" rows="5" cols="100"></textarea><br />
変換後<br />
<textarea name="aft" rows="5" cols="100"></textarea><br />
option:<input type="checkbox" name="br" value="0" checked>改行を&lt;BR&gt;に変換しますか？<br />
<input type="button" value="変換" onclick="htmlconv();"> <input type="button" value="結果を選択" onclick="document.htmldata.aft.select();document.htmldata.aft.focus();"> <input type="button" value="クリア" onclick="document.htmldata.bef.value='';document.htmldata.aft.value='';"></form>

　太字のところは自前の環境に書き換える必要があります。

完成

　完成です。

　フォームのみの記事は下記にあります。

≫　JavaScript：HTMLを特殊文字に変換するツール（フォームのみ）

　やってみたら結構簡単でした。JavaScriptって便利。もっと勉強しようっと。

　このツールは便利なので、あちこちに配布されれば良いなぁと思いました。大したコードではないので、これを好きに使ってください。