JSFiddle - React, Tailwind, and code Playground

HTML

<p id="result1"></p>
<p id="result2"></p>
<p id="result3"></p>
<p id="result4"></p>
<p id="result5"></p>

JavaScript

/**
    * Add a URL parameter (or modify if already exists)
    * @param {url}   string  url 
    * @param {param} string  the key to set
    * @param {value} string  value 
    */
	var addParam = function(url, param, value) {
       param = encodeURIComponent(param);
       var r = "([&?]|&amp;)" + param + "\\b(?:=(?:[^&#]*))*";
       var a = document.createElement('a');
       var regex = new RegExp(r);
       var str = param + (value ? "=" + encodeURIComponent(value) : ""); 
       a.href = url;
       var q = a.search.replace(regex, "$1"+str);
       if (q === a.search) {
          a.search += (a.search ? "&" : "") + str;
       } else {
          a.search = q;
       }
	   return a.href;
	}


var url = "http://www.example.com?foo=bar&pippo&paperino#hashme";

var result1 = document.getElementById("result1");
result1.innerHTML = addParam(url, "ciao", "1");

url = "http://www.example.com#hashme";

var result2 = document.getElementById("result2");
result2.innerHTML = addParam(url, "ciao", "1 l'app");
result2.innerHTML = addParam(result2.innerHTML, "ciao", "riprova");

url = "http://www.example.com?foo=bar&pippo=pluto#hashme";

var result3 = document.getElementById("result3");
result3.innerHTML = addParam(url, "ciao2");
url = "http://www.example.com?foo=bar&pippo=pluto#hashme";

var result4 = document.getElementById("result4");
result4.innerHTML = addParam(result3.innerHTML, "ciao2", "1èéê");
result4.innerHTML = addParam(result4.innerHTML, "pippo", "paperino");

url = "http://abc.def";
result5.innerHTML = addParam(url, "b");
result5.innerHTML = addParam(result5.innerHTML, "b", "a");
result5.innerHTML = addParam(result5.innerHTML, "a");
result5.innerHTML = addParam(result5.innerHTML, "a", "b");
result5.innerHTML = addParam(result5.innerHTML, "a", "provaB");
// result5.innerHTML = addParam(result5.innerHTML, "a");