Question

I’m looking at building a super simple router in javaScript…so far I have this:

var match,routeMatcher,p;

var routes = {
    "/users/:uid/pictures/:uid" : "userpictures",
    "/users/:uid" : "user"
};

var url = "/users/1024/pictures/456";

for(var i in routes) {
    //need to cache this regex
    routeMatcher = new RegExp(i.replace(/:[^\s/]+/g, '([\\w-]+)'));
    if(url.match(routeMatcher)) {
        match = url.match(routeMatcher);
        p = routes[i];
        console.log(p);
    }
}

and here’s a fiddle http://jsfiddle.net/D6txe/

This works. When I feed in a url like “users/1000” I get back the corresponding function name (just got to work out how to call the string as a function now). Problem is if I have two routes that are very similar as in my example the regex matches both. In the example above I’d ideally only like the second route to be matched but unfortunately both get matched, because of course the first is also a match.

Is there any way I can make the regex only return exact matches? I have another solution which would involve counting the forward slashes in the input url and only call routes with a matching number of forward slashes….but this seems rather inelegant.

Answer 1

Try this:

routeMatcher = new RegExp(i.replace(/:[^\s/]+/g, '([\\w-]+)') + "$");

If you also want to support a trailing / to also cover /users/1024/pictures/456/, you can change your RegExp as follows:

routeMatcher = new RegExp(i.replace(/:[^\s/]+/g, '([\\w-]+)') + "/?$");