Get URL Parameters using jQuery

⏱︎

Read time:

1–2 minutes
url

In jQuery, you can easily get URL parameters using the URLSearchParams object or by manually parsing the URL string. Let me show you both methods:

  1. Using URLSearchParams:

This method is the easiest and recommended way to get URL parameters in modern browsers that support the URLSearchParams API.

htmlCopy code<!-- Let's assume the URL is something like: http://example.com/?param1=value1&param2=value2 -->

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    // Get the URL parameters
    const urlParams = new URLSearchParams(window.location.search);

    // Get the value of a specific parameter
    const param1Value = urlParams.get('param1');
    const param2Value = urlParams.get('param2');

    // Now you can use these values as needed
    console.log('param1Value:', param1Value);
    console.log('param2Value:', param2Value);
  });
</script>
  1. Manually parsing the URL:

If you need to support older browsers that don’t have the URLSearchParams API, you can manually parse the URL using JavaScript and jQuery.

htmlCopy code<!-- Let's assume the URL is something like: http://example.com/?param1=value1&param2=value2 -->

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    // Function to get URL parameters
    function getURLParameter(name) {
      const url = new URL(window.location.href);
      const param = url.searchParams.get(name);
      return param;
    }

    // Get the value of a specific parameter
    const param1Value = getURLParameter('param1');
    const param2Value = getURLParameter('param2');

    // Now you can use these values as needed
    console.log('param1Value:', param1Value);
    console.log('param2Value:', param2Value);
  });
</script>

Both of these methods will allow you to retrieve and use the values of the URL parameters in your jQuery code. Remember to replace the example URL (http://example.com/?param1=value1&param2=value2) with your actual URL to test the code with real parameters.

Categories:

Leave a Reply

Your email address will not be published. Required fields are marked *