{"id":1943,"date":"2015-09-28T23:47:35","date_gmt":"2015-09-28T21:47:35","guid":{"rendered":"http:\/\/codingexplained.com\/?p=1943"},"modified":"2017-06-11T19:34:35","modified_gmt":"2017-06-11T17:34:35","slug":"getting-query-parameter-from-url-javascript","status":"publish","type":"post","link":"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/getting-query-parameter-from-url-javascript","title":{"rendered":"Getting Query Parameter from URL in JavaScript"},"content":{"rendered":"<p>To most people&#8217;s surprise, there is not a standard way of accessing query string parameters from JavaScript without first having to parse the query string. Some frameworks and libraries have implemented ways of doing this, but it is not always the case. For example, the ever so popular jQuery has not implemented this, but rather lets you accomplish this with plugins.<\/p>\n<p>There are a ton of ways of doing this, and you can find many very complicated approaches on Stack Overflow and where not. However, instead of giving you a very complicated solution that will work in many edge use cases, I will provide you with a very simple and easy to understand approach that works for most use cases. If you need something fancier, you can of course continue your search, but this will be sufficient in most cases.<\/p>\n<p>So, enough words &#8211; let&#8217;s see some code!<\/p>\n<pre><code class=\"javascript\">function qs(name) {\r\n    var query = window.location.search.substring(1); \/\/ Remove question mark\r\n    var parameters = query.split('&');\r\n\r\n    for (var i = 0; i < parameters.length; i++) {\r\n        var pair = parameters[i].split('=');\r\n\r\n        if (pair[0] == name) {\r\n            return pair[1];\r\n        }\r\n    }\r\n\r\n    return null;\r\n}<\/code><\/pre>\n<p>The above function simply parses the query string by splitting it into an array by <span class=\"code\">&<\/span>. Then it simply loops through the query parameters and splits by <span class=\"code\">=<\/span> in order to isolate the parameter name and value, respectively. The result is that the parameter name is available at <span class=\"code\">pair[0]<\/span>, and the value at <span class=\"code\">pair[1]<\/span>, hence why we can easily check if the parameter name matches what we are looking for. If so, the value is returned, and otherwise <span class=\"code\">NULL<\/span> is returned.<\/p>\n<p>To use the function, simply do as follows.<\/p>\n<pre><code class=\"javascript\">var id = qs('id');<\/code><\/pre>\n<p>Simple, right? Improvements are always welcome, but please remember that this is not intended to be a bullet-proof solution for every use case out there.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To most people&#8217;s surprise, there is not a standard way of accessing query string parameters from JavaScript without first having to parse the query string. Some frameworks and libraries have implemented ways of doing this, but it is not always the case. For example, the ever so popular jQuery has not implemented this, but rather&hellip; <a href=\"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/getting-query-parameter-from-url-javascript\" class=\"more-link\">read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"jetpack_post_was_ever_published":false,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[128],"tags":[129,73],"series":[],"jetpack_publicize_connections":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Getting Query Parameter from URL in JavaScript<\/title>\n<meta name=\"description\" content=\"Getting query parameters from the URL in JavaScript is reading. Forget about complex parsing of the query string with regular expressions.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/getting-query-parameter-from-url-javascript\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Getting Query Parameter from URL in JavaScript\" \/>\n<meta property=\"og:description\" content=\"Getting query parameters from the URL in JavaScript is reading. Forget about complex parsing of the query string with regular expressions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/getting-query-parameter-from-url-javascript\" \/>\n<meta property=\"og:site_name\" content=\"Coding Explained\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codingexplained\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codingexplained\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-28T21:47:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-06-11T17:34:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codingexplained.com\/wp-content\/uploads\/2015\/11\/codingexplained-fb-promote.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"444\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Bo Andersen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codingexplained\" \/>\n<meta name=\"twitter:site\" content=\"@codingexplained\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bo Andersen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/getting-query-parameter-from-url-javascript\",\"url\":\"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/getting-query-parameter-from-url-javascript\",\"name\":\"Getting Query Parameter from URL in JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/codingexplained.com\/#website\"},\"datePublished\":\"2015-09-28T21:47:35+00:00\",\"dateModified\":\"2017-06-11T17:34:35+00:00\",\"author\":{\"@id\":\"https:\/\/codingexplained.com\/#\/schema\/person\/e19c92ec991f571605f047cefeaa950d\"},\"description\":\"Getting query parameters from the URL in JavaScript is reading. Forget about complex parsing of the query string with regular expressions.\",\"breadcrumb\":{\"@id\":\"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/getting-query-parameter-from-url-javascript#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/getting-query-parameter-from-url-javascript\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/getting-query-parameter-from-url-javascript#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codingexplained.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Getting Query Parameter from URL in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codingexplained.com\/#website\",\"url\":\"https:\/\/codingexplained.com\/\",\"name\":\"Coding Explained\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codingexplained.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/codingexplained.com\/#\/schema\/person\/e19c92ec991f571605f047cefeaa950d\",\"name\":\"Bo Andersen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codingexplained.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/28f5826f9d5d544b0c5e1ec321dfdfb8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/28f5826f9d5d544b0c5e1ec321dfdfb8?s=96&d=mm&r=g\",\"caption\":\"Bo Andersen\"},\"description\":\"I am a back-end web developer with a passion for open source technologies. I have been a PHP developer for many years, and also have experience with Java and Spring Framework. I currently work full time as a lead developer. Apart from that, I also spend time on making online courses, so be sure to check those out!\",\"sameAs\":[\"https:\/\/codingexplained.com\",\"https:\/\/www.facebook.com\/codingexplained\",\"https:\/\/www.linkedin.com\/in\/ba0708\",\"https:\/\/twitter.com\/codingexplained\",\"https:\/\/www.youtube.com\/c\/codingexplained\"],\"url\":\"https:\/\/codingexplained.com\/author\/andy\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Getting Query Parameter from URL in JavaScript","description":"Getting query parameters from the URL in JavaScript is reading. Forget about complex parsing of the query string with regular expressions.","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:\/\/codingexplained.com\/coding\/front-end\/javascript\/getting-query-parameter-from-url-javascript","og_locale":"en_US","og_type":"article","og_title":"Getting Query Parameter from URL in JavaScript","og_description":"Getting query parameters from the URL in JavaScript is reading. Forget about complex parsing of the query string with regular expressions.","og_url":"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/getting-query-parameter-from-url-javascript","og_site_name":"Coding Explained","article_publisher":"https:\/\/www.facebook.com\/codingexplained","article_author":"https:\/\/www.facebook.com\/codingexplained","article_published_time":"2015-09-28T21:47:35+00:00","article_modified_time":"2017-06-11T17:34:35+00:00","og_image":[{"width":1200,"height":444,"url":"https:\/\/codingexplained.com\/wp-content\/uploads\/2015\/11\/codingexplained-fb-promote.png","type":"image\/png"}],"author":"Bo Andersen","twitter_card":"summary_large_image","twitter_creator":"@codingexplained","twitter_site":"@codingexplained","twitter_misc":{"Written by":"Bo Andersen","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/getting-query-parameter-from-url-javascript","url":"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/getting-query-parameter-from-url-javascript","name":"Getting Query Parameter from URL in JavaScript","isPartOf":{"@id":"https:\/\/codingexplained.com\/#website"},"datePublished":"2015-09-28T21:47:35+00:00","dateModified":"2017-06-11T17:34:35+00:00","author":{"@id":"https:\/\/codingexplained.com\/#\/schema\/person\/e19c92ec991f571605f047cefeaa950d"},"description":"Getting query parameters from the URL in JavaScript is reading. Forget about complex parsing of the query string with regular expressions.","breadcrumb":{"@id":"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/getting-query-parameter-from-url-javascript#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codingexplained.com\/coding\/front-end\/javascript\/getting-query-parameter-from-url-javascript"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/getting-query-parameter-from-url-javascript#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codingexplained.com\/"},{"@type":"ListItem","position":2,"name":"Getting Query Parameter from URL in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codingexplained.com\/#website","url":"https:\/\/codingexplained.com\/","name":"Coding Explained","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codingexplained.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/codingexplained.com\/#\/schema\/person\/e19c92ec991f571605f047cefeaa950d","name":"Bo Andersen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingexplained.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/28f5826f9d5d544b0c5e1ec321dfdfb8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/28f5826f9d5d544b0c5e1ec321dfdfb8?s=96&d=mm&r=g","caption":"Bo Andersen"},"description":"I am a back-end web developer with a passion for open source technologies. I have been a PHP developer for many years, and also have experience with Java and Spring Framework. I currently work full time as a lead developer. Apart from that, I also spend time on making online courses, so be sure to check those out!","sameAs":["https:\/\/codingexplained.com","https:\/\/www.facebook.com\/codingexplained","https:\/\/www.linkedin.com\/in\/ba0708","https:\/\/twitter.com\/codingexplained","https:\/\/www.youtube.com\/c\/codingexplained"],"url":"https:\/\/codingexplained.com\/author\/andy"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3mJkW-vl","_links":{"self":[{"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/posts\/1943"}],"collection":[{"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/comments?post=1943"}],"version-history":[{"count":4,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/posts\/1943\/revisions"}],"predecessor-version":[{"id":2929,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/posts\/1943\/revisions\/2929"}],"wp:attachment":[{"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/media?parent=1943"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/categories?post=1943"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/tags?post=1943"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/series?post=1943"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}