how to remove query string arrays from url in javascript

Question

I am getting problem in removing query string arrays from the URL.

This is my URL -

In Chrome, it displays in the given format -

Var url = "http://mywebsite.com/innovation?agenda%5B%5D=4995&agenda%5B%5D=4993#ideaResult";

Whereas, in mozilla it displays in this format -

 http://mywebsite.com/innovation?agenda[]=4995&agenda[]=4993#ideaResult

I want to remove the particular query paramter.

Suppose I want to remove "4995" then final URL should supposed to be like this-

http://mywebsite.com/innovation?agenda[]=4993#ideaResult

Please help.

I want to remove it dynamically on a button click, for normal queryparams I am able to do but not for these kind of queryparams which are in array formats — sajalsuraj, Feb 25 '16 at 10:34

score 2 · Accepted Answer · answered Feb 25 '16 at 13:17

function removeArrayParam(key, value, sourceURL) {
   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];
           paramValue = params_arr[i].split("[]=")[1];
           if (param === key && paramValue === value) {
               params_arr.splice(i, 1);
           }
       }
       if(params_arr.length) {
        rtn = rtn + "?" + params_arr.join("&");
       } 
   }
   return rtn;
}

This function will give you the desired result. Just pass key, value and the hashless url.

var url = window.location.href;
var hash = window.location.hash;
var index_of_hash = url.indexOf(hash) || url.length;
var hashless_url = url.substr(0, index_of_hash);  
var desired_url = removeArrayParam(key, value, unescape(hashless_url));

score 1 · Answer 2 · answered Feb 25 '16 at 10:40

1

what about replace() function?

var url = " http://mywebsite.com/innovation?agenda[]=4995&agenda[]=4993#ideaResult";

url = url.replace('agenda%5B%5D=4995&', '') 
url = url.replace('agenda[]=4995&', '')

answered Feb 25 '16 at 10:40

elreeda

4,525
2
18
45

Give me a single solution which would work with both the cases.. @john – sajalsuraj Feb 25 '16 at 10:44
@sajalsuraj this solution is working for both firefox and chrome :) – elreeda Feb 25 '16 at 11:28

score 1 · Answer 3 · edited May 23 '17 at 12:24

1

You can decode the url to make it consistent

ie.

var url = decodeURI("http://mywebsite.com/innovation?agenda%5B%5D=4995&agenda%5B%5D=4993#ideaResult");

....and then split the string and remove a query string. Theres an example in this question here Remove querystring from URL

edited May 23 '17 at 12:24

Community

1
1

answered Feb 25 '16 at 10:45

OllieH

262
1
4

score 1 · Answer 4 · answered Feb 25 '16 at 10:46

1

The decodeURI() function according to Mozilla document:

Replaces each escape sequence in the encoded URI with the character that it represents

So you can use it like below:

decodeURI(window.location).replace(/agenda\[\]=4995&?/,'')

answered Feb 25 '16 at 10:46

‌‌R‌‌‌.

2,818
26
37

score 1 · Answer 5 · answered Jan 20 '17 at 02:53

Been searching for ages for a non-plugin solution to removing arrays and non-arrays from query strings, and then re-adding. It could maybe be a bit more elegant, but this works very well with all of my test cases.

function removeURLParameter(param, url) {
    url = decodeURI(url).split("?");
    path = url.length == 1 ? "" : url[1];
    path = path.replace(new RegExp("&?"+param+"\\[\\d*\\]=[\\w]+", "g"), "");
    path = path.replace(new RegExp("&?"+param+"=[\\w]+", "g"), "");
    path = path.replace(/^&/, "");
    return url[0] + (path.length
        ? "?" + path
        : "");
}

function addURLParameter(param, val, url) {
    if(typeof val === "object") {
        // recursively add in array structure
        if(val.length) {
            return addURLParameter(
                param + "[]",
                val.splice(-1, 1)[0],
                addURLParameter(param, val, url)
            )
        } else {
            return url;
        }
    } else {
        url = decodeURI(url).split("?");
        path = url.length == 1 ? "" : url[1];
        path += path.length
            ? "&"
            : "";
        path += decodeURI(param + "=" + val);
        return url[0] + "?" + path;
    }
}

How to use it:

url = location.href;
    -> http://example.com/?tags[]=single&tags[]=promo&sold=1

url = removeURLParameter("sold", url)
    -> http://example.com/?tags[]=single&tags[]=promo

url = removeURLParameter("tags", url)
    -> http://example.com/

url = addURLParameter("tags", ["single", "promo"], url)
    -> http://example.com/?tags[]=single&tags[]=promo

url = addURLParameter("sold", 1, url)
    -> http://example.com/?tags[]=single&tags[]=promo&sold=1

Of course, to update a parameter, just remove then add. Feel free to make a dummy function for it.

how to remove query string arrays from url in javascript

5 Answers5