{"id":7542,"date":"2015-06-24T07:03:00","date_gmt":"2015-06-24T12:03:00","guid":{"rendered":"http:\/\/bobbeaty.com\/wp\/?p=7542"},"modified":"2015-06-24T07:11:04","modified_gmt":"2015-06-24T12:11:04","slug":"pulling-query-params-from-url-in-javascript","status":"publish","type":"post","link":"https:\/\/bobbeaty.com\/wp\/archives\/7542","title":{"rendered":"Pulling Query Params from URL in Javascript"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/bobbeaty.com\/wp\/wp-content\/uploads\/2009\/04\/squirrelfish.jpg\" alt=\"SquirrelFish.jpg\" title=\"SquirrelFish.jpg\" border=\"0\" width=\"140\" height=\"93\" style=\"float:right;\" \/><\/p>\n<p>As part of this continuing project at The Shop, one of the things we're going to need is to be able to put URLs in emails and have the user click on them, and have it take them <em>right to<\/em> the document in question. This means we need to have the <tt>index.html<\/tt> page accept a query param of the ID of the thing to load. Then, if we get to the page, and this query param is there, then we load the requested data, if not, we put up a blank page, and then let the user search for the document they want.<\/p>\n<p>Seems simple. If we can get the query params from the URL in Javascript.<\/p>\n<p>Thankfully, someone posted this lovely little function:<\/p>\n<pre class=\"javascript\" style=\"font-family:monospace;\">  <span style=\"color: #006600; font-style: italic;\">\/*\n   * This function extracts the provided query string from the URL for\n   * the page we're on, and it's a nice and simple way to get the parts\n   * of the URL that we're looking to see if they provided.\n   *\/<\/span>\n  <span style=\"color: #000066; font-weight: bold;\">function<\/span> qs<span style=\"color: #009900;\">&#40;<\/span>key<span style=\"color: #009900;\">&#41;<\/span> <span style=\"color: #009900;\">&#123;<\/span>\n    <span style=\"color: #006600; font-style: italic;\">\/\/ escape RegEx meta chars<\/span>\n    key <span style=\"color: #339933;\">=<\/span> key.<span style=\"color: #660066;\">replace<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #009966; font-style: italic;\">\/[*+?^$.\\[\\]{}()|\\\\\\\/]\/g<\/span><span style=\"color: #339933;\">,<\/span> <span style=\"color: #3366CC;\">&quot;<span style=\"color: #000099; font-weight: bold;\">\\\\<\/span>$&amp;&quot;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">;<\/span>\n    <span style=\"color: #000066; font-weight: bold;\">var<\/span> match <span style=\"color: #339933;\">=<\/span> location.<span style=\"color: #660066;\">search<\/span>.<span style=\"color: #660066;\">match<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #000066; font-weight: bold;\">new<\/span> RegExp<span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #3366CC;\">&quot;[?&amp;]&quot;<\/span><span style=\"color: #339933;\">+<\/span>key<span style=\"color: #339933;\">+<\/span><span style=\"color: #3366CC;\">&quot;=([^&amp;]+)(&amp;|$)&quot;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">;<\/span>\n    <span style=\"color: #000066; font-weight: bold;\">return<\/span> match <span style=\"color: #339933;\">&amp;&amp;<\/span> decodeURIComponent<span style=\"color: #009900;\">&#40;<\/span>match<span style=\"color: #009900;\">&#91;<\/span><span style=\"color: #CC0000;\">1<\/span><span style=\"color: #009900;\">&#93;<\/span>.<span style=\"color: #660066;\">replace<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #009966; font-style: italic;\">\/\\+\/g<\/span><span style=\"color: #339933;\">,<\/span> <span style=\"color: #3366CC;\">&quot; &quot;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">;<\/span>\n  <span style=\"color: #009900;\">&#125;<\/span><\/pre>\n<p>Then we can have a little <tt>script<\/tt> block at the bottom of the <tt>index.html<\/tt> page, after loading all the javascript libraries, that checks to see if this parameter is being provided:<\/p>\n<pre class=\"javascript\" style=\"font-family:monospace;\">  <span style=\"color: #006600; font-style: italic;\">\/\/ when the page is done loading, then load up the form<\/span>\n  <span style=\"color: #000066; font-weight: bold;\">var<\/span> lid <span style=\"color: #339933;\">=<\/span> qs<span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #3366CC;\">'loan'<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">;<\/span>\n  $<span style=\"color: #009900;\">&#40;<\/span> document <span style=\"color: #009900;\">&#41;<\/span>.<span style=\"color: #660066;\">ready<\/span><span style=\"color: #009900;\">&#40;<\/span>loadLoan<span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #009900;\">&#40;<\/span>$.<span style=\"color: #660066;\">isNumeric<\/span><span style=\"color: #009900;\">&#40;<\/span>lid<span style=\"color: #009900;\">&#41;<\/span> <span style=\"color: #339933;\">?<\/span> lid <span style=\"color: #339933;\">:<\/span> <span style=\"color: #003366; font-weight: bold;\">null<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">;<\/span><\/pre>\n<p>This snip does everything we want - checks for the numeric value, and if it's there, uses it, if not, shows the blank page. Very nice.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As part of this continuing project at The Shop, one of the things we&#8217;re going to need is to be able to put URLs in emails and have the user click on them, and have it take them right to the document in question. This means we need to have the index.html page accept a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[],"class_list":["post-7542","post","type-post","status-publish","format-standard","hentry","category-coding","category-open-source-software"],"_links":{"self":[{"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/posts\/7542","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/comments?post=7542"}],"version-history":[{"count":2,"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/posts\/7542\/revisions"}],"predecessor-version":[{"id":7545,"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/posts\/7542\/revisions\/7545"}],"wp:attachment":[{"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/media?parent=7542"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/categories?post=7542"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/tags?post=7542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}