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ブックマークレット版として復活!

AmaQuick開発者のヤガーです。 Chrome拡張機能としてGoogleウェブストアに公開していたAmaQuickですが、2016年11月ごろに突然Google側からBAN(公開停止)されました。 …

ちょっとまった!→FeedBurner経由の分散したブックマークを一つにまとめる方法

つい先日、FeedBurnerのトラッキング用パラメーターを取り除くUserScriptというのを公開したのですが、FeedBurnerやTwitterFeedが勝手に追加してくるパラメーターがウザイ …

ハイビジョン映像(AVCHD)を記録するとMTSファイルになって扱いにくいのでffmpegでmp4に変換

手持ちのビデオ撮影機材が予算の関係で中古で購入したミラーレス一眼(GF1、GF3、GX1、なぜか全てPanasonic LUMIX)なんですが、高画質で録画しようとするとAVCHDのMTSファイルにな …

no image

Delicious画像APIが過負荷で繋がりにくい場合のJavaScriptで対応方法

以前に、ボクが作って公開したDeliciousのブックマーク数を画像で表示するAPIですが、 ・Delicious2.0 の被ブックマーク数画像取得APIを作りました [C!] ありがたい事にものすご …

no image

TwitterでクリッピングするためのBookmarklet

いままで、ブログのURLや引用をTwitterにツイートするブックマークレットは何度か作っています。 見ているページをTwitterに投稿するBookmarkletとブログ用ボタン Twitter公式 …

スポンサードリンク

スポンサードリンク