How to extract query string from url parameter using JavaScript

Query string are helpful when need to pass values to a page. It start with ? and multiple statement can be added using &

We can also use window.location.href to grab the current page URL in JavaScript

Here is an example query string

example.com/?pid=1001&type=electronics

Using JavaScript we can access the query string easily with window.location.search. Let’s have have query search example

const queryString = window.location.search;
 console.log(queryString);
 // ?pid=1001&type=electroni        

Find a Parameter

To find/sear a URL Parameter say PID , we need to use URLSearchParams and using the output we can access the param value too as follows

const urlParams = new URLSearchParams(queryString);
 const pid = urlParams.get('pid')
 console.log(pid); 

Following JavaScript post may help you

• Create a desktop version of Quasar-Vue app using Electron - How to build desktop version of Quasar Vue app using Electron
• How to create a colorful doughnut in Vuejs - How to create a a colorful doughnut chart in Vuejs
• Chartjs for Vuejs - How to use Chartjs charts in Vuejs
• How to capture data in Angular ReactiveForm using Form Builder - How to capture data from a Angular reactive form using formbuilder
• How to capture data in Angular ReactiveForm using FormGroup - How to capture data from a Angular reactive form using formGroup
• How to capture data in Angular form using Model - How to capture data from a Angular form using Model and ngModel
• How to capture data in Angular form using `ngModel` and `FormsModule` ? - How to capture data from a Angular form using ngModel
• How to handle exceptions in Angular service - How to create http service in angular for posting data to the server
• How to use service in angular - How to create http service in angular for posting data to the server
• How to generate service in angular using CLI - How to generate angular service DI components