Get & Remove URL Parameters using JavaScript

Get & Remove URL Parameters using JavaScript

Parameters in URL are specific variables that can contain values up to Limited length.
You may have seen the URL containing different kinds of parameters.

Illustration of parameters in URL:

If you don't know about parameters and let me show you how they look like.
The main appearance of parameters in the URL is like this.

https://online-html-viewer.blogspot.com/2020/04/costume-check-boxes-and-radio-buttons-pure-css.html?fullscreen=1

Here in the above URL fullscreen=1 is the parameter or variable that contains value 1. If you are a web developer Web Designer or programmer then you will be having information about methods, especially in PHP or JavaScript.

The methods are:

• GET
• POST
• etc.

Mostly URL parameters are used for GET method. The main motive of this article is to let you know how you can create retrieve and delete parameters if you don't know what are parameters then please Head over to google.com.

Creating URL Parameters:

Creating URL parameters is not much difficult you just have to add a parameter and its value in the URL. I have added the parameter in the above illustration. Before first parameter you have to add ? and then if you want multiple parameters separate them by & sign.

Get Parameters from URL:

To get parameter from URL using JavaScript you can use the following JavaScript function to get any parameter from URL.

function getParameterByName(key, sourceURL) {
    sourceURL || (sourceURL = window.location.href), key = key.replace(/[\[\]]/g, "\\$&");
    var r = new RegExp("[?&]" + key + "(=([^&#]*)|&|#|$)").exec(sourceURL);
    return r ? r[2] ? decodeURIComponent(r[2].replace(/\+/g, " ")) : "" : null
}

Now let's take a look at an example of how we can retrieve or get a parameter from URL. For example this is a URL containing a parameter fullscreen=1

https://online-html-viewer.blogspot.com/2020/04/costume-check-boxes-and-radio-buttons-pure-css.html?fullscreen=1

Now let's see how we can retrieve the value of this parameter using the above JavaScript function.

var para = getParameterByName('fullscreen');
document.write(para);
/*It Will Return 1 as a parameter value*/

Most of the time you only want to get parameter from URL but sometimes we also want to remove a specific parameter from URL and in that case you can use the following JavaScript function.

function removeParameterByName(key, sourceURL) {
    sourceURL || (sourceURL=window.location.href)
    var rtn = sourceURL.split("?")[0],
        param,
        params_arr = [],
        queryString = (sourceURL.indexOf("?") !== -1) ? sourceURL.split("?")[1] : "";
    if (queryString !== "") {
        params_arr = queryString.split("&");
        for (var i = params_arr.length - 1; i >= 0; i -= 1) {
            param = params_arr[i].split("=")[0];
            if (param === key) {
                params_arr.splice(i, 1);
            }
        }
        rtn = rtn + "?" + params_arr.join("&");
    }
    return rtn;
}

Now, this JavaScript function will allow you to remove a specific parameter from the URL.
Let's demonstrate how we can remove the parameter fullscreen=1 from the above URL.
Here is how the above JavaScript function to remove a parameter from the URL will work.

var para = removeParameterByName('fullscreen');
document.write(para);
/*It will return https://online-html-viewer.blogspot.com/2020/04/costume-check-boxes-and-radio-buttons-pure-css.html? */

How to set multiple parameters in URL:

You can easily set multiple parameters in URL just by separating each parameter with & sign. See the URL provided below it consists of parameters separated by & sign. https://example.com/index.html?para1=1&para2=2

Conclusion:

That's all about setting, getting and removing variables or parameters in URL. Using parameters in URL you can make your website look dynamic and add different functionalities in it.

SHARE THIS