jQuery split/replace part of URL

Question

I have this url

http://9001/transactions

I have buttons that need to change the url e.g

http://9001/transactions?type=all
http://9001/transactions?type=confirmed
http://9001/transactions?type=unconfirmed

how would I go about replacing the string after transactions. I have the click functions in place just need to know what to put inside them.

the url will change so this cannot be dependant on anything before transactions (if that makes sense). Sorry if questions is vague but in a massive rush to get this done.

Do you want to be able to change only the parameters? Like type — Konstantin Dinev
– Konstantin Dinev, Commented Sep 26, 2012 at 13:03
I just need to change the string after "transactions" so for example when I click the "all" button it changes to "transactions?type=all" but when I click the confirmed button it changes to "transactions?type=confirmed" — user818991
– user818991, Commented Sep 26, 2012 at 13:05

alex · Accepted Answer · 2012-09-26 13:09:07Z

1

You could build a function to change the GET param...

var updateGetParam = function(key, value) {

    window.location.search = window.location.search.replace(new RegExp("([?&;])" + key + "=.*?(&|;|$)"), "$1" + key + "=" + encodeURIComponent(value) + "$2");

}

jsFiddle.

You should run the user input through a regex escaping function first.

answered Sep 26, 2012 at 13:09

alex

492k205 gold badges890 silver badges992 bronze badges

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

2 Comments

user818991 Over a year ago

makes no sense to me whatsoever, can you explain it a little better please?

alex Over a year ago

@OliMillington It's a regular expression that replaces the existing GET param with a new value.

Community · Accepted Answer · 2017-05-23 12:30:18Z

I wrote a function that does exactly this, it reloads the current page, and has full support for changing existing url variables (as well as adding new ones). All you have to do is pass an object literal to the function. See here: https://stackoverflow.com/a/10235376/733347

In your case all you'd need to do is call the function as so

reloadWithQueryStringVars({"type": "all"});

or

reloadWithQueryStringVars({"type": "confirmed"});

or

reloadWithQueryStringVars({"type": "unconfirmed"});

on the click events of your buttons

Here's the entire function for reference:

function reloadWithQueryStringVars (queryStringVars) {
    var existingQueryVars = location.search ? location.search.substring(1).split("&") : [],
        currentUrl = location.search ? location.href.replace(location.search,"") : location.href,
        newQueryVars = {},
        newUrl = currentUrl + "?";
    if(existingQueryVars.length > 0) {
        for (var i = 0; i < existingQueryVars.length; i++) {
            var pair = existingQueryVars[i].split("=");
            newQueryVars[pair[0]] = pair[1];
        }
    }
    if(queryStringVars) {
        for (var queryStringVar in queryStringVars) {
            newQueryVars[queryStringVar] = queryStringVars[queryStringVar];
        }
    }
    if(newQueryVars) { 
        for (var newQueryVar in newQueryVars) {
            newUrl += newQueryVar + "=" + newQueryVars[newQueryVar] + "&";
        }
        newUrl = newUrl.substring(0, newUrl.length-1);
        window.location.href = newUrl;
    } else {
        window.location.href = location.href;
    }
}

Hazem Salama · Accepted Answer · 2012-09-26 13:20:10Z

0

A very crude solution but it is easier to understand and implement, see if it helps

var url = "http://9001/transactions?type=unconfirmed"; //in live environment, replace with var url = window.location.href;
var urlArray = url.split('?');
var urlArrayLength = url.split('?').length;


urlArray[urlArrayLength - 1] = "type=newValue";


url  = urlArray.join('?');

alert(url)

answered Sep 26, 2012 at 13:20

Hazem Salama

15.2k5 gold badges29 silver badges31 bronze badges

Comments

Konstantin Dinev · Accepted Answer · 2012-09-26 13:25:26Z

0

See if this code works for you:

var href = window.location.href;

// This assumes the value of your button is the action and each
// button has the class button applied. Modify as necessary
$('.button').click(function (event) {
    if (href.lastIndexOf('?') !== -1) {
        href.replace(/\?(.*)/, '?type=' + $(this).val());
    } else {
        href += '?type=' + $(this).val();
    }
    window.location.href = href;
});

edited Sep 26, 2012 at 13:25

answered Sep 26, 2012 at 13:10

Konstantin Dinev

35k14 gold badges79 silver badges102 bronze badges

3 Comments

user818991 Over a year ago

can you look at my updated question please, it kind of worked

user818991 Over a year ago

still doesnt replace the current string

Konstantin Dinev Over a year ago

@OliMillington now it should be fine.

Collectives™ on Stack Overflow

jQuery split/replace part of URL

4 Answers 4

2 Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related