Добавить элементы в URL без перезагрузки страницы (pushState)

Question

У меня есть функция, которая добавляет элементы в мой URL без перезагрузки страницы. Я использую это в функции фильтра. Каждый раз, когда кто-то нажимает на элемент в фильтре, эта функция добавляет щелкнутый элемент в URL-адрес. Если вы снова нажмете тот же элемент, элемент снова исчезнет.

function childboxes(MainElement, ChildElement){ 
    var pathArray = window.location.pathname.split('/'); 
    var extra = pathArray[2];  
    var clicked = "&"+MainElement+'='+ChildElement; 
    var re = new RegExp(clicked, 'g');  

    if(extra.match(re)){ 
     //remove item from URL   
     var extra = extra.replace(clicked, ""); 
     window.history.replaceState(null, null, extra); 

    }else{ 
     //Add items in URL 
     window.history.pushState(null, null, extra+"&"+MainElement+'='+ChildElement); 
    }   
} 

Пример: http://www.domain.com/en/webshop&brand=18&category=shoes&product=test

И моя проблема, каждый добавленный элемент добавляет это: & бренд = 18 Как мы все знаем, первый параметр должен начинаться со знака «?» вместо «&».

Я понятия не имею, как убедиться, что первый элемент начинается с вопросительного знака.

Используя что-то еще, pushState и replaceState в порядке. Единственное, что я хочу, это то, что страница не перезагружается при обновлении URL-адреса.

Answer 1

Просто простая проверка:

window.history.pushState(null, null, extra+ (extra.indexOf("?")>-1 ? "&" : "?") +MainElement+'='+ChildElement); 

Edit:

Regexp исправлено:

var clicked = "[&\\?]"+MainElement+'='+ChildElement; 

И:

var extra = extra.replace(re, ""); // you can replace by regex 

Edit2:

Очистка

function childboxes(MainElement, ChildElement){ 
    var extra = window.location.pathname + window.location.search; 
    var regex = new RegExp("[&\\?]"+MainElement+'='+ChildElement, 'g');  

    extra = extra.replace(regex, ""); 
    extra = extra+ (extra.indexOf("?") > -1 ? "&" : "?") +MainElement+ '=' +ChildElement; 
    window.history.pushState(null, null, extra); 
} 

Edit3:

replaceState

function childboxes(MainElement, ChildElement){ 
    var extra = window.location.pathname + window.location.search; 
    var regex = new RegExp("[&\\?]"+MainElement+'='+ChildElement, 'g'); 

    var isReplace = extra.match(regex); 
    extra = extra.replace(regex, ""); 
    extra = extra+ (extra.indexOf("?") > -1 ? "&" : "?") +MainElement+ '=' +ChildElement; 
    window.history[isReplace?'replaceState':'pushState'](null, null, extra); 
}