Get subsection of redirect uri in query string

Question

So I have a URL that looks like this:

localhost:9031?redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Fcallback&scope=test

I want to redirect to the URL localhost:8080/something which makes use of part of the redirect uri but drops the /callback from it.

In order to get the redirect uri I have a method that does the following and I pass it the string redirect_uri:

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 (decodeURIComponent(pair[0]) == variable) {
      return decodeURIComponent(pair[1]);
    }
  }
}

This gives me back the string http://localhost:8080/callback. Then to get the index of callback I use the following function.

function getPosition(string, subString, index) {
  return string.split(subString, index).join(subString).length;
}

Then when the button is clicked I put it all together and do:

$('.button').click(function(e) {
  var query = window.location.search.slice(1);
  var redirect = getQueryVariable('redirect_uri');
  var index = getPosition(redirect, '/', 3);
  var baseUrl = redirect.slice(0, index);
  window.location.href = baseUrl + '/something';
});

This all works as intended but it doesn't seem particularly foolproof or efficient. Looking for optimizations or suggestions to use functionality of JavaScript or JQuery that I don't know of. Looking to avoid 3rd party libraries but if they are good enough I will definitely still use them.

Possible duplicate of [How can I get query string values in JavaScript?](http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript) — Heretic Monkey, Jan 17 '17 at 19:56

Max Sindwani · Accepted Answer · 2017-01-17T19:48:40.357

I would recommend letting the browser do the heavy lifting of parsing the URL. Assuming you have the decoded redirect URI from the query string, you can do the following:

var myUrl = 'http://localhost:8080/callback&scope=test';

function parseURL(url) {
  var a = document.createElement("a");
  a.href = url;
  
  return {
    protocol: a.protocol,
    hostname: a.hostname,
    port: a.port,
    pathname: a.pathname
  };
}

var parsedURL = parseURL(myUrl);
console.log(parsedURL.protocol + '//' + parsedURL.hostname + ':' + parsedURL.port + '/something');

You can build the base url from the results and, optionally, parse the pathname if necessary.

score 1 · Answer 2 · answered Jan 17 '17 at 19:51

This is based on a well known Gist to parse URLs in JavaScript, which was introduced by John Long.

function parseURL(url) {
  var parser = document.createElement('a'),
      searchObject = {},
      queries, split, i;
  // Let the browser do the work
  parser.href = url;
  // Convert query string to object
  queries = parser.search.replace(/^\?/, '').split('&');
  for( i = 0; i < queries.length; i++ ) {
    split = queries[i].split('=');
    searchObject[split[0]] = decodeURIComponent(split[1]);
  }
  // return all fragments
  return {
    protocol: parser.protocol,
    host: parser.host,
    hostname: parser.hostname,
    port: parser.port,
    pathname: parser.pathname,
    search: parser.search,
    params: searchObject,
    hash: parser.hash
  };
}

// using the method
(function() {
  // your first url
  var temp = parseURL('localhost:9031?redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Fcallback&scope=test');
  // second (the redirect_uri param);
  var url = parseURL(temp.params.redirect_uri);

  // now you could do:
  window.location.href = url.protocol + '://' + url.host + '/whateverYoWant';
})();

Get subsection of redirect uri in query string

2 Answers2