Как правильно переключать GET-параметры в адресной строке через JS?

Question

[Andrej Kopp]

Возникла проблема при написании скрипта, который должен добавлять в начало или в конец параметр при переключении по двум ссылкам. В двух ссылках один параметр с разными значениями. При переключении и переходе по ссылкам в адресной строке они начинают добавляться одна за другой как тут:

/products/katalki/?t=5&t=4&t=5&t=4&t=5&t=4

а нужно чтобы переключался один параметр с

?t=5

на

?t=4

и наоборот, а если параметр идёт в конце, то соответственно и в конце. Имеется вот такой код JS:

var params = window.location.search.replace('?','').split('&').reduce(
        function(p,e){
            var a = e.split('=');
            p[ decodeURIComponent(a[0])] = decodeURIComponent(a[1]);
            return p;
        },
        {}
    );

function addParam(v) {
	if(params[""] === "undefined") {
		window.location.search += '?' + v;
	} else {
		window.location.search += '&' + v;
	}
}

В коде у ссылок прописано:

<a href="javascript:addParam('t=4');">...</a>
<a href="javascript:addParam('t=5');">...</a>

P.S. В ссылке имеются и другие параметры фильтров как например:

?purpose=Манипуляционный&tabletype=Гинекология&t=4

Помогите пожалуйста разобраться

Answer 1

[Andrej Kopp]

function updateURLParameter(url, param, paramVal){
    var newAdditionalURL = "";
    var tempArray = url.split("?");
    var baseURL = tempArray[0];
    var additionalURL = tempArray[1];
    var temp = "";
    if (additionalURL) {
        tempArray = additionalURL.split("&");
        for (var i=0; i<tempArray.length; i++){
            if(tempArray[i].split('=')[0] != param){
                newAdditionalURL += temp + tempArray[i];
                temp = "&";
            }
        }
    }

    var rows_txt = temp + "" + param + "=" + paramVal;
    return baseURL + "?" + newAdditionalURL + rows_txt;
}
	
function addParam(v) {
	var newURL = updateURLParameter(window.location.href, 'locId', 'newLoc');
	newURL = updateURLParameter(newURL, 'resId', 'newResId');

	window.history.replaceState('', '', updateURLParameter(window.location.href, "t", v));
	location.reload();
}

HTML

<a href="javascript:addParam('4');">...</a>
<a href="javascript:addParam('5');">...</a>

Решил вот таким образом.

Answer 2

[Александр]

/**
 * @param {Object<string, string|number|boolean>} params
 */
const addParams = params => {
	const url = new URL(location.href);

	for (const key in params) {
		url.searchParams.set(key, params[key]);
	}

	location.href = url;
};

Ну и неплохо бы ссылки на кнопки заменить.