function main(){ var imaginaryUrl = "http://example.com/webapp/?search=how%20to%20use%20Google&the_answer=42", qs = new QuerystringTable(imaginaryUrl); urlbox.innerHTML = "url: " + imaginaryUrl; logButton( "qs.getKeys()", qs.getKeys() .map(arrowify) .join("\n") ); logButton( 'qs.getValue("search")', qs.getValue("search") .arrowify() ); logButton( 'qs.getValue("the_answer")', qs.getValue("the_answer") .arrowify() ); logButton( "qs.getQuerystring()", qs.getQuerystring() .arrowify() ); } function arrowify(str){ return " -> " + str; } String.prototype.arrowify = function(){ return arrowify(this); } function log(msg){ txt.value += msg + '\n'; txt.scrollTop = txt.scrollHeight; } function logButton(name, output){ var el = document.createElement("button"); el.innerHTML = name; el.onclick = function(){ log(name); log(output); log("- - - -"); } buttonContainer.appendChild(el); } function QuerystringTable(_url){ // private var url = _url, table = {}; function buildTable(){ getQuerystring().split('&').filter(validatePair).map(parsePair); } function parsePair(pair){ var splitPair = pair.split('='), key = decodeURIComponent(splitPair[0]), value = decodeURIComponent(splitPair[1]); table[key] = value; } function validatePair(pair){ var splitPair = pair.split('='); return !!splitPair[0] && !!splitPair[1]; } function validateUrl(){ if(typeof url !== "string"){ throw "QuerystringTable() :: <string url>: expected string, got " + typeof url; } if(url == ""){ throw "QuerystringTable() :: Empty string given for argument <string url>"; } } // public function getKeys(){ return Object.keys(table); } function getQuerystring(){ var string; validateUrl(); string = url.split('?')[1]; if(!string){ string = url; } return string; } function getValue(key){ var match = table[key] || null; if(!match){ return "undefined"; } return match; } buildTable(); this.getKeys = getKeys; this.getQuerystring = getQuerystring; this.getValue = getValue; } main();
<p id="urlbox"></p> <textarea id="txt" disabled="true"></textarea> <div id="buttonContainer"></div>
#urlbox{ width: 100%; padding: 5px; margin: 10px auto; font: 12px monospace; background: #fff; color: #000; } #txt{ width: 100%; height: 200px; padding: 5px; margin: 10px auto; resize: none; border: none; background: #fff; color: #000; displaY:block; } button{ padding: 5px; margin: 10px; width: 200px; background:#eee; color: #000; border:1px solid #ccc; display: block; } button:hover{ background: #fff; cursor: pointer; }