Parsing Friendly Urls in Javascript

Question

the website i maintain is moving from the standard php url format:

 http://example.com/page.php?key=value&key=value...

to a more seo friendly format like this:

http://example.com/page/key/value/key/value...

I was using this function in javascript to add, update/modify the old formatted url string:

function UpdateQueryString(key, value, url) {
    if (!url) url = window.location.href;
    var re = new RegExp("([?|&])" + key + "=.*?(&|#|$)(.*)", "gi");

    if (re.test(url)) {
        if (typeof value !== 'undefined' && value !== null)
            return url.replace(re, '$1' + key + "=" + value + '$2$3');
        else {
            return url.replace(re, '$1$3').replace(/(&|\?)$/, '');
        }
    }
    else {
        if (typeof value !== 'undefined' && value !== null) {
            var separator = url.indexOf('?') !== -1 ? '&' : '?',
            hash = url.split('#');
            url = hash[0] + separator + key + '=' + value;
            if (hash[1]) url += '#' + hash[1];
            return url;
        }
        else
            return url;
    }
}

This worked perfectly. Now this function highlights the two things im bad at, javascript and regexs. I am trying to modify this function to use slashes, '/' instead of ?&=. This is my first try at it:

function myUpdateQueryString(key, value, url)
{
    if (!url) url = window.location.href;
    var re = new RegExp("([/])" + key + "(/)(.*)", "gi");

    if (re.test(url)) {
        if (typeof value !== 'undefined' && value !== null)
            return url.replace(re, '$1' + key + "/" + value + '$2$3');
        else {
            return url.replace(re, '$1$3').replace(/(\/)$/, '');
        }
    }
    else {
        if (typeof value !== 'undefined' && value !== null) {
            var separator = '/',
            hash = url.split('#');
            url = hash[0] + separator + key + '/' + value;
            if (hash[1]) url += '#' + hash[1];
            return url;
        }
        else
            return url;
    }    
}

This function is getting me very close. It will add new key/values to the url string, but i am having trouble updating/modifying current values in the string. I think its an easy fix. I am just having trouble wrapping my head around $2$3 in the regex and a few other things.

Thanks

I think i have found the answer This seems to be working for now:

function UpdateQueryString(key, value, url)
{
    if (!url) url = window.location.href;
    var re = new RegExp("([/])" + key + "/.*?(/|$)", "gi");
    var separator = '/';
    if (url.match(re)) {
        return url.replace(re, '$1' + key + "/" + value + '$2');
    }
    else {
        return url + separator + key + "/" + value;
    }
}

Can anyone see anything wrong with this?

Answer 1

Could you do something like this instead?

url.split('/?|&|=/').join('/');

This should replace all question marks, ampersands, and equal signs in your URL with slashes.

Answer 2

function UpdateQueryString(key, value, url)
{
    if (!url) url = window.location.href;
    var re = new RegExp("([/])" + key + "/.*?(/|$)", "gi");
    var separator = '/';
    if (url.match(re)) {
        return url.replace(re, '$1' + key + "/" + value + '$2');
    }
    else {
        return url + separator + key + "/" + value;
    }
}

This seems to work. Can anyone find anything wrong with this. I am not very good at regexs or javascript