StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Some of the solutions posted here are inefficient. Repeating the regular expression search every time the script needs to access a parameter is completely unnecessary, one single function to split up the parameters into an associative-array style object is enough. If you're not working with the HTML 5 History API, this is only necessary once per page load. The other suggestions here also fail to decode the URL correctly.</p> <pre><code>var urlParams; (window.<a href="https://developer.mozilla.org/en-US/docs/DOM/window.onpopstate" rel="noreferrer">onpopstate</a> = function () { var match, pl = /\+/g, // Regex for replacing addition symbol with a space search = /([^&=]+)=?([^&]*)/g, decode = function (s) { return <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/decodeURIComponent" rel="noreferrer">decodeURIComponent</a>(s.replace(pl, " ")); }, query = window.<a href="https://developer.mozilla.org/en-US/docs/DOM/window.location" rel="noreferrer">location</a>.search.<a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/substring" rel="noreferrer">substring</a>(1); urlParams = {}; while (match = search.<a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/RegExp/exec" rel="noreferrer">exec</a>(query)) urlParams[decode(match[1])] = decode(match[2]); })();</code></pre> <p>Example querystring: </p> <blockquote> <p><code>?i=main&mode=front&sid=de8d49b78a85a322c4155015fdce22c4&enc=+Hello%20&empty</code></p> </blockquote> <p>Result:</p> <pre class="lang-js prettyprint-override"><code> urlParams = { enc: " Hello ", i: "main", mode: "front", sid: "de8d49b78a85a322c4155015fdce22c4", empty: "" } alert(urlParams["mode"]); // -> "front" alert("empty" in urlParams); // -> true </code></pre> <p>This could easily be improved upon to handle array-style query strings too. An example of this is <a href="http://jsbin.com/adali3/2" rel="noreferrer">here</a>, but since array-style parameters aren't defined in <a href="http://tools.ietf.org/html/rfc3986" rel="noreferrer">RFC 3986</a> I won't pollute this answer with the source code. <a href="https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript/23401756#23401756">For those interested in a "polluted" version, look at campbeln's answer below</a>.</p> <p>Also, as pointed out in the comments, <code>;</code> is a legal delimiter for <code>key=value</code> pairs. It would require a more complicated regex to handle <code>;</code> or <code>&</code>, which I think is unnecessary because it's rare that <code>;</code> is used and I would say even more unlikely that both would be used. If you need to support <code>;</code> instead of <code>&</code>, just swap them in the regex.</p> <p><hr /> If you're using a server-side preprocessing language, you might want to use its native JSON functions to do the heavy lifting for you. For example, in PHP you can write:</p> <pre><code><script>var urlParams = <?php echo <a href="http://php.net/manual/en/function.json-encode.php" rel="noreferrer">json_encode</a>($_GET, JSON_HEX_TAG);?>;</script></code></pre> <p>Much simpler!</p>

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