{"id":1926,"date":"2020-09-24T06:47:22","date_gmt":"2020-09-23T22:47:22","guid":{"rendered":"https:\/\/www.intelliwolf.com\/?p=1926"},"modified":"2020-09-24T06:47:24","modified_gmt":"2020-09-23T22:47:24","slug":"get-parameters-from-url-javascript","status":"publish","type":"post","link":"https:\/\/www.intelliwolf.com\/get-parameters-from-url-javascript\/","title":{"rendered":"How To Get Parameters From URL With JavaScript"},"content":{"rendered":"\n<p>We previously went through <a href=\"https:\/\/intelliwolf.com\/update-url-parameters-without-refreshing-browser\/\" target=\"_blank\" rel=\"noreferrer noopener\">how to update URL parameters without refreshing the browser<\/a>.<\/p>\n\n\n\n<p>Now let's go through the other side of that process.<\/p>\n\n\n\n<p><strong>How to get parameters from the URL using JavaScript<\/strong>: To get the parameters from the URL with JavaScript you need to pull in the URL and strip out the parameters using <em>RegExp<\/em>. Then split the parameters into their individual parameters using <em>split<\/em>, based on \"&amp;amp;\" or \"&amp;\". Finally, split the parameters and their values by \"=\" and put the parameters and values into an array.<\/p>\n\n\n\n<p>We're basically trying to replicate PHP's <em>$_GET<\/em> global variable.<\/p>\n\n\n\n<p>Here's my version of the function that does this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function parameters() {\n  let url = window.location.href;\n  let paramString = new RegExp('(.*)&#91;?](.*)').exec(url);\n  if (null == paramString) {\n    return {'base': url, 'params': null};\n  }\n\n  if (paramString&#91;2].includes(\"&amp;amp;\")) {\n    var paramList = paramString&#91;2].split(\"&amp;amp;\");\n  } else {\n    var paramList = paramString&#91;2].split(\"&amp;\");\n  }\n\n  let params = &#91;];\n\n  for (let i = 0; i &lt; paramList.length; i++) {\n    let values = paramList&#91;i].split(\"=\");\n    params&#91;values&#91;0]] = values&#91;1];\n  }\n  return {\"base\": paramString&#91;1], \"params\": params};\n}<\/code><\/pre>\n\n\n\n<p>Let's go through it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pull in and split the URL<\/h2>\n\n\n\n<p>We use a basic <em>window.location.href<\/em> to grab the URL along with all the parameters, if any.<\/p>\n\n\n\n<p>We split it apart using <em>RegExp<\/em> with this line:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>new RegExp('(.*)&#91;?](.*)').exec(url);<\/code><\/pre>\n\n\n\n<p>This says to look for the pattern in the URL. If it finds something, it will return an array. If it doesn't find that pattern, it will return <em>null<\/em>.<\/p>\n\n\n\n<p>The pattern is<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>(.*)&#91;?](.*)<\/code><\/pre>\n\n\n\n<p>This means find anything, then a question mark, then anything.<\/p>\n\n\n\n<p>There are a number of ways you could write this to achieve a similar result. The reason I did it this way is so that I can store the base URL (the part before the question mark) as well as the list of parameters (the part after the question mark).<\/p>\n\n\n\n<p>You could write a more fancy regex at this stage that tests for multiple parameters, but I prefer to do that processing after the program has let me know there's at least some parameters to work on.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if (null == paramString) {\n  return {'base': url, 'params': null};\n}<\/code><\/pre>\n\n\n\n<p>If the regex pattern didn't match, I want to send back the base url and let the rest of the program know that there are no parameters.<\/p>\n\n\n\n<p>If you don't need that, you can just return <em>false<\/em> at this point.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Split multiple parameters apart<\/h2>\n\n\n\n<p>There are two ways the parameters could be combined. They could be joined using \"&amp;amp;\" or using \"&amp;\". I'm not going to get into the debate about whether or not you should always use &amp;amp; - we'll just write code that works with both.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if (paramString&#91;2].includes(\"&amp;amp;\")) {\n  var paramList = paramString&#91;2].split(\"&amp;amp;\");\n} else {\n  var paramList = paramString&#91;2].split(\"&amp;\");\n}<\/code><\/pre>\n\n\n\n<p>Due to the way we setup the regex in the previous step, <em>paramString[1]<\/em> will be the base URL and <em>paramString[2]<\/em> will be any parameters.<\/p>\n\n\n\n<p>You can probably guess what this part does.<\/p>\n\n\n\n<p>If the list of parameters includes <em>&amp;amp;<\/em> then split it according to that. Otherwise, split it by <em>&amp;<\/em>.<\/p>\n\n\n\n<p>This puts the parameter list into <em>paramList<\/em> as an array, even if there is only one parameter.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Split the parameters into their values<\/h2>\n\n\n\n<p>Next we're going to run through all the parameters in <em>paramList<\/em> and split them into an array of their names and values.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let params = &#91;];\n\nfor (let i = 0; i &lt; paramList.length; i++) {\n  let values = paramList&#91;i].split(\"=\");\n  params&#91;values&#91;0]] = values&#91;1];\n}<\/code><\/pre>\n\n\n\n<p>We setup an empty <em>params<\/em> array.<\/p>\n\n\n\n<p>We loop through each of the <em>paramList<\/em> items, splitting them by the equals sign.<\/p>\n\n\n\n<p>The <em>values<\/em> variable will contain the name of the parameter in <em>values[0]<\/em> and the value of the parameter in <em>values[1]<\/em>.<\/p>\n\n\n\n<p>We put those elements into the <em>params<\/em> array as new entries.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Return the results<\/h2>\n\n\n\n<p>Finally, we return the results of our calculations.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>return {\"base\": paramString&#91;1], \"params\": params};<\/code><\/pre>\n\n\n\n<p>You could just return <em>params<\/em>, but I need the base URL as well, so that I can rebuild the URL with the parameters after I've made changes in another part of the program.<\/p>\n\n\n\n<p>This will return an array with <em>base<\/em> being the URL of the page the user is on and <em>params<\/em> being an array of the parameters.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We previously went through how to update URL parameters without refreshing the browser. Now let&#8217;s go through the other side of that process. How to get parameters from the URL using JavaScript: To get the parameters from the URL with JavaScript you need to pull in the URL and strip out the parameters using RegExp.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"yoast_head":"\n<title>How To Get Parameters From URL With JavaScript<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.intelliwolf.com\/get-parameters-from-url-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Get Parameters From URL With JavaScript\" \/>\n<meta property=\"og:description\" content=\"We previously went through how to update URL parameters without refreshing the browser. Now let&#039;s go through the other side of that process. How to get parameters from the URL using JavaScript: To get the parameters from the URL with JavaScript you need to pull in the URL and strip out the parameters using RegExp.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.intelliwolf.com\/get-parameters-from-url-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Intelliwolf\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-23T22:47:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-23T22:47:24+00:00\" \/>\n<meta name=\"author\" content=\"Mike Haydon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mike Haydon\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.intelliwolf.com\/get-parameters-from-url-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.intelliwolf.com\/get-parameters-from-url-javascript\/\"},\"author\":{\"name\":\"Mike Haydon\",\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/person\/7209e3ff14822e4d70d5f194a310f343\"},\"headline\":\"How To Get Parameters From URL With JavaScript\",\"datePublished\":\"2020-09-23T22:47:22+00:00\",\"dateModified\":\"2020-09-23T22:47:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.intelliwolf.com\/get-parameters-from-url-javascript\/\"},\"wordCount\":586,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.intelliwolf.com\/#organization\"},\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.intelliwolf.com\/get-parameters-from-url-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.intelliwolf.com\/get-parameters-from-url-javascript\/\",\"url\":\"https:\/\/www.intelliwolf.com\/get-parameters-from-url-javascript\/\",\"name\":\"How To Get Parameters From URL With JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/www.intelliwolf.com\/#website\"},\"datePublished\":\"2020-09-23T22:47:22+00:00\",\"dateModified\":\"2020-09-23T22:47:24+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.intelliwolf.com\/get-parameters-from-url-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.intelliwolf.com\/get-parameters-from-url-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.intelliwolf.com\/get-parameters-from-url-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.intelliwolf.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.intelliwolf.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How To Get Parameters From URL With JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.intelliwolf.com\/#website\",\"url\":\"https:\/\/www.intelliwolf.com\/\",\"name\":\"Intelliwolf\",\"description\":\"WordPress, Web Design &amp; Coding Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.intelliwolf.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.intelliwolf.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.intelliwolf.com\/#organization\",\"name\":\"Intelliwolf\",\"url\":\"https:\/\/www.intelliwolf.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/intelliwolf-logo-300t.png\",\"contentUrl\":\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/intelliwolf-logo-300t.png\",\"width\":300,\"height\":100,\"caption\":\"Intelliwolf\"},\"image\":{\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/person\/7209e3ff14822e4d70d5f194a310f343\",\"name\":\"Mike Haydon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d5f4754fae310a04dede91d15e57c8a0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d5f4754fae310a04dede91d15e57c8a0?s=96&d=mm&r=g\",\"caption\":\"Mike Haydon\"},\"sameAs\":[\"https:\/\/intelliwolf.com\/about-mike-haydon\/\"]}]}<\/script>\n","yoast_head_json":{"title":"How To Get Parameters From URL With JavaScript","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.intelliwolf.com\/get-parameters-from-url-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How To Get Parameters From URL With JavaScript","og_description":"We previously went through how to update URL parameters without refreshing the browser. Now let's go through the other side of that process. How to get parameters from the URL using JavaScript: To get the parameters from the URL with JavaScript you need to pull in the URL and strip out the parameters using RegExp.","og_url":"https:\/\/www.intelliwolf.com\/get-parameters-from-url-javascript\/","og_site_name":"Intelliwolf","article_published_time":"2020-09-23T22:47:22+00:00","article_modified_time":"2020-09-23T22:47:24+00:00","author":"Mike Haydon","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mike Haydon","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.intelliwolf.com\/get-parameters-from-url-javascript\/#article","isPartOf":{"@id":"https:\/\/www.intelliwolf.com\/get-parameters-from-url-javascript\/"},"author":{"name":"Mike Haydon","@id":"https:\/\/www.intelliwolf.com\/#\/schema\/person\/7209e3ff14822e4d70d5f194a310f343"},"headline":"How To Get Parameters From URL With JavaScript","datePublished":"2020-09-23T22:47:22+00:00","dateModified":"2020-09-23T22:47:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.intelliwolf.com\/get-parameters-from-url-javascript\/"},"wordCount":586,"commentCount":0,"publisher":{"@id":"https:\/\/www.intelliwolf.com\/#organization"},"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.intelliwolf.com\/get-parameters-from-url-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.intelliwolf.com\/get-parameters-from-url-javascript\/","url":"https:\/\/www.intelliwolf.com\/get-parameters-from-url-javascript\/","name":"How To Get Parameters From URL With JavaScript","isPartOf":{"@id":"https:\/\/www.intelliwolf.com\/#website"},"datePublished":"2020-09-23T22:47:22+00:00","dateModified":"2020-09-23T22:47:24+00:00","breadcrumb":{"@id":"https:\/\/www.intelliwolf.com\/get-parameters-from-url-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.intelliwolf.com\/get-parameters-from-url-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.intelliwolf.com\/get-parameters-from-url-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.intelliwolf.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.intelliwolf.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"How To Get Parameters From URL With JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.intelliwolf.com\/#website","url":"https:\/\/www.intelliwolf.com\/","name":"Intelliwolf","description":"WordPress, Web Design &amp; Coding Tutorials","publisher":{"@id":"https:\/\/www.intelliwolf.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.intelliwolf.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.intelliwolf.com\/#organization","name":"Intelliwolf","url":"https:\/\/www.intelliwolf.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.intelliwolf.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/intelliwolf-logo-300t.png","contentUrl":"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/intelliwolf-logo-300t.png","width":300,"height":100,"caption":"Intelliwolf"},"image":{"@id":"https:\/\/www.intelliwolf.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.intelliwolf.com\/#\/schema\/person\/7209e3ff14822e4d70d5f194a310f343","name":"Mike Haydon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.intelliwolf.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d5f4754fae310a04dede91d15e57c8a0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d5f4754fae310a04dede91d15e57c8a0?s=96&d=mm&r=g","caption":"Mike Haydon"},"sameAs":["https:\/\/intelliwolf.com\/about-mike-haydon\/"]}]}},"_links":{"self":[{"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/posts\/1926"}],"collection":[{"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/comments?post=1926"}],"version-history":[{"count":3,"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/posts\/1926\/revisions"}],"predecessor-version":[{"id":1937,"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/posts\/1926\/revisions\/1937"}],"wp:attachment":[{"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/media?parent=1926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/categories?post=1926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/tags?post=1926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}