不含polyfill的溶液

Question

我有一个事件列表页面，可以按类型过滤，也可以使用查询字符串变量按日期过滤。

我正在尝试使用javascript / jQuery实现以下逻辑。

我有一个日历，在更新时触发一个功能。解雇时我需要实现以下逻辑：

如果当前网址包含?filter=，请将&dateStart=添加到网址末尾。
如果当前网址包含?filter= AND &dateStart=，请保留当前过滤器值，但将日期查询字符串替换为新的。
如果当前网址仅包含?dateStart=，请将其替换为新网址。

我已尝试过各种方法来实现这一目标，但我仍然遇到将信息附加到URL末尾而不是替换部分内容的问题。

任何帮助都将不胜感激。

感谢。

Answer 1

您可以尝试这样的事情：

注意：未经测试。

var newDateValue;
var myPath = window.location.pathname

//check if path contains the different variables
var containsFilter = myPath.indexOf("?filter=") != -1 ? true : false;
var containsAppendedDateStart = myPath.indexOf("&dateStart=" != -1 ? true : false;
var containsDateStart = myPath.indexOf("?dateStart=" != -1 ? true : false;

if(containsFilter && !containsAppendedDateStart){

   // If the current URL contains ?filter= then add &dateStart= to the end of the URL.
   window.location.replace(window.location.href + "&dateStart=");
}else if(containsFilter && containsAppendedDateStart){

   //If the current URL contains ?filter= AND &dateStart= then keep the current filter value but replace the date query string with a new one.
   newDateValue = 10; // add your new value here
   var splittedPathArray = myPath.split("&dateStart=");
   var newUrl = window.location.protocol + "//" + window.location.host + "/" + splittedPathArray[0] + "&dateStart=" + addNewValue;
   window.location.replace(newUrl);

}else if(containsDateStart){
   // If the current URL contains ONLY ?dateStart= then replace it with the new one.
   newDateValue = 15;// add your new value here
   var splittedPathArray =  myPath.split("?dateStart=");
   var newUrl = window.location.protocol + "//" + window.location.host + "/" + splittedPathArray[0] + "?dateStart=" + addNewValue;
}

Answer 2

使用原生 Web API 或 vanilla javascript 比使用jQuery更容易实现此目的。至于jQuery没有提供任何特定的函数来处理查询字符串。

新的 URLSearchParams 对象提供了一些方法，可以更轻松地使用URL查询字符串。以你的情况为例，你需要做这样的事情：

getAuthPassword

对于此解决方案，您需要一个polyfill

遗憾的是，大多数网络浏览器尚未实现此功能，您需要“polyfill” URLSearchParams 对象才能使此解决方案正常运行。您必须将此行添加到html中的function updateQueryString(queryString, dateStart) { var queryString = new URLSearchParams(queryString); queryString.has('dateStart') ? queryString.set('dateStart', dateStart) : queryString.append('dateStart', dateStart); return queryString.toString(); }部分：

<head>

您可以找到有关URLSearchParams in the Mozilla Developers Network Documentation，WHATWG specification for the URL Standard或specification by the W3C

的更多信息

不含polyfill的溶液

如果您不喜欢使用 edge 功能，您仍然可以在没有任何额外的polyfill的情况下使用它。它看起来像这样：

<script src="https://cdn.rawgit.com/inexorabletash/polyfill/v0.1.14/polyfill.min.js"></script>

调用您喜欢的任何版本的function updateQueryString(queryString, dateStart) { var qsObject = {}; queryString .substring(1) // ignore '?' .split('&').forEach(function (param) { param = param.split('='); qsObject[param[0]] = param[1]; }); qsObject['dateStart'] = dateStart; return '&' + Object.keys(qsObject) .map(function (key) { return key + '=' + qsObject[key]; }) .join('?'); }函数：

updateQueryString

Javascript URL查询字符串逻辑

2 个答案:

对于此解决方案，您需要一个polyfill

不含polyfill的溶液