フォームのみの記事は下記にあります。変換したいだけで、解説要らないよって方は下記のリンクへ。
≫ JavaScript：HTMLを特殊文字に変換するツール（フォームのみ）
Javascriptには、並々ならぬ興味があるのですが、仕事で使用してない言語と言う事もあり、なかなか勉強する機会がありませんでした。このままだと永遠に勉強しない気がするので、ここらで一念発起して簡単なコードを書いてみる事にします。
JavaScriptに全く手を付けた事が無い方（「プログラム経験あり」の方レベルに合わせていきます。）にもわかる様に解説を入れていきます。
ブログになんて書かないで、単に勉強すれば良いのに・・・と思われそうですが、僕がなぜこんなまどろっこしい事をするかと言うと、人に伝える努力をする事により、知識はより早く身に付くと言う観点からです。
手始めに今回は、ブログを書く際に重要な作業の一つである、「HTMLを特殊文字列に変換する」です。
ブログにHTMLのソースを埋め込む際は、必ずこの作業が必要となります。あちこちにこれ系のツール（CGI）は有りますが、JavaScriptとして作りこめば、誰でも自分のサイトに組み込めると思いましたので、これを選んでいます。
仕様
HTMLのタグ（<,>）やダブルクォーテーション（"）、アンパーサンド（&）をそれぞれ、特殊文字列（<,>,",&）に変換します。
改行の文字列を<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="http://naglly.com/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>改行を<BR>に変換しますか？<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って便利。もっと勉強しようっと。
このツールは便利なので、あちこちに配布されれば良いなぁと思いました。大したコードではないので、これを好きに使ってください。
RSS
Posted on 11月 15th ,2008 by nag | Category: 
←ここにtrap.gifがある
