escape/unescape変換フォーム JavaScript

escape/unescape変換フォームを作りたい！『JavaScript編』

escape/unescape変換フォーム JavaScript

escape/unescape変換フォームの作成方法

　ウェブで送受信する際のデータをJavaScriptではescape・エスケープ／unescape・アンエスケープしますが、ここでは、JavaScriptでこの変換フォームを作ってみましょう。

※JavaScriptがONなら変換フォームをどうぞ。

　これは一体どんな仕組みになっているのでしょうか？

<form name="unes_form">
[変換前]<br>
<textarea name="res_input" cols="50" rows="3"></textarea>
<p align="center">
<input type="button" value="escape/encode" onClick="esc()">
<input type="button" value="unescape/decode" onClick="unesc()">
</p>
<p></p>
[変換結果]<br>
<textarea name="result" cols="50" rows="3"></textarea>
</form>
<div>※JavaScriptがONなら変換フォームをどうぞ。</div>

　ここから体裁の部分を省くと

のようになっていてformタグを使ってformと変換前用と変換後用の[<textarea></textarea>]ボックスを用意してそれぞれ[name=""]で名前を付けています。

　それとやはり[form]の[input]の[type]属性で[button](<input type="button">)をエスケープ用とアンエスケープ用に２つ用意していて[input]属性の[value=""]に設定した文字列が[button]のラベル文字です。

　ここでのポイントは[button]に割り当てられているイベント

onClick="esc()"

と

onClick="unesc()"

onClickは、HTML/XHTMLで定義されているイベントハンドラ
onClickは、(Windowsの場合)マウスの左ボタンがクリックされた時の処理を設定するものです。

esc()とunesc()は、実際の処理を行う関数で関数名はお好きな名前でOKです。

　それではJavaScript外部ファイルの記述を見てみましょう。

function esc(){
document.unes_form.result.value=escape(document.unes_form.res_input.value);
}
function unesc(){
document.unes_form.result.value=unescape(document.unes_form.res_input.value);
}

　この中の

escape()

と

unescape()

が、入力された文字列をエスケープ／アンエスケープする為のJavaScript固有の組み込み関数です。

function esc(){
document.unes_form.result.value=escape(document.unes_form.res_input.value);
}

が、入力された文字列をエスケープする為の関数で、[document]の[unes_form]という名前の[result]という名前のフォームを構成するオブジェクトの[value](値)に[escape()]して、同じく[document]の[unes_form]という名前の[res_input]という名前のフォームを構成するオブジェクトの[value](値)を代入するという指定です。

function unesc(){
document.unes_form.result.value=unescape(document.unes_form.res_input.value);
}

　アンエスケープもエスケープと同様で[ escape() ]を[ unescape() ]とするだけです。

推奨される関数

　尚、JavaScript、JScript、ActionScript含め、実質、第3版から世界標準となったECMAScriptでは、現時点で最新の第5.1版においても escape() / unescape() 互換性維持の為に今尚、利用可能ではあるものの、ASCII (≒英数字)以外の文字コードにも対応可能な下記の関数の方が推奨されています。

　変換精度と名称と組み合わせは別として使い方自体は、escape/unescapeと同じです。

　encodeURI () / encodeURIComponent ()

　decodeURI () / decodeURIComponent ()

URI操作関数参照