ブログを書くとき用のHTMLエンコードツール
- 2007年04月13日
- category:XHTML/CSS, javascript
- Comment(0)
- Trackback(0)
ブログにHTMLやjavascriptのコードを掲載する際、HTML用にエンコードする作業って面倒なんですよね。エンコードしてくれるWebツールもいろいろあるみたいですが、自分用にカスタマイズして使いたいので自前で作ってみました。
一番欲しかったのはTab文字を空白に変換する機能です。preタグ内でTab文字は使用しないほうがいいという話をよく聞くので。
とりあえずphpのhtmlspecialchars使えば簡単にできるかなと思って作ってみたんですが、変換する際にいちいちページを読み込むのが予想以上にウザイかったのでjavascriptで作り直しました。さっくり動いて良い感じです。
変換する文字は下記です。
| 変換文字 | 変換後 |
|---|---|
| " | " |
| & | & |
| < | < |
| > | > |
一応スクリプトも掲載しておきます。きれいなソースではないですが・・・
function getId(id){
return document.getElementById(id)
}
function htmlEncode(){
str = getId("beforeStr").value;
str = str.replace(/&/g, "&");
str = str.replace(/"/g, """);
str = str.replace(/</g, "<");
str = str.replace(/>/g, ">");
if(getId("tab_change").checked==true){
str = str.replace(/\t/g, " ");
}
getId("afterBox").style.display = "block";
if(getId("pre_code").checked==true){
getId("afterStr").value = "<pre><code>" + str + "</code></pre>";
}else{
getId("afterStr").value = str;
}
}<div id="beforeBox">
<textarea rows="10" cols="50" id="beforeStr" tabindex="1" accesskey="B"></textarea><br />
<input type="button" value="変換する" tabindex="2" accesskey="S" onclick="htmlEncode()" />
<dl id="EncodeOption">
<dt>option</dt>
<dd><input type="checkbox" name="tab_change" id="tab_change" tabindex="3" accesskey="C" checked="checked" /><label for="tab_change">Tab変換</label></dd>
<dd><input type="checkbox" name="pre_code" id="pre_code" value="1" tabindex="4" accesskey="P" checked="checked" /><label for="pre_code">pre,codeタグ</label></dd>
</dl>
</div>
<div id="afterBox">
<textarea rows="10" cols="50" id="afterStr" tabindex="5" accesskey="A"></textarea><br />
<input type="button" value="テキストを選択" onclick='selcetText()' onkeypress='selcetText()' tabindex="6" accesskey="F" />
</div>現時点(2007/4/13)のオプションは「Tab文字を半角スペース2つに変換する」と「preタグとcodeタグで囲む」の二つです。何か欲しい機能を思いついたらその都度追加しようかと思っています。
- Prev Entry
- コーディングコンテストに挑戦だ！
- Next Entry
- ページの高さを自動調節するjavascriptの追記（CSSのみで実現する）
トラックバックURL
http://webtech-walker.com/archive/2007/04/13181101.html/trackback
※トラックバックを受け付けてから表示するまでにしばらく時間がかかる場合があります。
