javascript geturlparam

getURLParam in JavaScript: Retrieve URL Parameters

by

Have you ever found yourself needing to extract specific information from a URL using JavaScript? Then this article getURLParam in JavaScript in detail is for you.

Actually, whether you’re building a web application, enhancing user experience, or tracking analytics, retrieving URL parameters can be a common requirement.

In this article, we’ll explore how to efficiently extract URL parameters, manipulate URLs, and harness the power of JavaScript with the getURLParam function.

Let’s start!

What is geturlparam in javascript?

The function getURLParams() in Javascript is employed to retrieve the current URL parameters in JavaScript. It returns an object where each parameter is represented as an individual member of the object.

Syntax

getURLParams()

Parameter

This function does not take any arguments.

Return value

It provides an Object containing the path parameters as its return value.

How to Get URL Parameter in JavaScript?

To retrieve URL parameters in JavaScript, you can use the URLSearchParams API, which provides a convenient way to access and manipulate the parameters in a URL query string.

Here’s an example of how you can extract a specific parameter value by its name:

function getURLParam(paramName) {
  const params = new URLSearchParams(window.location.search);
  return params.get(paramName);
}

// Example usage:
const userId = getURLParam('id');
console.log(userId); // Output: The value of the 'id' parameter

In the example above, the getURLParam function takes a parameter name as an argument and uses the URLSearchParams API to retrieve the corresponding value from the URL’s query string.

Practical Examples

Now that we’ve covered the basics, let’s explore a few practical examples that combine the power of getURLParam with other JavaScript techniques:

Example 1: Extracting a Parameter Value

Suppose you have a URL like https://example.com/product?id=12345 and want to extract the id parameter value.

You can use the getURLParam function we discussed earlier:

const productId = getURLParam('id');
console.log(productId); // Output: 12345

Example 2: Removing a Parameter from URL

If you need to remove a specific parameter from a URL, you can modify the removeURLParams function we saw earlier:

function removeURLParam(paramName) {
  const url = new URL(window.location.href);
  const params = new URLSearchParams(url.search);
  params.delete(paramName);
  url.search = params.toString();
  return url.toString();
}

// Example usage:
const cleanURL = removeURLParam('id');
console.log(cleanURL); // Output: The base URL without the 'id' parameter

In this example, the removeURLParam function takes a parameter name as an argument, deletes that parameter from the URL, and returns the modified URL without the specified parameter.

How to Get Full URL in JavaScript?

If you need to obtain the complete URL of the current page, including the protocol, domain, path, query string, and fragment identifier, you can leverage the window.location.href property.

Here’s an example:

const currentURL = window.location.href;
console.log(currentURL); // Output: The full URL of the current page

The window.location.href property returns a string containing the complete URL, allowing you to access and use it in your JavaScript code.

How to Get URL String in JavaScript?

In some cases, you may only require the URL string without specific parameters or fragments. To extract the URL string in JavaScript, you can utilize the window.location.toString() method.

Here’s an example:

const urlString = window.location.toString();
console.log(urlString); // Output: The URL string of the current page

The window.location.toString() method returns the URL as a string, excluding any additional information like query parameters or fragment identifiers.

How to Remove All Parameters from URL in JavaScript?

At times, you may need to remove all the parameters from a URL, leaving only the base URL. JavaScript provides various approaches to achieve this.

One way is to use the URLSearchParams API along with the URL constructor to rebuild the URL without any query parameters.

Here’s an example:

function removeURLParams() {
  const url = new URL(window.location.href);
  url.search = '';
  return url.toString();
}

// Example usage:
const cleanURL = removeURLParams();
console.log(cleanURL); // Output: The base URL without any query parameters

The removeURLParams function creates a new URL object using the current page’s URL, sets the search property to an empty string, and returns the modified URL as a string.

Anyway here are some of the functions you might want to learn and can help you:

Conclusion

In conclusion, here are the key takeaways on this topic getURLParam in JavaScript:

  • The getURLParams() function in JavaScript retrieves the current URL parameters and returns them as an object.
  • To get URL parameters in JavaScript, you can use the URLSearchParams API and its get() method.
  • Practical examples include extracting a parameter value and removing a parameter from a URL.
  • To obtain the complete URL of the current page, use window.location.href.
  • To get the URL string without specific parameters or fragments, use window.location.toString().
  • To remove all parameters from a URL, you can use the URLSearchParams API along with the URL constructor.

Leave a Comment