How to get Query String Parameters in Javascript - 2019
Tags: javascript, webdev, beginners, showdev
Published: 2019-10-31 19:43:53

---
title: How to get Query String Parameters in Javascript - 2019
published: true
description: How to get Query String Parameters in Javascript - 2019
tags: javascript,webdev,beginners,showdev
canonical_url : https://cloudnweb.dev/2019/11/how-to-get-query-string-parameters-in-javascript-2019/
---
<!-- wp:paragraph -->
<p>This series is a quick <a href="https://cloudnweb.dev/tag/javascript/">javascript </a>tricks that you can learn in 2 mins. In this article, How to get Query String Parameters in Javascript - 2019.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>There is a simple method to get the query string parameters in javascript.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const getQueryParams = ( params, url ) => {
  
  let href = url;
  //this expression is to get the query strings
  let reg = new RegExp( '[?&amp;]' + params + '=([^&amp;#]*)', 'i' );
  let queryString = reg.exec(href);
  return queryString ? queryString[1] : null;
};

getQueryParams('data','http://another-example.com?example=something&amp;data=13');</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Firstly, this function takes <strong>params </strong>and <strong>url </strong>as a parameters. Inside, the function we assign the url to varialble <strong>href</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>After that, Regex Pattern checks the url to match a pattern. Mainly, regex checks the value that starts with either <strong>&amp;</strong> or <strong>?</strong> followed by the parameter that you pass.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Regex takes the value after symbol <strong>(=)</strong> and store it in the variable queryString and returns it.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1611} -->
<figure class="wp-block-image"><img src="https://cloudnweb.dev/wp-content/uploads/2019/11/Capture.png" alt="" class="wp-image-1611"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>Getting All Query Strings in Javascript</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Above Implementation works fine if you want to get the specific query string. However, it will not work if you want to get all the query strings.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To get all the query strings from url, we can implement a different approach.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>
const getQueryParams = (url) => {
	let queryParams = {};
  //create an anchor tag to use the property called search
	let anchor = document.createElement('a');
  //assigning url to href of anchor tag
	anchor.href = url;
  //search property returns the query string of url
	let queryStrings = anchor.search.substring(1);
	let params = queryStrings.split('&amp;');

	for (var i = 0; i &lt; params.length; i++) {
		var pair = params[i].split('=');
		queryParams[pair[0]] = decodeURIComponent(pair[1]);
	}
	return queryParams;
};


getQueryParams('http://another-example.com?example=something&amp;data=13');</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Above all, the simplest way to solve this problem is to create an anchor element and use a property called <strong>search </strong>in anchor element. <strong>Search </strong>property returns the <strong>queryString </strong>completely. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Therefore, the above function takes <strong>url</strong> as a parameter. After that, we create an anchor element and assign the url to href.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>After that, search method of anchor element returns the query strings of  url. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>As a result, we can get all the query parameters by splitting the string using keyword <strong>&amp;</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Once you have the params in an Array, you can loop through it and get all the query strings that you want.</p>
<!-- /wp:paragraph -->


{% replit @ganeshmani/queryString %}


<!-- wp:image {"id":1616} -->
<figure class="wp-block-image"><img src="https://cloudnweb.dev/wp-content/uploads/2019/11/sdsd.png" alt="" class="wp-image-1616"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Reference,</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>How to get Query String Parameters in Javascript - 2019.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://davidwalsh.name/query-string-javascript">Get Query String Parameters with JavaScript</a></p>
<!-- /wp:paragraph -->