How to edit this function and make it set URL parameter if it doesn't exist

Question

The following function is designed to replace a variable in the URL.

It works, but I want to make it so that if you pass in a variable that doesn't exist in the URL, it will add it to the URL.

window.setUrlParameter = function(param, value) {
    const regExp = new RegExp(param + "(.+?)(&|$)", "g");
    const newUrl = window.location.href.replace(regExp, param + "=" + value + "$2");
    window.history.pushState("", "", newUrl);
}

There is the function. It takes the param name that you want to replace, and the value you want to set.

As I stated earlier, I want it to be able to not only replace variables, but set them as well.

Thanks!

What's $2? Is it a hard coded value? – Rex Aug 21 '17 at 20:31 — Rex, Aug 21 '17 at 20:31
@Rex - it's the "replacer" for the regex – adeneo Aug 21 '17 at 20:34 — adeneo, Aug 21 '17 at 20:34

score 0 · Answer 1 · answered Aug 21 '17 at 20:35

You have the regex, you can just test the url for the same thing, and add it if it isn't there

window.setUrlParameter = function(param, value) {
    const regex = new RegExp(param + "(.+?)(&|$)", "g");
    const exist = regex.test(window.location.href);

    let addQS = window.location.search.length > 0 : '&' : '?';
    let newUrl;

    if (exist) {
        newUrl = window.location.href.replace(regExp, param + "=" + value + "$2");
    } else {
        newUrl = window.location.href + addQS + param + "=" + value;
    }

    window.history.pushState("", "", newUrl);
}

score 0 · Accepted Answer · edited Aug 21 '17 at 22:12

This function should also be faster than using a regex, modified from this answer.

(The arrow function is just ES6 syntax, you can use normal functions if you want too)

window.setUrlParameter = (param, value) => {
    var url = window.location.href;
    var hash = location.hash;
    url = url.replace(hash, '');
    if (url.indexOf(param + "=") >= 0)
    {
        var prefix = url.substring(0, url.indexOf(param));
        var suffix = url.substring(url.indexOf(param));
        suffix = suffix.substring(suffix.indexOf("=") + 1);
        suffix = (suffix.indexOf("&") >= 0) ? suffix.substring(suffix.indexOf("&")) : "";
        url = prefix + param + "=" + value + suffix;
    }
    else
    {
        if (url.indexOf("?") < 0)
            url += "?" + param + "=" + value;
        else
            url += "&" + param + "=" + value;
    }
    window.history.pushState(null, null, url + hash);
}

score 0 · Answer 3 · answered Aug 21 '17 at 20:37

I'd highly recommend cleaning this up with RegEx, but you could just check whether or not the href includes the parameter

window.setUrlParameter = function(param, value) {
    const regExp = new RegExp(param + "(.+?)(&|$)", "g");
    let newUrl = window.location.href.replace(regExp, param + "=" + value + "$2");
    if (! window.location.href.includes(param) )
        newUrl+='&'+param+'='+value
    window.history.pushState("", "", newUrl);
}

score 0 · Answer 4 · answered Aug 21 '17 at 21:06

Nobody here used the URLSearchParams API, so I thought I'd show you that way:

function modifyLocation( param, value )
{
  var qParams = window.location.search.split('?')[0];
  var urlParams = new URLSearchParams(qParams);
  if( urlParams.has(param) ){
    urlParams.delete(param);
  }
  urlParams.append(param, value);
  return window.location.href.split('?')[0] + '?' + urlParams.toString();
}

// To test on CodePen, I used editors = 4, because CodePen has that param
var newUrl = modifyLocation('editors','4');
console.log(newUrl);
// window.history.pushState("", "", newUrl);

How to edit this function and make it set URL parameter if it doesn't exist

4 Answers4