HTML文書作成用コード変換器 [プログラム三昧]
ソースコードがたっぷり入った BLOG を書く時には、 HTML 文書向けに記号を変換して書く必要があります。 毎度毎度、テキスト・エディタで置換をするのも手間なので、変換装置を作ってみました。
HTML文書 : escapeHTML.html
一般に HTML の記号として認識されないように変換する作業を escape と呼んでいます。 ここで使用している手法は、prototype.jsで使われていた方法です。
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!-- $Id: escapeHTML.html,v 1.1.1.1 2009/06/11 13:36:21 noritan Exp $ -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" >
<head profile="http://www.w3.org/2005/10/profile">
<title>HTML escape converter</title>
</head>
<body>
<h1>HTML escape converter</h1>
<form action="#">
<p>
<textarea name="source" id="source" rows="10" cols="80"></textarea>
</p>
<p>
<input type="button" value="Convert" onclick="convert_message();" />
</p>
<p>
<textarea name="destination" id="destination" rows="10" cols="80"></textarea>
</p>
</form>
<script type="text/javascript">
function escapeHTML(s) {
var div = document.createElement('div');
var text = document.createTextNode(s);
div.appendChild(text);
return div.innerHTML;
}
function convert_message() {
var source = document.getElementById("source");
var destination = document.getElementById("destination");
destination.value = escapeHTML(source.value);
}
</script>
</body>
</html>
上の TextBox に入れた文書が HTML に埋め込んでも問題の無い文書になって、下の TextBox に入ります。
問題点もある
この変換装置は、 Firefox では正しく働きますが、 InternetExplorer では改行の処理が異なっているために、狙い通りの出力になりません。 InternetExplorer でも使えるようにするためには、現在使用中のブラウザを判別して、別の "escapeHTML()" 関数を利用します。
function escapeHTML(s) {
return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
}
これでは、簡単に変換装置が書けるというメリットがなくなってしまいますので、今回はあえて対応しないことにしました。 どうしてもという場合には、素直に prototype.js を使ったほうが賢明だと思います。
参考サイト
- escapeHTML.html
- 今回作成した WEB ページは、ここにあります。
- prototype.js
- JavaScript を使い倒すためのユーティリティ・プログラムです。 このサイズのスクリプトには、ちょっと大げさな気がするので、私は使っていません。
2009-06-11 22:50
nice!(0)
コメント(0)
トラックバック(0)
コメント 0