Javascript URL Query String Logic

Question

I have an events listing page which can be filtered by type and also by date using query string variables.

I am trying to achieve the following logic using javascript/jQuery.

I have a calendar which fires a function when updated. When fired I need to implement the following logic:

If the current URL contains ?filter= then add &dateStart= to the end of the URL.
If the current URL contains ?filter= AND &dateStart= then keep the current filter value but replace the date query string with a new one.
If the current URL contains ONLY ?dateStart= then replace it with the new one.

I have tried various methods to achieve this but I keep hitting the problem of appending information to the end of the URL rather than replacing parts of it.

Any help would be appreciated.

Thanks.

please post the code you've tried.

Noman
– Noman

2016-02-23 10:10:48 +00:00
Commented Feb 23, 2016 at 10:10 — Noman
– Noman, Commented Feb 23, 2016 at 10:10

Kbi · Accepted Answer · 2016-02-23 10:24:00Z

You can try something like this:

NOTE: not tested.

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

Eloy Pineda · Accepted Answer · 2016-02-23 19:53:57Z

You can achieve this more easy with native Web API or vanilla javascript than with jQuery. As far as jQuery don't provide any specific function to work with query strings.

The new URLSearchParams object provide a few methods to work more easily with URL query strings. In your case for example you'll need to do something like this:

function updateQueryString(queryString, dateStart) {
  var queryString = new URLSearchParams(queryString);
  queryString.has('dateStart')
    ? queryString.set('dateStart', dateStart)
    : queryString.append('dateStart', dateStart);
  return queryString.toString();
}

for this solution you'll need a polyfill

Sadly this is not yet implemented by the majority of web browsers and you'll need to "polyfill" the URLSearchParams object for this solution to work properly. You'll have to add this line to the <head> section in your html:

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

You can find more information about the URLSearchParams in the Mozilla Developers Network Documentation, the WHATWG specification for the URL Standard or the specification by the W3C

solution without polyfill

If you don't like to use edge features you still can do it without any extra polyfill. It would look like this:

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('?');
}

Call whatever version of the updateQueryString function you rather like this:

updateQueryString(windonw.location.search, dateStart)

Collectives™ on Stack Overflow

Javascript URL Query String Logic

2 Answers 2

Comments

for this solution you'll need a polyfill

solution without polyfill

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

for this solution you'll need a polyfill

solution without polyfill

Comments

Your Answer

Sign up or log in

Post as a guest

Related