DISCLOSURE:This article may contain affiliate links and any sales made through such links will reward us a small commission,at no extra cost for you. Read more about Affiliate Disclosure here.

Bạn đang xem: 4 ways get query string values from url parameters in javascript or jquery

Sometimes we need to get values through the query string in the URL on the browser address bar. But the question is how to get them in JavaScript or jquery because we need them on the client-side.

Here I’m mentioning 4 ways for getting values from query parameters. I have also displayed uses examples. You can use either of them as per your choice and need in the client-side JS or jQuery.

1. Retrieve Query String Values using URLSearchParams

This is the simplest and most recommended way to retrieve values from the query string. URLSearchParams is a built-in interface in the latest browsers with a number of methods to get and manipulate values.

const urlParams = new URLSearchParams(window.location.search);const param_x = urlParams.get(“param_x”);/*Examples://Query string present in the browser address bar is “submitted=true&msg=success”var urlParams = new URLSearchParams(window.location.search);var has_msg = urlParams.has(“msg”); // true (boolean)var msg = urlParams.get(“msg”); //successvar submitted = urlParams.get(“submitted”); // true (string)var redirect = urlParams.get(“redirect”); // NULL*/

While this interface supports a number of decent browsers, it is not available for all, especially old ones. I suggest checking the official documentation on Mozilla and Chrome. It has various useful methods to utilize.

2. Regular Expression in JavaScript

Here is the function which will safely decode URL components using a regular expression. We can call this function and pass the query string parameter’s name as an argument to obtain the value.

Xem thêm:

Suppose we have the URL as follows: http://example.com/sports?game=football.

If we wish to retrieve the value for the game query parameter, we can pass it to the qsp variable as a string and we will get football as value. If the parameter doesn’t exist then the function would simply return an empty string.

3. Simple JavaScript Function to get Query Parameters Values Object

We can also get the whole query string as an object and then access the value of a particular parameter by its key.

function get_query(){ var url = document.location.href; var qs = url.substring(url.indexOf(“?”) + 1).split(“&”); for(var i = 0, result = ; i

The function above performs the following steps:

Getting the URLParsing query string by splitting the URLLooping through each and every key in the parsed query stringStoring every key and its value as an objectReturn the object

Below is an example:

// Query string in the URL// x=5&y&z=hello&x=6var result = get_query();console.log(result);//Output x: “6”, y: undefined, z: “hello”

4. jQuery Way to Get Query String Values from URL Parameters

If you want a jQuery way to get a specific URL parameter’s value then here is the function.

Xem thêm:

Hope these 4 functions will help you to get values of query string parameters in a URL. If you have any queries or any jQuery/JavaScript issue then feel free to contact us.

WE”RE AVAILABLE

AS Tech Solutions is an Android Apps and Web Design & Development company, offering the following services:
API IntegrationContent WritingSpeed OptimizationAJAX ImplementationE-Commerce SolutionsASP.NET Web ApplicationsAndroid Apps DevelopmentWordPress Related ServicesWindows Apps DevelopmentWebsite Design & DevelopmentTroubleshooting & customizationReal-time Applications Development

Hey buddy
Chuyên mục: kỹ thuật