JavaScriptでURL（URI）エンコードする方法をご紹介します。
JavaScriptでURl（URI）をエンコードするには以下の関数が用意されていますが、今回はこれらは使用せず、HTMLのa要素（href属性）へ指定する場合、HTMLエスケープ対象となる文字限定でエンコードする必要がありますので、今回はその場合のサンプルコードをご紹介します。
URL（URI）エンコード用の関数
- encodeURI
- encodeURIComponent
- escape
HTMLサンプル
|
1 2 |
URL用文字列：<input id="txt1RrlEncodeSample" type="text" name="txt1RrlEncodeSample" value="http://write-remember.com/program/javascript/"/> エンコード後文字列：<div id="txt2RrlEncodeSample"></div> |
JavaScriptサンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
jQuery(function($) { jQuery(document).on('blur', '#txt1RrlEncodeSample', function(){ var url = document.getElementById("txt1RrlEncodeSample").value; var result = urlEncode(url); document.getElementById("txt2RrlEncodeSample").innerHTML = result; }); }); /* * URLエンコード後の文字列を返却します。 */ function urlEncode(url) { // エンコード対象とする文字の連想配列を生成します var map = {"&":"%26" , "<":"%3C" , ">":"%3E" , "\"":"%22" , "'":"%27", " ":"%20" }; // 正規表現 var regex = /(&|<|>|\'|\"| )/g; // 無名関数の参照を変数repに格納します var rep = function(whole,p1){ return map[p1]; } // 変数repに格納した無名関数への参照を渡し、文字列全てを処理します var result = url.replace(regex, rep); return result; } |
実行サンプル
URL用文字列：
エンコード後文字列：