give IT a try

プログラミング、リモートワーク、田舎暮らし、音楽、etc.

アスキー文字をURLエンコードするJavaScript関数

JavaScriptには標準でいくつかURLエンコードをしてくれる関数がありますが、一部の文字はエンコードされずにそのまま残ったりします。
そこで四の五の言わずに全部エンコードしてくれ〜!という場合に使えそうな関数を作ってみました。

//すべてのアスキー文字を返す
function getAsciiChars() {
  var a = "";
  for (var i = 32; i <= 126; i++) a += String.fromCharCode(i);
  return a;
}
//URLエンコードされた文字列を返す
function encodeString(s){
  var x = "";
  for(var i = 0; i < s.length; i++) x += "%" + s.charCodeAt(i).toString(16);
  return x;
}
//使用例
var asciiChars = getAsciiChars();
var encodedString = encodeString(asciiChars);
document.write(asciiChars);
document.write(encodedString);
//出力例
 !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~

%20%21%22%23%24%25%26%27%28%29%2a%2b%2c%2d%2e%2f%30%31%32%33%34%35%36%37%38%39%3a%3b%3c%3d%3e%3f%40%41%42%43%44%45%46%47%48%49%4a%4b%4c%4d%4e%4f%50%51%52%53%54%55%56%57%58%59%5a%5b%5c%5d%5e%5f%60%61%62%63%64%65%66%67%68%69%6a%6b%6c%6d%6e%6f%70%71%72%73%74%75%76%77%78%79%7a%7b%7c%7d%7e 


残念ながら日本語などのマルチバイト文字は正しく変換しません。
ま、あくまで簡単なスニペットと考えてください。


蛇足ですが、この手のロジックはRubyとか関数型言語とかを使ったらもっとスマートに書ける気がしました。


<参考URL>
アスキー文字コード
http://e-words.jp/p/r-ascii.html


javascript: escape(), encodeURI(), encodeURIComponent() 比較
http://groundwalker.com/blog/2007/02/javascript_escape_encodeuri_encodeuricomponent_.html


P.S.
見よう見まねでRubyバージョンを書いてみました。
エンコード用のライブラリはあると思いますが、練習がてら標準ライブラリだけで作成してみました。(Rubyらしい書き方になっている自信は皆無ですが。。。)

ascii_chars = (32..126).collect{|i| i.chr}.join
encoded_string = ascii_chars.unpack("c*").collect{|i| "%" + i.to_s(16)}.join
puts ascii_chars
puts encoded_string
#出力結果はJavaScript版と同じ


お〜、全く同じロジックがたった4行に!!
さすがRuby。クール&パワフルですね!!


P.S.2
injectっていうメソッドを使うとさらに短くできることがわかりました。

ascii_chars = (32..126).inject("") {|ret, item| ret + item.chr}
encoded_string = ascii_chars.unpack("c*").inject("") {|ret, item| ret + "%" + item.to_s(16)}
puts ascii_chars
puts encoded_string


う〜ん、なんかかっちょええ!