クエリ文字列を整形するツールを作ってみた

クエリ文字列を見やすくするツールを作ってみました。

※モバイル対応は勘弁してください…

クエリ文字列とは？

URLの?以降の文字列のことです。
https://www.google.co.jp/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=hoge

主にGETメソッドにデータを乗せたいときに使用します。

クエリ文字列を読みやすくしたい

デバッグなどで、クエリ文字列を確認したいシチュエーションがありますが、上記に挙げたようなURLのままですと、各値が非常に読みづらく、解析に時間がかかってしまいます。
&を改行に置換するだけなので、エディタの置換機能などで容易に実現できますが、自由に導入できなかったり、導入に手間が掛かったりするかもしれません。

幸いにして、javascriptでは改行コード(\n)が解釈できますので、コピペするだけで読みやすくしてくれるツールを作ってみました。
JSON変換機能付きです。

ソースコード解説

生のソースコードはブラウザの機能でご確認ください。

var url = input.value.trim();
var query = (url.match(/\?.*?(?=(#|$))/g) || [''])[0].slice(1);

与えられた文字列をtrimし、?から#または行末までの文字列を取得します。
javascriptでは正規表現の後読み（?<=pattern）が使えないため、一旦それを含めた文字列を取得した後、sliceメソッドでカットしています。
String.prototype.match()は、マッチする文字列が無かった場合はnullが返りますので、Cannot read property '0' of nullを回避するため、|| ['']としています。

|| 演算子について

短絡評価と呼びます。左辺がtrueである場合は、即座にその結果を返し、falseである場合は右辺の評価に移ります。
javascriptでは、下記の５つは暗黙的にfalseと評価されます。

0
NaN
“”
undefined
null

ただし、-1はtrueを返します。indexOfなどを評価するときは要注意です。

output.value = query.replace(/&/g,'\n');

&を改行コードに置換し、textareaに書き込みます。

      outjson.value = (function(){
        var queryKV = query.split('&');
        var jsonObject = {};
        for(var kv in queryKV){
          var kvArr = queryKV[kv].split('=');
          var key = kvArr[0];
          var value = kvArr[1];
          jsonObject[key] = value;
        }
        return JSON.stringify(jsonObject,null,4);
      })();

即時関数を利用して、できるだけネームスペースを汚染しないようにします。
それでは、上記のコードを順に解説します。

        var queryKV = query.split('&');
        var jsonObject = {};

query文字列をsplit関数を用いて&で分割します。
また、戻り値となるjsonObjectを作成しておきます。

たとえば、URLをhttp://example.com/search?a=hoge&b=fuga&c=piyoとした場合、この段階では、以下のようになっています。

key	value
0	a=hoge
1	b=fuga
2	c=piyo

        for(var kv in queryKV){
          var kvArr = queryKV[kv].split('=');
          var key = kvArr[0];
          var value = kvArr[1];
          jsonObject[key] = value;
        }

for…in文で回します。最近ではfor…of文が使えますし、forEachメソッドもありますが、できるだけ広い範囲をサポートするようにしました。
変数kvArrに、=で分割したkeyおよびvalueをセットします。

key	value
0	a
1	hoge

これらを、jsonObjectに入れ込みます。
上記のソースコードでは、一旦keyとvalueを変数に入れていますが、これは読みやすさのためです。以下のようにしても問題ありません。

          jsonObject[kvArr[0]] = kvArr[1];

ただ、直観的でないかもしれません。通常、ソースコードは読みやすく書かれるべきです。
一昔前であれば、メモリの節約などの理由で上記のような書き方が必要だったかもしれませんが、現代のクライアントサイドjavascriptでは、メモリの節約を求められるシチュエーションは皆無と言って良いでしょう。

for…in文の注意

ところで、for…in文は、配列（[]）では回さない方が無難です。通常、prototypeオブジェクトはfor…in文の対象には含まれませんが、Array.prototypeに対してオーバーライドやオブジェクト・メソッドの追加を行うと、それが対象に含まれてしまう可能性があります。
コーディング当初はそんな予定がなくても、旧ブラウザへの対応が必要となった場合に、サポートしていないメソッドを追加で実装することになるかもしれません。配列に関しては、通常のfor文か、forEachで処理を行うべきです。

return JSON.stringify(jsonObject,null,4);

JSON.stringifyした結果を返します。第三引数に値を指定することにより、整形された結果が出力されます。詳しくは、JSON.stringify() – JavaScript | MDNを参照してください。

このように、簡単なものであれば、高機能なエディタに頼らなくても、javascriptやbashなどのスクリプト言語で対応できることが多いです。エディタが使えない環境や、導入に手間が掛かる場合などは、自分でツールを作ってみるのも面白いかもしれません。