Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

Bookmarklet JavaScript 小技集

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

投稿日:


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エンコード/デコードについては下記ページの3、4章が詳しいのでぜひご一読を。

このメモは、JavaScriptでクッキーを処理する場合のポイントをお示しし、URLエンコードに関わるトラブルを回避していただくことを目的にしています。

via: JavaScriptにおけるURLエンコードの処理

4873113296 JavaScript 第5版
David Flanagan 村上 列
オライリー・ジャパン 2007-08-14

by G-Tools

動画を楽しもう!(Youtubeの動画を片っ端からダウンロードするブックマークレット)
EXIF情報を一覧表示するブックマークレット「EXIF EXISTS ?」を作りました

・第13回:URLエンコードとURLデコードを簡単にするブックマークレット
第12回:引用(blockquote)をCSSと画像でそれらしく見せる方法
第11回:引用(blockquote)を簡単にするブックマークレット
第10回:Windowsフォントをアンチエイリアスでキレイに見せる方法
第9回:閲覧しているサイトへのリンクタグを生成するブックマークレット
第8回:Twitter JavaScript Badges の日付フォーマットを自由にカスタマイズ
第7回:サムネイル作成APIをJavaScriptで簡単に切り替える方法
第6回:TinyURL の遷移先が怖くて開けない場合の対処法
第5回:twitter の JavaScript Badge を改造する
第4回:twitter の JavaScript Badge をIEで表示するとおかしい件に対応してみる
第3回:JavaScriptで画像サイズと合ったポップアップウィンドウを開く
第2回:タグに関わる基本的な事
第1回:CSSで画像にborderをつけてみる

-Bookmarklet, JavaScript, 小技集

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

AmaQuick v5.0.0 ブックマークレット更新(PA-API v5対応など)

2019/09/09 – PA-API v5移行のご案内 (2020/3/9まで) Amazonより、AmaQuickでも利用しているアマゾンの商品情報を取得するAPI(PA-API)のバ …

Skypeチャットの隠しコマンド /htmlhistory とBookmarkletで簡単レポート作成術

プライベートと仕事の両方で Skype はかなり前から使っていますが、チャットの内容をどうにか別のファイルにエクスポートしたいと思いました。 Skypeチャットは設定で過去の履歴も保存・表示できるので …

no image

動画を楽しもう!(Youtubeの動画を片っ端からダウンロードするブックマークレット)

Youtubeの動画をダウンロードするツールはたくさんありますが、下記サイトに紹介しているように非常に簡単にFLV形式でダウンロードできます。 どうやらすでに内部的にも Google とくっついている …

no image

mixi日記投稿用APIを使ってPHPからmixi日記にポスト

via: mixi for iPhoneから発掘されたmixi日記投稿用API « ku という事で、iPhone用のアプリをキッカケにmixi日記にポストできるAPIが見つかったそうです。Perlの …

ドラゴンボール全巻がYouTubeで無料配信!ページめくりが速すぎる場合のスロー再生方法

つい先日攻殻機動隊S.A.C全26話無料配信でウハウハしたばかりですが、今度は名作漫画ドラゴンボールを全巻配信だそうです! MANGAPOLO Official Manga Channel &#821 …

スポンサードリンク

スポンサードリンク