Adding/Modify query string / GET variables in a url with javascript

Question

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);
}

Note: As soon as you change the page's URL the browser will navigate to that location, so you can only change it once. — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Oct 3, 2011 at 20:32
I can change it as many times as I want. I am editing a elements href not the page. — MLM
– MLM, Commented Oct 4, 2011 at 0:39

Ryan Kinal · Accepted Answer · 2013-07-08 19:21:32Z

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.

edited Jul 8, 2013 at 19:21

answered Oct 4, 2011 at 12:52

Ryan Kinal

17.8k7 gold badges48 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

MLM Over a year ago

Updated and added a read function to this fiddle. I used (;|&|$) instead of your (&|$) -- jsfiddle.net/MadLittleMods/4Pz8h

Christophe Over a year ago

How about [\\?&] instead of (\\?|\\&)

joweiser Over a year ago

For anybody searching an alternative to this one, here's my favorite solution: stackoverflow.com/questions/5999118/…

Joao Leme Over a year ago

doesn't handle hash on url

John Tyree Over a year ago

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.

|

Joao Leme · Accepted Answer · 2013-07-02 20:33:25Z

1

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

https://github.com/Mikhus/jsurl

edited Jul 2, 2013 at 20:33

answered Jul 2, 2013 at 20:24

Joao Leme

9,9583 gold badges35 silver badges48 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:22:23Z

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').

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Oct 3, 2011 at 20:38

jtfairbank

2,3072 gold badges23 silver badges33 bronze badges

3 Comments

MLM Over a year ago

This is pretty close and I am guessing I need to use his new plugin called BBQ: benalman.com/projects/jquery-bbq-plugin - which is for 1.4 jquery and I am using 1.6.4 - and I am using this url(?action=expand;) My jquery would be: jsfiddle.net/RVCyu - It does not seem to be working

jtfairbank Over a year ago

See netlobo.com/url_query_string_javascript.html or jquery-howto.blogspot.com/2009/09/….

MLM Over a year ago

I am not trying to read values, I am trying to modify/add them

Mohamed.Abdo · Accepted Answer · 2013-07-21 12:09:41Z

<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>

Collectives™ on Stack Overflow

Adding/Modify query string / GET variables in a url with javascript

4 Answers 4

9 Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related