JavaScript

JavaScript 簡易HTMLエスケープツールを作成してみた

読了時間: 約357
簡易HTMLエスケープツール

前回の記事では、PHPを使ってシンプルなおみくじプログラムを作成してみましたが…。
さすがにこれくらいでは簡単すぎて物足りないですね。
そこで、今回はJavaScriptを使って、簡易版の「HTMLエスケープツール」を作成してみました。

このブログでもそうですが…。
技術系の話題を扱う時には、ソースコードを記事中に貼りたい場面というのはちょくちょくあると思います。
そんな時には、基本的にはソースコードをHTMLエスケープしなければなりません。
エディタで置換処理をする方法もありますが、それではなかなか手間がかかってしまいますよね。

そこで、今回作成したHTMLエスケープツールの出番です!
このツールを使えば、ソースコードを入力して変換ボタンをポチッと押すだけで、HTMLエスケープ処理済みのソースコードを取得することができますよ。
これなら、サクッと処理ができるので簡単ですよね。

今回の記事では、この簡易HTMLエスケープツールの使い方とその仕組みについて解説します。

HTMLエスケープとは?

プログラミングの過程で作成したソースコード中には、特殊な意味を持つ文字が存在しています。
最も分かりやすいものとしては「<」や「>」ですね。
これらの文字は、HTMLでは開始タグと終了タグの意味を持っています。
もしソースコードをそのまま記事中に貼り付けると、ソースコード中のこれらの文字のせいで表示がおかしくなってしまいます。

そこで、「<」や「>」などを参照文字に変換する処理が必要になります。
この処理をHTMLエスケープなどと言います。
「<」や「>」の他に、「&」「"」「'」を基本的には変換してやらなければなりません。

実際どのように変換するかというと…。
以下のように文字を置換してあげます。

& → &amp;
< → &lt;
> → &gt;
" → &quot;
' → &#x27;

エディタを使って、順番に置換してやるという方法もありますが…。
それでは手間が結構かかってしまいます。
正直、面倒くさいですよね?

簡易HTMLエスケープツールの使い方

そこで、今回作成した簡易HTMLエスケープツールを使いましょう。
このツールを使えば、ソースコードのHTMLエスケープ処理を一発でやってくれますよ。
簡易HTMLエスケープツールは、以下のリンク先になります。

簡易HTMLエスケープツール

 ページに移動すると、「変換前」という文字列の下にテキストエリアがありますよね?
その部分に、HTMLエスケープ処理したいソースコードを貼り付けた後、「変換」ボタンを押します。
すると、HTMLエスケープ処理済みのソースコードが「変換後」の下のテキストエリアに表示されます。
あとはそのソースコードを記事に貼り付けるだけです。
ねっ、簡単でしょ?

簡易HTMLエスケープツール
<script type="text/javascript">
var a = 5;
if(a < 10) {
  console.log("OK");
} else {
  console.log("NG");
}
</script>

簡易HTMLエスケープツールの仕組み

簡易HTMLエスケープツールでは、JavaScriptを使って置換処理を行っています。
まず、参照文字に置換する関数escape()を定義します。
この関数では、「&」から順番に置換処理を行っているだけです。

【common.js】

function escape(src) {
  src = src.replace(/&/g, '&amp;');
  src = src.replace(/</g, '&lt;');
  src = src.replace(/>/g, '&gt;');
  src = src.replace(/"/g, '&quot;');
  src = src.replace(/'/g, '&#x27;');
  return src;
}

そして、jQueryを使って、クリック時の処理を定義します。
「変換」ボタンを押された時は、idを指定したテキストエリアからソースコードを取得します。
取得したソースコードに対してescape()を行い、その結果resultを出力先のテキストエリアに表示させます。
「クリア」ボタンが押された時は、入力と出力のテキストエリアの文字列をクリアします。

【common.js】

$(function(){
  $('#convert').click(function(){
    var result = escape($('#src').val());
    $('#dest').val(result);
  });
  $('#clear').click(function(){
    $('#src').val('');
    $('#dest').val('');
  });
});

以上が、この簡易HTMLエスケープツールの核となる部分です。
あとは適当にHTMLとCSSを書けば良いですね。
完全なソースコードは、ウェブブラウザの「ページのソースを表示」で見ることができます。
興味がある方は覗いてみてください。

まとめ

今回の記事では、簡易HTMLエスケープツールの使い方とその仕組みについて解説しました。
ソースコードを貼り付けて「変換」ボタンを押すだけで、置換処理を一発で行ってくれます。
これなら手間がかからないので楽ですよね。

今回はJavaScriptとjQueryでちょっとしたツールを作成してみましたが…。
もっと使いこなせるようになれば、何かすごいものができそうな感じですね。
JavaScriptの勉強ももっと本格的にやってみようかな。

もしソースコードをHTMLエスケープ処理したくなったら…。
ぜひ私の簡易HTMLエスケープツールを使っていただけるとうれしいです。

簡易HTMLエスケープツール

書いた人: 鈴木俊吾(すずしん)
フリーランスのライター・ブロガー・プログラマ。

大学卒業後、公務員を目指していたが失敗。
その後、仕事をしようとするも全て不採用に。
そのうち、心を病んで統合失調症を発症。
入退院を繰り返す。

「仕事をもらえないなら自分で作ればいい」「自分の好きな仕事だけをやろう!」と思うようになり、フリーランスに転身。
現在は、ブログの更新やアプリ開発を主な仕事にしている。

趣味は音楽鑑賞・読書・カラオケ・オセロ。
特に好きな歌手は水樹奈々で、ファンクラブにも所属している。
最近ハマっている曲は「恋想花火」。

フィードを登録していただくと、ブログの更新を把握しやすくなります。
あなたからの登録をお待ちしています!

Feedly
RSS

Twitter: @suzushin7

POSTED COMMENT

  1. あか男 より:

    こんにちは!
    またまた便利ツールですね。
    ブログでHTMLコードを貼る人には凄い重宝しますね。

    • すずしん より:

      あか男さん

      コメントありがとうございます。

      これは、おみくじよりは実用的です。
      それに自分でも使えますので意外と重宝しますよ。
      もしソースコードを貼りたくなったら、ぜひあか男さんも使ってくださいね。

コメントを残す

%d人のブロガーが「いいね」をつけました。