Getting query string parameters from clean/SEO friendly URLs with JavaScript

Question

I've recently switched my site to use clean/SEO-friendly URLs which has now caused me some issues with a JavaScript function I had for grabbing the query string parameters.

Previously I had been using this function:

function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
        return pair[1];
    }
}
return (false);
}

Which worked fine on things like this as you could just call getQueryVariable("image") and return "awesome.jpg".

I've been playing with the indexOf(); function to try and grab the relevant parameters from the current URL, eg:

var url = window.location.pathname;
var isPage = url.indexOf("page") + 1;

In an attempt to get the array index number of the "page" parameter, and then plus 1 it to move along to the value of that (?page=name > /page/name/)

JavaScript isn't my main language, so I'm not used to working with arrays etc and my attempt to turn this into a new function has been giving me headaches.

Any pointers?

Answer 1

How about something like this? It splits the path and keeps shifting off the first element of the array as it determines key/value pairs.

function getPathVariable(variable) {
  var path = location.pathname;

  // just for the demo, lets pretend the path is this...
  path = '/images/awesome.jpg/page/about';
  // ^-- take this line out for your own version.

  var parts = path.substr(1).split('/'), value;

  while(parts.length) {
    if (parts.shift() === variable) value = parts.shift();
    else parts.shift();
  }

  return value;
}

console.log(getPathVariable('page'));

Answer 2

This can be done formally using a library such as router.js, but I would go for simple string manipulation:

const parts = '/users/bob'.split('/')
const name = parts[parts.length - 1] // 'bob'