{"id":332,"date":"2011-02-07T19:42:24","date_gmt":"2011-02-08T00:42:24","guid":{"rendered":"http:\/\/osric.com\/chris\/accidental-developer\/?p=332"},"modified":"2018-07-31T21:15:46","modified_gmt":"2018-08-01T02:15:46","slug":"parsing-a-url-querystring-with-javascript","status":"publish","type":"post","link":"https:\/\/osric.com\/chris\/accidental-developer\/2011\/02\/parsing-a-url-querystring-with-javascript\/","title":{"rendered":"Parsing a URL Querystring with Javascript"},"content":{"rendered":"<p><strong>Can you access a URL querystring with Javascript?<\/strong><br \/>\nYes. Just refer to <em>location.search<\/em>.<\/p>\n<p><strong>Why would you <em>want <\/em>to reference the URL querystring with Javascript?<\/strong><br \/>\nA couple reasons come to mind.<!--more--><\/p>\n<ul>\n<li>Highlighting a specified term wherever it appears within a page<\/li>\n<li>Linking to a dynamic page in a specific state<\/li>\n<\/ul>\n<p>The latter, which I have also seen called <em>deep linking<\/em>, seems particularly useful to me. You want to send someone a link to a video, but it&#8217;s one of several videos in a playlist on a page. You can send the URL and tell them, &#8220;It&#8217;s the 4th video from the top.&#8221;<\/p>\n<p>Or you want to send someone the link to a page featuring one of the nearly-ubiquitous carousels, like the <a href=\"http:\/\/dsc.discovery.com\/\">Discovery Channel&#8217;s main page<\/a>. You want to send a link to the <a href=\"http:\/\/news.discovery.com\/videos\/space-nasa-plans-next-journey-to-moon.html\">lunar rover feature<\/a>, but by default the page features a ridiculous-looking reality show called <a href=\"http:\/\/dsc.discovery.com\/tv\/american-chopper\/\">American Choppers<\/a>.<\/p>\n<p>One way would be to supply the user with a link, something like:<br \/>\n<code>http:\/\/dsc.discovery.com\/?feature=4<\/code><\/p>\n<p>(Sure, you could link to the feature&#8217;s destination page, but humor me here.)<\/p>\n<p>Here&#8217;s some code to help turn <em>location.search<\/em> into something a little easier to use:<\/p>\n<pre><code>function parseQS() {\r\n\t\/\/ Remove leading question mark (\"?\") and split into array of key\/value pairs\r\n\tvar qsArray = location.search.slice(1).split(\"&amp;\");\r\n\t\/\/ Initialize object to store key\/value pairs\r\n\tvar json = {};\r\n\t\/\/ Loop through key\/value pairs and separate into keys and values\r\n\tfor ( var i = 0; i &lt; qsArray.length; i++ ) {\r\n\t\tvar kv = qsArray[i].split(\"=\");\r\n\t\tvar key = kv[0];\r\n\t\tvar val;\r\n\t\tif ( kv.length == 1 ) val = key;\r\n\t\t\/\/ A key may be present without a value, so set a placeholder value\r\n\t\telse val = kv[1];\r\n\t\tjson[key] = val;\r\n\t}\r\n\treturn json;\r\n}<\/code><\/pre>\n<p>Now you can check to see if <em>parseQS().feature<\/em> is defined, and if so, show the user the specified feature.<\/p>\n<p>I&#8217;m sure someone has created a more elegant Javascript querystring parser. If you&#8217;ve found one&#8211;or if you wrote one&#8211;let me know in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Can you access a URL querystring with Javascript? Yes. Just refer to location.search. Why would you want to reference the URL querystring with Javascript? A couple reasons come to mind.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[350,166,165,164],"class_list":["post-332","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-javascript","tag-parameters","tag-parse","tag-querystring"],"_links":{"self":[{"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/posts\/332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/comments?post=332"}],"version-history":[{"count":8,"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/posts\/332\/revisions"}],"predecessor-version":[{"id":2715,"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/posts\/332\/revisions\/2715"}],"wp:attachment":[{"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/media?parent=332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/categories?post=332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/tags?post=332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}