5

So I am wanting to replace GET variable values in a url and if the variable does not exist, then add it to the url.

EDIT: I am doing this to a elements href not the pages current location..

I am not good with javascript but I do know how to use jQuery quite well and the basics of javascript. I do know how to write regex but not how to use the javascript syntax of regex and what functions to use it with.

Here is what I have so far and it does have an error on line 3: See it on jsfiddle(or below): http://jsfiddle.net/MadLittleMods/C93mD/

function addParameter(url, param, value) {
    var pattern = new RegExp(param + '=(.*?);', 'gi');
    return url.replace(pattern, param + '=' + value + ';');

    alert(url);
}
2
  • 1
    Note: As soon as you change the page's URL the browser will navigate to that location, so you can only change it once. Oct 3, 2011 at 20:32
  • 1
    I can change it as many times as I want. I am editing a elements href not the page.
    – MLM
    Oct 4, 2011 at 0:39

4 Answers 4

15

No need to use jQuery on this one. Regular Expressions and string functions are sufficient. See my commented code below:

function addParameter(url, param, value) {
    // Using a positive lookahead (?=\=) to find the
    // given parameter, preceded by a ? or &, and followed
    // by a = with a value after than (using a non-greedy selector)
    // and then followed by a & or the end of the string
    var val = new RegExp('(\\?|\\&)' + param + '=.*?(?=(&|$))'),
        parts = url.toString().split('#'),
        url = parts[0],
        hash = parts[1]
        qstring = /\?.+$/,
        newURL = url;

    // Check if the parameter exists
    if (val.test(url))
    {
        // if it does, replace it, using the captured group
        // to determine & or ? at the beginning
        newURL = url.replace(val, '$1' + param + '=' + value);
    }
    else if (qstring.test(url))
    {
        // otherwise, if there is a query string at all
        // add the param to the end of it
        newURL = url + '&' + param + '=' + value;
    }
    else
    {
        // if there's no query string, add one
        newURL = url + '?' + param + '=' + value;
    }

    if (hash)
    {
        newURL += '#' + hash;
    }

    return newURL;
}

And here is the Fiddle

Update:

The code now handles the case where there is a hash on the URL.

Edit

Missed a case! The code now checks to see if there is a query string at all.

9
  • 1
    Updated and added a read function to this fiddle. I used (;|&|$) instead of your (&|$) -- jsfiddle.net/MadLittleMods/4Pz8h
    – MLM
    Oct 5, 2011 at 2:59
  • 1
    How about [\\?&] instead of (\\?|\\&)
    – Christophe
    Dec 23, 2011 at 17:36
  • For anybody searching an alternative to this one, here's my favorite solution: stackoverflow.com/questions/5999118/…
    – joweiser
    Mar 22, 2013 at 11:33
  • 1
    doesn't handle hash on url
    – Joao Leme
    Jul 2, 2013 at 19:34
  • 1
    This code looks like a great example of why you should just shut up and use jQuery. Edited countless times as new bugs are randomly found, costing who knows how many developer hours, and we still don't even know if it actually works. jQuery is heavy because it's already been through this process. Any yahoo can "write a faster function to X" but then it doesn't work because they leave out the million corner cases that cause bugs. And we're not even yet talking about the ways that javascript itself makes this difficult.
    – John Tyree
    Aug 23, 2014 at 17:44
1

I would go with this small but complete library to handle urls in js:

https://github.com/Mikhus/jsurl

0

See Change URL parameters. It answers your question in a more general manner (changing any url parameter). There are solutions for both jQuery and regular js in the answers section.

It also looks like url.replace should be location.replace but I may be wrong (that statement's based on a quick google search for 'url.replace javascript').

3
0
<script type="text/javascript">
    $(document).ready(function () {
        $('input.letter').click(function () {
            //0- prepare values
            var qsTargeted = 'letter=' + this.value; //"letter=A";
            var windowUrl = '';
            var qskey = qsTargeted.split('=')[0];
            var qsvalue = qsTargeted.split('=')[1];
            //1- get row url
            var originalURL = window.location.href;
            //2- get query string part, and url
            if (originalURL.split('?').length > 1) //qs is exists
            {
                windowUrl = originalURL.split('?')[0];
                var qs = originalURL.split('?')[1];
                //3- get list of query strings
                var qsArray = qs.split('&');
                var flag = false;
                //4- try to find query string key
                for (var i = 0; i < qsArray.length; i++) {
                    if (qsArray[i].split('=').length > 0) {
                        if (qskey == qsArray[i].split('=')[0]) {
                            //exists key
                            qsArray[i] = qskey + '=' + qsvalue;
                            flag = true;
                            break;
                        }
                    }
                }
                if (!flag)//   //5- if exists modify,else add
                {
                    qsArray.push(qsTargeted);
                }
                var finalQs = qsArray.join('&');
                //6- prepare final url
                window.location = windowUrl + '?' + finalQs;
            }
            else {
                //6- prepare final url
                //add query string
                window.location = originalURL + '?' + qsTargeted;
            }
        })
    });
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.