Twitter icon  facebook icon  rss icon  feedly icon
naglly.com > プログラミング  > Javascript:HTMLを特殊文字に変換するスクリプトを勉強の為作ったので解り易く解説してみる

Javascript:HTMLを特殊文字に変換するスクリプトを勉強の為作ったので解り易く解説してみる

javascript

 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 = '&amp;';
	strlt = '&lt;';
	strquot = '&quot;';
	strgt = '&gt;';
	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って便利。もっと勉強しようっと。

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

 この記事のカテゴリは、プログラミング です。
このエントリーをはてなブックマークに追加

関連する記事と広告

最新週刊アクセスランキング