Question

我有一个按钮，它从复选框中获取值并将其动态插入到URL参数中。 URL如下所示：

example.com/search?q=searchterm&site=site1&page=1

&site=site1是按复选框的值动态更新的内容。我的代码起初如下所示：

$("#apply-filter").click(function() {
    var filterSite;
    var filterSelection;
    var filterUrl;
    filterSite = "http://" + location.host + location.pathname + location.search;
    filterSelection = $('.search-filter-dialog input[type="checkbox"]:checked').val();
    filterUrl = '&site=' + filterSelection + '&page=1';
    console.log(filterUrl + " - " + filterSite);
    window.location.replace(filterUrl);
  });

第一种方法的问题是，当您多次单击该按钮时，它只是将新参数添加到URL，因此最终看起来像：

example.com/search?q=searchterm&site=site1&page=1&site=site2&page=1&site=site3&page=1

当我只需要更改&site=site3&page=1时 - 我尝试使用正则表达式来选择URL的那一部分并将其替换为新部分。我的尝试如下：

$("#apply-filter").click(function() {
    var filterSite;
    var filterSelection;
    var filterUrl;
    filterSite = "http://" + location.host + location.pathname + location.search;
    filterSelection = $('.search-filter-dialog input[type="checkbox"]:checked').val();
    filterUrl = filterSite + '&site=' + filterSelection + '&page=1';
    var url = filterUrl.match(/&([^ ]*)/)[1];
    console.log(filterUrl + " - " + filterSite);
    window.location.replace(url, filterUrl);
  });

此块的作用是删除搜索查询并返回

example.com/site=site1&page=1给出404。

我需要以某种方式更新URL的一部分，而不是整个部分。我相信我需要做某种正则表达式来定位并改变它。什么是下一个步骤？如何更新网址的某个部分？

编辑：这就是它现在的位置：

// apply filter, go to page
  $("#apply-filter").click(function() {
      var filterSite;
      var filterSelection;
      var filterUrl;
      filterSite = "http://" + location.host + location.pathname + location.search;
      filterSelection = $('.search-filter-dialog input[type="checkbox"]:checked').val();
      filterUrl = filterSite + '&site=' + filterSelection + '&page=1';
      var url = filterUrl.match(/&([^ ]*)/)[1];
      // console.log(filterUrl + " - " + filterSite);
      if (window.location.href.indexOf("&site=") > -1) {
        filterSite.replace(/&site=\d+/,'&site=' + filterSelection);
        window.location.replace(filterSite);
        console.log(filterSite);
      } else {
        window.location.replace(filterUrl);
      }
  });

但.replace()方法似乎不起作用。

Answer 1

如果我弄错了，请纠正我：

您有类似这样的内容： example.com/search?q=searchterm&site=site1&page=1 ，您只需要更新此部分：＆amp; site = site1 即可。

一种方式：

filterSite.replace(/&site=site\d+/,'&site=site' + filterSelection);

仅当网址的可更新部分始终为&site=site<number>格式时才有效，即：filterSelection始终为数字

无论如何，请告诉我

关于你的编辑：

假设你的意思是 .replace（）方法不会改变参数，那就是URL不会改变，你是对的：当你这样做时：

filterSite.replace(/&site=\d+/,'&site=' + filterSelection);

你要修改的是变量filterSite，页面不会自动重新加载到新的URL，我认为这是你在看到另一行之后的意图：

window.location.replace(filterSite);

将其替换为：

window.open(filterSite);

使页面转到到新网址

有关window.open and its arguments

的更多信息

最后一件事，我注意到您使用/&site=\d+/,'&site=' + filterSelection作为replace的args，它与example.com/search?q=searchterm&site=site1&page=1不匹配。因此，除非您更改了网址的结构，否则您可能也希望查看它。

让我知道

Answer 2

URL构造函数

EXAMPLE: 1
;
   var uri = new URL( "http://example.com/search?q=searchterm&site=site1&page=1" );

        uri.searchParams.has("q");
        >> true

        uri.searchParams.set( "site", "site2" );
        uri.searchParams.set( "page", "2" );

        uri.href;
        >> "http://example.com/search?q=searchterm&site=site2&page=2"
;

浏览器支持（？）[Chrome 49，Firefox 44，Opera 36，IE12]

Answer 3

我建议你使用一个POST请求方法，Jquery已经有一个方法来构建基于表单发送的params

NfcService

用正则表达式替换URL的段

3 个答案:

URL构造函数