JavaScriptでのURLデコードはこちらの記事を参照してください。
JavaScriptでURLをエンコードするコードを紹介します。
JavaScriptでURLにパラメーターを利用する場合、パラメーターにURLに利用できない文字が含まれていることがあります。(参考:URLに利用できる文字)
この場合、サーバーアプリケーションに正しいパラメーターの値を渡せないことがあり、Webアプリケーションの誤動作につながります。
URLにパラメーターにURLに利用できない文字が含まれる場合の対策として、パラメータを含むURLをURLエンコードしてURLを取り扱います。
JavaScriptでURLをエンコードするにはencodeURIComponentメソッドを利用します。
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function buttonClick() {
var in_elem = document.getElementById("inputText");
var inputStr = in_elem.value;
var encodeStr = encodeURIComponent(inputStr);
var out_elem = document.getElementById("outputText");
out_elem.value = encodeStr;
}
</script>
</head>
<body>
入力:<input type="text" id="inputText" style="width:80%;" /><br />
<input type="button" onclick="buttonClick();" value="Exec" /><br />
出力:<input type="text" id="outputText" style="width:80%;" />
</body>
</html>
document.getElementByIdメソッドを呼び出し、idが"inputText"であるinputタグの要素(テキストボックス)を取得します。
取得したテキストボックスのvalueの値を参照してテキストボックスに入力された文字列を取得します。
テキストボックスの文字列取得の詳細はこちらの記事を参照して下さい。
var in_elem = document.getElementById("inputText");
var inputStr = in_elem.value;
テキストボックスに入力されている文字列をencodeURIComponentメソッドに与えてURLエンコードをします。エンコード結果はencodeURIComponentメソッドの
戻り値として返ります。
var encodeStr = encodeURIComponent(inputStr);
URLエンコードされた文字列をIDが"outputText"のinputタグの要素 (テキストボックス)に表示します。
var out_elem = document.getElementById("outputText");
out_elem.value = encodeStr;
上記のHTMLファイルをWebブラウザで開きます。下図のページが表示されます。
http://www.ipentec.com/search?query=C++andC# の文字列を入力テキストボックスに入力します。+ の文字や # の文字はURLでは特殊な文字として扱われるため、URL、またはURLのパラメーターには利用できない文字になります。このため、記号部分はURLエンコードの必要があります。
[Exec]ボタンをクリックします。[入力]のテキストボックスに入力された文字列をURLエンコードし、エンコードされた結果を[出力]テキストボックスに表示します。
http://www.ipentec.com/search?query=C++andC# の文字列は http%3A%2F%2Fwww.ipentec.com%2Fsearch%3Fquery%3DC%2B%2BandC%23 の文字列に変換されます。
今回のサンプルでは、URL全体をエンコードしたため、上記の結果になります。
URLの文字列全体をパラメーターとして利用したい場合にはこの変換で問題ありません。
一方で、URLにパラメータを設定する場合は、設定されるパラメーターの文字列のみをencodeURIComponentメソッドでエンコードします。
今回の例であれば、パラメーターの値 C++andC# をencodeURIComponentメソッドでエンコードし、http://www.ipentec.com/search?query= のURLのqueryパラメーターの値として設定し、http://www.ipentec.com/search?query=C%2B%2BandC%23 という文字列を作成します。
