So-net無料ブログ作成
検索選択

HTML文書作成用コード変換器 [プログラム三昧]このエントリーを含むはてなブックマーク#

WS000262.png

ソースコードがたっぷり入った 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,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

これでは、簡単に変換装置が書けるというメリットがなくなってしまいますので、今回はあえて対応しないことにしました。 どうしてもという場合には、素直に prototype.js を使ったほうが賢明だと思います。

参考サイト

escapeHTML.html
今回作成した WEB ページは、ここにあります。
prototype.js
JavaScript を使い倒すためのユーティリティ・プログラムです。 このサイズのスクリプトには、ちょっと大げさな気がするので、私は使っていません。

nice!(0)  コメント(0)  トラックバック(0)  このエントリーを含むはてなブックマーク#

nice! 0

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0

この記事のトラックバックURL:
※言及リンクのないトラックバックは受信されません。

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。