Article Categories

Selected Reading

JavaScript - know the value of GET parameters from URL

Javascript Web Development Object Oriented Programming

To extract GET parameters from a URL in JavaScript, you can use the built-in URL and URLSearchParams APIs. These provide a clean way to parse query strings from URLs.

Using URL and URLSearchParams

The URL constructor creates a URL object, and its searchParams property gives access to query parameters:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GET Parameters Example</title>
    <style>
        body {
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        }
        .sample {
            font-size: 18px;
            font-weight: 500;
            color: red;
        }
        .result {
            font-weight: bold;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <h1>GET Parameters from URL</h1>
    <div class="sample">https://www.google.com?imageSize=440&color=blue</div>
    <div class="result"></div>
    <button class="btn">CLICK HERE</button>
    <h3>Click on the above button to get the imageSize and color value from the above URL</h3>
    
    <script>
        let sampleEle = document.querySelector(".sample");
        let resultEle = document.querySelector(".result");
        
        var url = new URL(sampleEle.innerText);
        var urlParams = url.searchParams;
        var imageSize = urlParams.get("imageSize");
        var color = urlParams.get("color");
        
        document.querySelector(".btn").addEventListener("click", () => {
            resultEle.innerHTML = 'Image size = ' + imageSize + '<br>' + 'Image color = ' + color;
        });
    </script>
</body>
</html>

Output

When you click the button, the extracted parameters will be displayed:

Image size = 440
Image color = blue

Working with Current Page URL

To get parameters from the current page URL:

<!DOCTYPE html>
<html>
<head>
    <title>Current URL Parameters</title>
</head>
<body>
    <h1>Current URL Parameters</h1>
    <div id="params"></div>
    
    <script>
        // Get current page URL
        const currentURL = new URL(window.location.href);
        const params = currentURL.searchParams;
        
        // Display all parameters
        let paramsList = '';
        for (const [key, value] of params) {
            paramsList += key + ' = ' + value + '<br>';
        }
        
        document.getElementById('params').innerHTML = paramsList || 'No parameters found';
    </script>
</body>
</html>

Key Methods

Method	Description	Example
`get(key)`	Returns first value for the key	`params.get('color')`
`has(key)`	Checks if parameter exists	`params.has('size')`
`getAll(key)`	Returns all values for the key	`params.getAll('tags')`

Conclusion

The URL and URLSearchParams APIs provide a modern, reliable way to extract GET parameters from URLs. They handle URL encoding automatically and offer convenient methods for parameter manipulation.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

287 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next