更改下拉列表时替换 URL 查询字符串值

Question

我有一个具有双重角色的下拉菜单。用户可以访问该页面(http://mysite/events/Pages/default.aspx)直接使用下拉菜单，或者他们可以先进行搜索，然后通过选择下拉菜单进一步过滤搜索结果。 第一种情况的 URL 类似于 http://mysite/events/Pages/default.aspx?hos=Carmel和 第二种情况网址 http://mysite/events/Pages/default.aspx ?kwd=health&type=Events&hos=卡梅尔 这就是我现在正在做的事情，但它的行为很奇怪，并且对 url http://mysite.events/Pages/default.aspx?hos=Crown&hos=Carmel

因此，如果用户第一次从下拉列表中选择 carmel 并决定他/她想要查找 Indianapolis，那么它应该将 'Carmel' 替换为 indianapolis，或者将整个查询字符串“&hos=Carmel”替换为“&hos=Indianapolis”（对于第二种情况），将“?hos=Carmel”替换为“?hos=”印第安纳波利斯”对于第一个场景，

$(".hospitalDropDown").change(function(e){
            var querystring=window.location.search;
            var currentURL=$(location).attr('href');
            if(location.href.indexOf('?') == -1) {
                window.location.href= 'http://mysite/events/Pages/default.aspx'+'?hos='+$(this).val();
                }
                else{

                    window.location.href = ( $(this).val() == "All Hospitals" ) ? 'http://mysitesite/events/Pages/default.aspx': location.href +'&hos='+ $(this).val(); }
    )};

我发现了一些漂亮的代码，使用正则表达式来处理查询字符串，但我不明白正则表达式是如何工作的..我怎样才能使用像这样的东西我的情况如下？

function replaceQueryString(url,param,value) {
    var re = new RegExp("([?|&])" + param + "=.*?(&|$)","i");
    if (url.match(re))
        return url.replace(re,'$1' + param + "=" + value + '$2');
    else
        return url + '&' + param + "=" + value;
}

Answer 1

您需要执行以下操作：

function replaceQueryString(url,param,value) {
    var re = new RegExp("([?|&])" + param + "=.*?(&|$)","i");
    if (url.match(re))
        return url.replace(re,'$1' + param + "=" + value + '$2');
    else
        return url + '&' + param + "=" + value;
}

$(".hospitalDropDown").change(function(e) {
   window.location.href = replaceQueryString(window.location.href, 'hos', $(this).val());
)};

您找到的 replaceQueryString 代码段已经为您打包在一个简洁的小函数中，因此您无需了解有关正则表达式的任何信息即可使用它。您需要做的就是向该函数传递您的 url、您尝试更改的参数（“hos”）和新值。

另外，$(location).attr('href') 并不是真正有效的，而且您也没有使用它，所以只需将其取出并坚持使用 window.location 即可。 href。

最后，尽管在这种特殊情况下您不需要任何正则表达式知识，但至少学习一些基本的正则表达式语法绝对可以使您受益匪浅。查看 http://www.regular-expressions.info/ 以获得一些很好的解释，并且然后使用像 http://www.regextester.com/ 这样的正则表达式测试器来处理示例并尝试写一些你自己的。

Answer 2

$(".hospitalDropDown").change(function(e){
    var newhos=($(this).val() == "All Hospitals" ) ? '' : '$1hos=' + $(this).val();
    location.href=location.href.replace(/([\?\&])hos=\w+/,newhos);
});