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?

score 0 · Answer 1 · answered Aug 22 '13 at 13:36

0

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.

answered Aug 22 '13 at 13:36

Barry Beerman

303
3
9

I am not looking to replace ?& and =. I am looking for a quick way to manipulate the url string in javascript. Every library and function that i have seen all deal with the standard page.php?key=value. I am looking for a way to manipulate the url string when the url structure is like page/key/value. Which i have found nothing on. It seems like the function i am using is very close just the regex is slightly off. – user2707535 Aug 22 '13 at 13:44
Ok I still have a couple of questions: 1) When you say changing the url string, do you mean a string that's passed to the function or the actual url in the browser's url bar? If it's the former then what are you trying to accomplish with the page/key/value string after it's been manipulated? 2) Just for clarification, are you trying to change a query string into a directory structure or vice versa? – Barry Beerman Aug 22 '13 at 15:30

score 0 · Answer 2 · answered Aug 23 '13 at 14:39

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

Parsing Friendly Urls in Javascript

2 Answers2