How to rewrite URL structure for JavaScript

Question

I have a web page with basicly the following URL structure:

www.example.com/main.php?userId=mattias.wolff
www.example.com/definitions.php?userId=mattias.wolff
www.example.com/tasks.php?userId=mattias.wolff
www.example.com/profile.php?userId=mattias.wolff

What I would like to do is to change this to get rid of the parameters:

www.example.com/mattias.wolff
www.example.com/mattias.wolff/definitions
www.example.com/mattias.wolff/tasks
www.example.com/mattias.wolff/profile

Server side this is not a problem since I can just use mod rewrite to rewrite the URLs to the "old" format (including paramters etc.)

My question is how this should be handled client side? The pages content is very much generated by JavaScript and I therefore need to get the parameters in the same way as before.

Is there some best practice that I have missed here? Writing a function on that parse the new URL in Javascript or send the "old" URL from server side in some kind of parameter?

Answer 1

Do not forget that essentially, the URL is a (kind of a) query, too . The main difference here is whether you are using named parameters or positional parameters.

The ? notation is essentially a standard to allow browser to construct an URL from a form query automatically.

You could as well be using URLs of the scheme:

www.example.com/name=mattias.wolff/page=definitions

if that is what you want.

My recommendation for you is to really define a URL scheme for your pages that completely suits your needs and has enough room for future extension. Ideally, you should be able to switch back to the old scheme at some point if necessary, without major name conflicts.

There is clearly nothing wrong with organizing your URLs in the scheme of /[username]/[page] , and using this scheme from JavaScript (both for parsing and generating links!) as long as you don't change it all the time.

Answer 2

With the following simple(?) function you can transform a URL in the way you indicate:

function transform (href) {
  var m = href.match (/((?:[^\/]+\/\/)?[^\/]+\/)(.*)\.php\?userId=(.*)/);
  return m ? m[1] + m[3] + '/' + m[2] : href;
}

Basically the function extracts the components of the URL into an array using a regexp match then reassembles the URL in the way you want. If the match fails the original URL is returned.

Tested on Chrome with :

var test = ["www.example.com/main.php?userId=mattias.wolff",
            "www.example.com/definitions.php?userId=mattias.wolff",
            "http://www.example.com/tasks.php?userId=mattias.wolff",
            "www.example.com/profile.php?userId=mattias.wolff"];

for (var i = test.length; i--;)
  console.log ('"' + test[i] + '" --> "' + transform (test[i]) + '"');

Output :

"www.example.com/profile.php?userId=mattias.wolff" --> "www.example.com/mattias.wolff/profile"
"http://www.example.com/tasks.php?userId=mattias.wolff" --> "http://www.example.com/mattias.wolff/tasks"
"www.example.com/definitions.php?userId=mattias.wolff" --> "www.example.com/mattias.wolff/definitions"
"www.example.com/main.php?userId=mattias.wolff" --> "www.example.com/mattias.wolff/main"