In this tutorial, we are going to discuss how to get URL parameters. Client Side: The Query String is part of the URL (Uniform Resource Locator).
The first part shows the address of the website (” https://www.google.com/ “) and the later part shows URL parameters(“https://www.google.com/doodles?q=losAngeles”).
Passing URL parameters is a way to exchange small and meaningful information between pages on a website. These parameters are proof that the user has clicked something and has started interacting with the site.
As a website is a combination of multiple pages, the user’s data will inevitably be a combination of all the other pages. To pass these values, we use URL parameters.
In this comprehensive article, we will cover how to find URL parameters in Vanilla JS, Jquery, React, Angular, Vue JS, Express, and Node JS.
Table of Contents
Vanilla JavaScript
First, get the query string from the URL. The window.location.search will get you the query string. (The string after ‘?’).
const QueryString = window.location.search; You can console.log(QueryString) to check if you have the same string that you want in the console, as shown below.
Now with this you have the whole query string in your variable QueryString. Then, you can extract any specific variable that you want using URLSearchParams function.
const urlParams = new URLSearchParams(QueryString); Now you can perform multiple actions assuming the following query string. https://www.google.com/doodles?q=losAngeles&country=US
urlParams.has(‘q’) //returns true
urlParams.get(‘country’) //returns US
urlParams.append('status', 'true')) //returns ?q=losAngeles&country=US&status=true You can also use URLsearchParams for objects and arrays. For example, you can extract all the keys and loop through them.
let keys = urlParams.keys();
for(key in keys) {
console.log(key);
} here is how the result will look like.
jQuery
jQuery get dynamic variables that are stored in the URL and stores the parameters in the JavaScript variables.
Let’s assume the following query string:
https://www.google.com/doodles?q=losAngeles&country=US
By implementing the function, we will get the parameters.
$.urlParameters = function(params) {
var results = new RegExp("[?&]" + params + "=([^&#]*)").exec(
window.location.href
);
return results ? decodeURI(results[1]) : null;
};
document.write("parameters are ", $.urlParameters("city"));
document.write(", ", $.urlParameters("country"));
Angular JS
Luckily, Angular JS has built-in services that allow you to search for the parameters. For example, in Angular library, it has the following services method like:
$location, $routeParams, $stateParams.
You can add the following functions in your app.component file to get the parameters.
import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
title = "code leaks";
name = "";
constructor(private router: ActivatedRoute) {}
ngOnInit() {
this.router.queryParams.subscribe(params => {
this.name = params.name;
});
}
}
//You can also use the following function to check if the parameters exist and not null values.
//Add the following code in your app.routing.module file.
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
You can also use the following function to check if the parameters exist and not null values. Add the following code in your app.routing.module file.
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
React
The route in React uses the dynamic content in a URL and renders the same component through passing the dynamic component to change the bases, not the whole content that doesn’t need changing.
One of the reasons why react-routers are so famous is because they are easy to use and understand.
<Switch>
<Route path="/:id" children={<Child />} />
</Switch> The ‘/:userId ‘ is the URL parameter and can be accessed in the component mentioned .
import React from "react";
import { BrowserRouter as Router, Switch,Route,Link,useParams} from "react-router-dom";
export default function Params () {
return (
<Router>
<div>
<h1>Code Leaks</h1>
<ul>
<li>
<Link to="/country">country</Link>
</li>
<li>
<Link to="/city">city</Link>
</li>
</ul>
<Switch>
<Route path="/:id" children={<Child />} />
</Switch>
</div>
</Router>
);
} Now you can use hooks to access the parameters from the URL and display them.
function Child() {
let { id } = useParams();
return (
<div>
<h3>ID: {id}</h3>
</div>
);
}
Vue JS
We can extract parameters from query string in Vue JS.
new Vue({
render: h => h(App)
}).$mount("#app");
export default {
name: "App",
data: () => {
return {
name: new URLSearchParams(window.location.search).get("name")
};
}
} 
How to get URL parameters for Server Side
Node JS ( Server side )
Node JS provides services that help in dealing with URL parameters. The following code shows how to get the parameters:
var http = require("http");
const url = require("url");
//create a server object:
http
.createServer(function(req, res) {
var url_parts = url.parse(req.url, true);
var query = url_parts.query;
console.log(query);
res.write(`params ${query.name || ""}!`);
//write a response to the client
res.end(); //end the response
})
.listen(8080);
Now how does this work?
req.url will get the part of the query string that is after ‘?’ example if the URL is ‘https://www.google.com/doodles?q=losAngeles&country=US’, req.url will get ‘q=losAngeles&country=US’.
Then url.parse will parse out all the necessary data. The query will return a structured object collecting the parameters that we want. url.parse() will return the collection that has keys and values, just like an associated array.
You can import the library const url=require(“url”).
By calling the function, we will have a return value, which will be the query string parameters.
Also, there are some other useful features in Node JS that allows us to deal with URL parameters openly.
url.parse(req.url).query //returns { q: 'losAngeles', country: 'US' }.
url.parse(req.url).host //returns 'localhost:8080'.
url.parse(req.url).pathname //returns '/Myapp.js'.
url.parse(req.url).search// return‘?q=losAngeles&country=US’ Express JS ( Server side )
We will take the same example for the query string and see how to extract the URL parameters.
https://www.google.com/doodles?q=losAngeles&country=US
Now, we can use this function for GET methods.
const express = require("express");
//create express app
const app = express();
//port at which the server will run
const port = 4000;
//create end point
app.get("/", (request, response) => {
//send 'Hi, from Node server' to client
var city = request.param("city");
var country = request.param("country");
response.send(city);
});
//start server and listen for the request
app.listen(port, () =>
//a callback that will be called as soon as server start listening
console.log(`server is listening at http://localhost:${port}`)
);
Request.param() will simply match the value in the URL and return the parameter value from the correspondence of the key.
We can use the function for POST methods as well.
