How to get an object containing parameters of current URL in JavaScript?

Front End Technology Javascript Web Development

JavaScript is a versatile scripting language that can be used in a number of ways. One such way is to use it to get information about the current URL. This can be useful in a number of situations, such as when you want to create a bookmark or when you want to redirect the user to a specific page.

Using the Location Object

The easiest way to get information about the current URL is to use the Location object. This object is a property of the window object and contains information about the current URL. To use it, simply call the object with the name of the property you want to access. For example, to get the href property, you would use −

var currentURL = window.location.href;

This would return the entire URL, including the protocol (http:// or https://), the hostname, the path, and the query string.

If you just want the path, you can use the Location object's pathname property −

var currentPath = window.location.pathname;

This would return everything after the hostname, including the query string.

Using the document.URL Property:

Another way to get information about the current URL is to use the document.URL property. This property contains the entire URL of the current page. To use it, simply call −

var currentURL = document.URL;

This would return the entire URL, including the protocol (http:// or https://), the hostname, the path, and the query string

Using the document.location Property:

Yet another way to get information about the current URL is to use the document.location property. This property contains an object with information about the current URL. To use it, simply call −

var currentURL = document.location;

This would return an object containing information about the current URL. The object would have properties for the protocol (http:// or https://), the hostname, the path, and the query string.

Example

HTML code to get params of a user-entered URL

Below is the full HTML code that you can use to get the params of a user-entered URL. You can also find a working demo at the end of this section. Create an HTML file with the following code and open it in any browser.


<html>
<head>
      <title>Get URL Parameters</title>
</head>
<body>
   <h1>Get URL Parameters</h1>
   <p>
      Enter a URL in the input field below and click on the "Get Parameters" button.
   </p>
   <form>
      <input type="text" id="url" placeholder="Enter a URL.." />
      <input type="button" id="submit" value="Get Parameters" />
   </form>
   <div id="output"></div>
   <script>
      function getParams() {
         
         // Get the URL with the query string from the input
         var url = document.getElementById('url').value;

         // Create an object with the query string parameters and their values
         var params = {};
         var parser = document.createElement('a');
         parser.href = url;
         var query = parser.search.substring(1);
         var vars = query.split('&');
         for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split('=');
            params[pair[0]] = decodeURIComponent(pair[1]);
         }

         // Display the query string parameters on the page
         var output = '';
         for (var param in params) {
            if (params.hasOwnProperty(param)) {
               output += '<p>' + param + ': ' + params[param] + '</p>';
            }
         }
         document.getElementById('output').innerHTML = output;
      }

      // Add event listener
      document.getElementById('submit').addEventListener('click', getParams);
   </script>
</body>
</html>

In the above code, we have an input field and a button. When the user enters a URL in the input field and clicks on the "Get Parameters" button, we call the getParams() function.

This function creates an object with the query string parameters and their values. It then displays the query string parameters on the page.

You can also see that we have added an event listener for the "click" event of the button. This is so that our getParams() function is called when the button is clicked.

In this tutorial, we have seen how to get information about the current URL using JavaScript. We have also seen how to create an object with the query string parameters and their values.

Imran Alam

Updated on: 04-Aug-2022

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started