【jQuery】よく使うhtml特殊文字をエスケープ/アンエスケープの解説と特殊文字の変換ツール

よく使うhtml特殊文字とjQueryでhtml特殊文字をエスケープ/アンエスケープする方法の解説、特殊文字の変換ツールを作ってみました。
バリデーションで使えそうなfunctionも追加しました。

html特殊文字とは
html特殊文字の使い方
特殊文字変換ツール
特殊文字をエスケープするfunction

デモはこちら

調べたい文字列をhtml特殊文字のエスケープ/アンエスケープツールに入力すると特殊文字のエスケープ/アンエスケープすることができます。

html特殊文字とは

html特殊文字とは、htmlタグを認識させたくない時、つまり文字として扱ってほしい時に使用します。
例えば、ブラウザは複数の半角スペースを入力してもを1つしか半角スペース表示されないので複数表示したいときに使用できます。
(幅の微調整はcssでやる方が簡単で調整もしやすいのでこんな使い方はお勧めしません。)
メインは入力フォームからのいたずら対策の方が使い道が多いですね。
数が多かったので自分がよく使うものだけ載せました。これ以外の文字は調べてみてください。

htmlコード	表示	説明
"	“	ダブルクォーテーション
'	‘	シングルクォーテーション
&	&	アンパサンド
<	<	小なり
>	>	大なり
		スペース
¥	¥	円
©	©	コピーライト

html特殊文字の使い方

上の表のhtmlコードの列の記号をhtml内に入れるだけです。
例えば「<br>」を文字として表示したいときは<br>と入力したら改行されずに<br>と表示されます。

特殊文字変換ツール

” ‘ < > &の特殊文字をエスケープ/アンエスケープするツール。

HTML

<fieldset>
<legend>特殊文字変換ツール</legend>

<p>
<input type="radio" id="enc" name="status" checked="checked">
<label for="enc">特殊文字に変換（&amp; → &amp;amp;）</label>
<input type="radio" id="dec" name="status">
<label for="dec">通常テキストに変換（&amp;amp; → &amp;）</label>
<input type="checkbox" id="br">
<label for="br">改行コードをbrタグに変換</label>
</p>

<textarea id="htmltext" cols="30" rows="10"></textarea>
<button type="button" id="check">変換</button>

<p id="result"></p>
</fieldset>

JavaScript

$('#check').click(function() {
    var value = $('#htmltext').val();

    if ($('input[name=status]:eq(0)').prop('checked') == true) {
        value = value.replace(/&/g,"&amp;")
        .replace(/"/g,"&quot;")
        .replace(/'/g,"&#039;")
        .replace(/</g,"&lt;")
        .replace(/>/g,"&gt;");
    }else if ($('input[name=status]:eq(1)').prop('checked') == true) {
        value = value.replace(/&quot;/g,'"')
        .replace(/&#039;/g,"'")
        .replace(/&lt;/g,"<")
        .replace(/&gt;/g,">")
        .replace(/&amp;/g,"&");
    }

    if ($('input[id=br]').prop('checked') == true) {
        value = value.replace(/\n/g,"<br>");
    }

    $('#result').text(value);

});

buttonタグがクリックされたときに、textareaの値を取得し、ラジオボタンの選択に合わせて指定した記号を特殊文字で置き換える処理をしています。
$(‘input[name=status]:eq(0)’)で、inputタグのnameがstatusの要素の該当番号を
.prop(‘checked’)でcheckedプロパティの真偽(true/false)を取得してくれるのでそれを使って分岐させています。
処理速度は.attr()より.prop()の方が早く、さらにIEだと.attr()で処理させるとdisabledの処理が重くて結構負荷がかかるらしい。
inputには.prop()を！

value.replace();の処理で&だけは順番に注意が必要です。
特殊文字に変換する場合は&を一番最初に、テキストに変換する場合は&を一番最後に処理します。他の特殊文字にも&が含まれているので、それに影響がないようにしています。

ついでにvalue.replace(/\n/g,”<br>”);でチェックの有無で改行コードの変換もしてみた。
\nで改行コードを表す。

特殊文字をエスケープするfunction

エスケープしたい値を引数として渡すだけで使いまわせるfunction

JavaScript

function escapeStr(idname) {
  var str = $('#' + idname).val();
  str = str.replace(/&/g, "&amp;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/\n/g, "<br>");

  return str
}