StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h1>ES2015 (ES6)</h1> <pre><code>getQueryStringParams = query => { return query ? (/^[?#]/.test(query) ? query.slice(1) : query) .split('&') .reduce((params, param) => { let [key, value] = param.split('='); params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : ''; return params; }, {} ) : {} }; </code></pre> <hr> <h2>Without jQuery</h2> <pre><code>var qs = (function(a) { if (a == "") return {}; var b = {}; for (var i = 0; i < a.length; ++i) { var p=a[i].split('=', 2); if (p.length == 1) b[p[0]] = ""; else b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " ")); } return b; })(window.location.search.substr(1).split('&')); </code></pre> <p>With an URL like <code>?topic=123&name=query+string</code>, the following will return:</p> <pre><code>qs["topic"]; // 123 qs["name"]; // query string qs["nothere"]; // undefined (object) </code></pre> <hr> <h2>Google method</h2> <p>Tearing Google's code I found the method they use: <code>getUrlParameters</code></p> <pre><code>function (b) { var c = typeof b === "undefined"; if (a !== h && c) return a; for (var d = {}, b = b || k[B][vb], e = b[p]("?"), f = b[p]("#"), b = (f === -1 ? b[Ya](e + 1) : [b[Ya](e + 1, f - e - 1), "&", b[Ya](f + 1)][K](""))[z]("&"), e = i.dd ? ia : unescape, f = 0, g = b[w]; f < g; ++f) { var l = b[f][p]("="); if (l !== -1) { var q = b[f][I](0, l), l = b[f][I](l + 1), l = l[Ca](/\+/g, " "); try { d[q] = e(l) } catch (A) {} } } c && (a = d); return d } </code></pre> <p>It is obfuscated, but it is understandable.</p> <p>They start to look for parameters on the url from <code>?</code> and also from the hash <code>#</code>. Then for each parameter they split in the equal sign <code>b[f][p]("=")</code> (which looks like <code>indexOf</code>, they use the position of the char to get the key/value). Having it split they check whether the parameter has a value or not, if it has then they store the value of <code>d</code>, otherwise they just continue.</p> <p>In the end the object <code>d</code> is returned, handling escaping and the <code>+</code> sign. This object is just like mine, it has the same behavior.</p> <hr> <p>My method as a <strong>jQuery plugin</strong></p> <pre><code>(function($) { $.QueryString = (function(paramsArray) { let params = {}; for (let i = 0; i < paramsArray.length; ++i) { let param = paramsArray[i] .split('=', 2); if (param.length !== 2) continue; params[param[0]] = decodeURIComponent(param[1].replace(/\+/g, " ")); } return params; })(window.location.search.substr(1).split('&')) })(jQuery); </code></pre> <p>Usage</p> <pre><code>//Get a param $.QueryString.param //-or- $.QueryString["param"] //This outputs something like... //"val" //Get all params as object $.QueryString //This outputs something like... //Object { param: "val", param2: "val" } //Set a param (only in the $.QueryString object, doesn't affect the browser's querystring) $.QueryString.param = "newvalue" //This doesn't output anything, it just updates the $.QueryString object //Convert object into string suitable for url a querystring (Requires jQuery) $.param($.QueryString) //This outputs something like... //"param=newvalue&param2=val" //Update the url/querystring in the browser's location bar with the $.QueryString object history.replaceState({}, '', "?" + $.param($.QueryString)); //-or- history.pushState({}, '', "?" + $.param($.QueryString)); </code></pre> <hr> <h2><a href="http://jsperf.com/querystring-with-javascript" rel="noreferrer">Performance test (split method against regex method)</a> (<a href="http://jsperf.com/" rel="noreferrer">jsPerf</a>)</h2> <p>Preparation code: methods declaration</p> <h3>Split test code</h3> <pre><code>var qs = window.GetQueryString(query); var search = qs["q"]; var value = qs["value"]; var undef = qs["undefinedstring"]; </code></pre> <h3>Regex test code</h3> <pre><code>var search = window.getParameterByName("q"); var value = window.getParameterByName("value"); var undef = window.getParameterByName("undefinedstring"); </code></pre> <p><strong>Testing in Firefox 4.0 x86 on Windows Server 2008 R2 / 7 x64</strong></p> <ul> <li><strong>Split method</strong>: 144,780 ±2.17% fastest</li> <li><strong>Regex method</strong>: 13,891 ±0.85% | 90% slower</li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload