JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでURLをデコードする方法｜decodeURI()の使い方と実例付き解説

JavaScriptでURLをデコードするには、decodeURI()メソッドを使用します。このメソッドは、encodeURI()でエンコードされたURIを、人間が読める元の形式へと戻すために使われます。

decodeURI()の基本構文

decodeURI(encodedURI)

引数にはエンコード済みのURI文字列を渡し、戻り値としてデコード後の新しい文字列が返されます。

サンプルコード

以下は、URLを一度エンコードしてからデコードし、その結果を画面に表示するシンプルな例です。ボタンをクリックすると処理が実行されます。

<!DOCTYPE html>
<html>
<body>
  <button onclick="display()">Check</button>
  <p id="demo"></p>
  <script>
    function display() {
      var uri = "welcome msg.jsp?name=åmit&amp;sub=programming";

      // まずエンコードする
      var encode = encodeURI(uri);
      var decode = decodeURI(encode);

      var result = "Encode= " + encode + "&lt;br&gt;" + "Decode= " + decode;
      document.getElementById("demo").innerHTML = result;
    }
  </script>
</body>
</html>

実行結果

ボタンをクリックすると、次のように表示されます。

Encode= welcome%20msg.jsp?name=%C3%A5mit&sub=programming
Decode= welcome msg.jsp?name=åmit&sub=programming

スペースは「%20」に、「å」のような特殊文字は「%C3%A5」にエンコードされ、decodeURI()によって元の文字列へ復元されていることが確認できます。

decodeURI()とdecodeURIComponent()の違い

JavaScriptには、URLをデコードするためのメソッドがもう1つ用意されています。それぞれの役割は以下の通りです。

  • decodeURI()：encodeURI()でエンコードした文字列をデコードします。「/」「?」「&」「=」など、URIの構造上特別な意味を持つ予約文字はデコードされません。
  • decodeURIComponent()：encodeURIComponent()でエンコードした文字列をデコードします。予約文字も含め、すべてのエンコード文字を元に戻します。

decodeURIComponent()の使用例

var encoded = encodeURIComponent("https://example.com/?q=プログラミング");
console.log(encoded); // https%3A%2F%2Fexample.com%2F%3Fq%3D%E3%83%97%E3%83%AD...

var decoded = decodeURIComponent(encoded);
console.log(decoded); // https://example.com/?q=プログラミング

使用時の注意点

  • 不正なパーセントエンコーディング（例：「%ZZ」）を含む文字列を渡すと、URIError例外がスローされます。
  • クエリ文字列内の「+」記号はスペースに変換されません。必要に応じてreplace(/\+/g, " ")などで置換してください。
  • 日本語などのマルチバイト文字を含むURLを扱う場合は、decodeURIComponent()を使用するのが安全です。

用途に応じてdecodeURI()とdecodeURIComponent()を使い分けることで、URLの安全かつ正確なエンコード・デコード処理を実現できます。

  1. JavaScriptでページを印刷するにはどうすればよいですか？

    JavaScriptでページを印刷するには、print()メソッドを使用します。このメソッドを呼び出すと、ブラウザの標準的な印刷ダイアログボックスが開き、どのプリンターを使用するか、部数はいくつにするかといった印刷オプションを簡単に設定できます。以下は、実際に印刷ダイアログが表示された様子の例です。サンプルコード次のコードを実行すると、ボタンをクリックするだけでページを印刷できる動作を確認できます。<!DOCTYPE html> <html>     <body>     &nb

  2. JavaScriptでURLオブジェクトを作成する方法をわかりやすく解説

    JavaScriptでは、標準組み込みのURLコンストラクタを使うことで、URL文字列からURLオブジェクトを簡単に生成できます。URLオブジェクトを作成すると、プロトコル（protocol）やホスト名（host）、パス（pathname）など、URLを構成する各要素に個別にアクセスできるようになるため、URLの解析や操作がとても便利になります。 URLオブジェクトの作成例 以下は、JavaScriptでURLオブジェクトを作成し、ボタンをクリックするとその各プロパティを画面に表示するサンプルコードです。 <!DOCTYPE html> <html lang="