javascript - 在不重新加载页面的情况下在 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

这是我的问题，每个添加的项目都会添加:&brand=18众所周知，第一个参数必须以“？”开头而不是“&”。

我不知道如何确保第一项以问号开头。

使用其他东西然后 pushState 和 replaceState 对我来说没问题。我唯一想要的是当我们更新 URL 时页面没有重新加载。

Answer 1

简单检查:

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

编辑:

修复了正则表达式:

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

和:

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

编辑2:

清理

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);
}

编辑3:

替换状态

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);
}