第13回：URLエンコードとURLデコードを簡単にするブックマークレット

2007年09月25日 09:58

小技集 Bookmarklet JavaScript

URLエンコードとURLデコードって頻繁には使わないけど、いざ使う時は適当にGoogleで検索して出てきた変換サイトを使っていたりしました。
この辺とか、

URLエンコードとデコードが行えるフォームです。
via: Web便利ツール/URLエンコード・デコードフォーム - TAG index

でも、JavaScriptでできるレベルの処理をやるにはちょっと面倒だと感じたのでブックマークレットを作ってみました。

URLエンコード　ブックマークレット

＞URL encode

上記リンクをブックマークして下さい。
・文字を選択した状態で実行すると、選択した文字をURLエンコードして返します。
・文字を選択しなかった場合は、プロンプトが開くのでURLエンコードしたい文字を入力します。

一応ソースも改行・インデント付きで書いておきます

javascript:

(

  function() {

    var d = document;

    var w = window;

    var t;

    if ( d.selection ) {

      t = d.selection.createRange().text;

    } else if ( w.selection ) {

      t = w.selection.createRange().text;

    } else if ( d.getSelection ) {

      t = d.getSelection();

    } else if ( w.getSelection ) {

      t = w.getSelection();

    } else {

      t='';

    }

    function e(t) {

      prompt( 'Encoded!' , encodeURIComponent(t) );

    }

    if ( t == null || t == '' ) {

      if ( t = prompt( 'Input text you want to Encode' ) ) {

        e(t);

      }

    } else {

	  e(t);

    }

  }

)();

URLデコード　ブックマークレット

エンコードの逆なので書くまでもないですが、

＞URL decode

上記リンクをブックマークして下さい。
・文字を選択した状態で実行すると、選択した文字をURLデコードして返します。
・文字を選択しなかった場合は、プロンプトが開くのでURLデコードしたい文字を入力します。

一応ソースも改行・インデント付きで書いておきます

javascript:

(

  function() {

    var d = document;

    var w = window;

    var t;

    if ( d.selection ) {

      t = d.selection.createRange().text;

    } else if ( w.selection ) {

      t = w.selection.createRange().text;

    } else if ( d.getSelection ) {

      t = d.getSelection();

    } else if ( w.getSelection ) {

      t = w.getSelection();

    } else {

      t ='';

    }

    function e(t) {

      prompt( 'Decoded!' , decodeURIComponent(t) );

    } if ( t == null || t == '' ) {

      if ( t = prompt( 'Input text you want to Decode' ) ) {

        e(t);

      }

    } else {

      e(t);

    }

  }

)();

備考

・JavaScript の encodeURIComponent／decodeURIComponent を使用していますので、古いブラウザでは使用できません。
・JavaScript の encodeURIComponent／decodeURIComponent を使用していますので、変換の文字コードはUTF-8となります。

あと、JavScriptでのURLエンコード／デコードについては下記ページの３、４章が詳しいのでぜひご一読を。