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?

Why not just parse the URL in JavaScript? But I'd assume you have the relevant data somewhere in your response HTML anyway. — Has QUIT--Anony-Mousse
– Has QUIT--Anony-Mousse, Commented Jan 8, 2012 at 11:31
Well. I could of course do that. But to me query parameters are much more intuitive in that case (well definied pattern for multiple paramaters etc). Since this is the first time I rewrite URL structure I would like to explore the options available.. — Mattias Wolff
– Mattias Wolff, Commented Jan 8, 2012 at 11:34
It's up to you to define the URI schema. It's not as if your scheme is particularly hard to parse, strip of # and ?, then split at /. Consider writing down your scheme for yourself. If component[0] = username, component[1] = page satisfies your needs, go with it. — Has QUIT--Anony-Mousse
– Has QUIT--Anony-Mousse, Commented Jan 8, 2012 at 11:38

Has QUIT--Anony-Mousse · Accepted Answer · 2012-01-08 12:12:28Z

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.

HBP · Accepted Answer · 2012-01-08 12:11:46Z

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"

Collectives™ on Stack Overflow

How to rewrite URL structure for JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related