Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:50.

URL(URI)エンコード・デコードを行う方法

日本語文字などの非アスキー文字は、そのままではURL(URI)として使えません。そのため、日本語文字などをURL(URI)で使うためには、URL(URI)で使える文字列にエンコードする必要があります。JavaScriptでは、encodeURIというメソッドが用意されているので、これを使うことで簡単にURL(URI)エンコードを行うことができます。

使い方は簡単で、encodeURIメソッドの引数に変換したい文字列を渡すだけです。例えば、以下のような感じで記述します。

var encstr = encodeURI("変換したい文字列");

これを使えば、以下のようなURL(URI)エンコード機能を提供するフォームも簡単に作れます。

URLエンコード:

結果

上記のソースは、次のような感じです。(「formInput」というid属性が付加されたテキスト入力欄の値をエンコードして、「encOutput」というid属性が付加された要素(p要素など)に結果を出力しています。)

function EncodeStringToUri() {
   var EncStr = encodeURI( document.getElementById("formInput").value );
   document.getElementById("encOutput").innerHTML = EncStr;
}

なお、当然エンコードができればデコードもできるわけで、URL(URI)エンコードされた文字列を元の文字列に戻す場合は、decodeURIメソッドを使います。
使い方は、encodeURIメソッドと全く同じで、引数にエンコードされた文字列を渡すだけです。例えば以下のような感じ。

var orgstr = decodeURI("エンコードされた文字列");

同様にして、URL(URI)エンコードされた文字列をデコードする機能を提供するフォームも簡単に作れます。

URLデコード:

結果

ソースは以下のような感じです。(「formInput」というid属性が付加されたテキスト入力欄の値をエンコードして、「decOutput」というid属性が付加された要素(p要素など)に結果を出力しています。)

function DecodeStringToUri() {
   var DecStr = decodeURI( document.getElementById("formInput").value );
   document.getElementById("decOutput").innerHTML = DecStr;
}

こんな感じで、JavaScriptを使えば簡単にURLエンコード/デコードができます。

なお、URLには「&」記号や「=」記号などはそのまま使うことができます。
でも、HTML中に記述する場合には、それらの記号はエンコードしておく必要があります。(エンコードしなくてもたいてい望み通りに機能しますが。)
今回のencodeURI/decodeURIメソッドは、それらの記号は変換しません。
それらの記号もすべて変換させるには、encodeURIComponent/decodeURIComponentメソッドを使います。この話はまた別の機会に。(まあ、使い方はまったく一緒ですが。^^;)

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど