How to replace url parameter with javascript/jquery?

Question

I've been looking for an efficient way to do this but haven't been able to find it, basically what I need is that given this url for example:

http://localhost/mysite/includes/phpThumb.php?src=http://media2.jupix.co.uk/v3/clients/4/properties/795/IMG_795_1_large.jpg&w=592&aoe=1&q=100

I'd like to be able to change the URL in the src parameter with another value using javascript or jquery, is this possible?

possible duplicate of Change URL parameters

Sindre Sorhus
– Sindre Sorhus

2013-11-15 18:45:42 +00:00
Commented Nov 15, 2013 at 18:45 — Sindre Sorhus
– Sindre Sorhus, Commented Nov 15, 2013 at 18:45

stenix · Accepted Answer · 2018-07-23 07:32:32Z

163

The following solution combines other answers and handles some special cases:

The parameter does not exist in the original url
The parameter is the only parameter
The parameter is first or last
The new parameter value is the same as the old
The url ends with a ? character
\b ensures another parameter ending with paramName won't be matched

Solution:

function replaceUrlParam(url, paramName, paramValue)
{
    if (paramValue == null) {
        paramValue = '';
    }
    var pattern = new RegExp('\\b('+paramName+'=).*?(&|#|$)');
    if (url.search(pattern)>=0) {
        return url.replace(pattern,'$1' + paramValue + '$2');
    }
    url = url.replace(/[?#]$/,'');
    return url + (url.indexOf('?')>0 ? '&' : '?') + paramName + '=' + paramValue;
}

Known limitations:

Does not clear a parameter by setting paramValue to null, instead it sets it to empty string. See https://stackoverflow.com/a/25214672 if you want to remove the parameter.

edited Jul 23, 2018 at 7:32

answered Dec 6, 2013 at 9:32

stenix

3,1362 gold badges21 silver badges32 bronze badges

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

11 Comments

Sanket Sahu Over a year ago

This is more appropriate solution than the one marked with the highest vote.

Ryan Over a year ago

Your function will append a duplicate parameter in the case it is invoked with a parameter name and value that already exists in the URL.

stenix Over a year ago

Ryan, you were right about that. I have edited the function to handle also that scenario.

Carson Over a year ago

Thanks for making the update. I just ran into the same bug and was about to get my hands dirty with a fix, but your fix came to the rescue.

Michael Walter Over a year ago

I just added url = url.replace(/\?$/,''); to solve the 2nd limitation. Fiddle: jsfiddle.net/ucubvgws

|

Oleg · Accepted Answer · 2019-01-30 08:15:26Z

130

Nowdays that's possible with native JS

var href = new URL('https://google.com?q=cats');
href.searchParams.set('q', 'dogs');
console.log(href.toString()); // https://google.com/?q=dogs

edited Jan 30, 2019 at 8:15

answered Feb 28, 2018 at 15:43

Oleg

7,4054 gold badges51 silver badges51 bronze badges

2 Comments

Thallyson Dias Over a year ago

Simple and clean. Perfect!

Vishal Shah Over a year ago

This is a much cleaner approach. It even takes care of encoding the param value.

Victor · Accepted Answer · 2018-12-06 20:27:48Z

60

Wouldn't this be a better solution?

var text = 'http://localhost/mysite/includes/phpThumb.php?src=http://media2.jupix.co.uk/v3/clients/4/properties/795/IMG_795_1_large.jpg&w=592&aoe=1&q=100';
var newSrc = 'www.google.com';
var newText = text.replace(/(src=).*?(&)/,'$1' + newSrc + '$2');

EDIT:

added some clarity in code and kept 'src' in the resulting link

$1 represents first part within the () (i.e) src= and $2 represents the second part within the () (i.e) &, so this indicates you are going to change the value between src and &. More clear, it should be like this:

src='changed value'& // this is to be replaced with your original url

ADD-ON for replacing all the ocurrences:

If you have several parameters with the same name, you can append to the regex global flag, like this text.replace(/(src=).*?(&)/g,'$1' + newSrc + '$2'); and that will replaces all the values for those params that shares the same name.

edited Dec 6, 2018 at 20:27

Victor

3,9983 gold badges43 silver badges66 bronze badges

answered Aug 24, 2011 at 6:28

ZenMaster

12.8k5 gold badges40 silver badges60 bronze badges

8 Comments

Beardo Over a year ago

Doesn't handle the general case of replacing the last parameter. I changed the regex to /(src=).*?(&)?/ for a similar problem.

StackOverFlow Over a year ago

@ZenMaster Perfect :), can you explain meaning of text.replace(/(src=).*?(&)/,'$1' + newSrc + '$2');

ZenMaster Over a year ago

2 capturing groups... See more here: stackoverflow.com/questions/3512471/non-capturing-group

Sanket Sahu Over a year ago

Doesn't handle the case for the last parameter.

zoku Over a year ago

I used the RegExp /(src=).*?(&|$)/ to address the last-parameter-problem.

|

user2752173 · Accepted Answer · 2018-02-20 19:49:02Z

33

Javascript now give a very useful functionnality to handle url parameters: URLSearchParams

var searchParams = new URLSearchParams(window.location.search);
searchParams.set('src','newSrc')
var newParams = searchParams.toString()

answered Feb 20, 2018 at 19:49

user2752173

4991 gold badge6 silver badges12 bronze badges

4 Comments

Fabii Over a year ago

Worked perfectly. No IE support though .

user2752173 Over a year ago

This is true, no IE and Mobile Safari support at this time. But reliable solutions can be found there or there.

Oleg Over a year ago

Nowdays that's possible with native JS

hacker1024 Over a year ago

How can I use this to replace an existing set of parameters in a URL?

MyrionSC2 · Accepted Answer · 2020-05-18 12:39:00Z

14

In modern browsers (everything except IE9 and below), our lives are a little easier now with the new URL api

var url = new window.URL(document.location); // fx. http://host.com/endpoint?abc=123
url.searchParams.set("foo", "bar");
console.log(url.toString()); // http://host/endpoint?abc=123&foo=bar
url.searchParams.set("foo", "ooft");
console.log(url.toString()); // http://host/endpoint?abc=123&foo=ooft

answered May 18, 2020 at 12:39

MyrionSC2

1,3181 gold badge15 silver badges24 bronze badges

2 Comments

Riccardo Cedrola Over a year ago

N.B URL constructor is not available on all IE browsers developer.mozilla.org/en-US/docs/Web/API/URL/URL

Shnigi Over a year ago

This is the easiest and most up to date answer.

Ahsan Khan · Accepted Answer · 2021-05-04 11:51:41Z

10

// Construct URLSearchParams object instance from current URL querystring.
var queryParams = new URLSearchParams(window.location.search);
 
// Set new or modify existing parameter value. 
queryParams.set("myParam", "myValue");
 
// Replace current querystring with the new one.
history.replaceState(null, null, "?"+queryParams.toString());

Alternatively instead of modifying current history entry using replaceState() we can use pushState() method to create a new one:

history.pushState(null, null, "?"+queryParams.toString());

answered May 4, 2021 at 11:51

Ahsan Khan

84011 silver badges15 bronze badges

Comments

meliniak · Accepted Answer · 2015-01-06 02:34:32Z

8

Here is modified stenix's code, it's not perfect but it handles cases where there is a param in url that contains provided parameter, like:

/search?searchquery=text and 'query' is provided.

In this case searchquery param value is changed.

Code:

function replaceUrlParam(url, paramName, paramValue){
    var pattern = new RegExp('(\\?|\\&)('+paramName+'=).*?(&|$)')
    var newUrl=url
    if(url.search(pattern)>=0){
        newUrl = url.replace(pattern,'$1$2' + paramValue + '$3');
    }
    else{
        newUrl = newUrl + (newUrl.indexOf('?')>0 ? '&' : '?') + paramName + '=' + paramValue
    }
    return newUrl
}

answered Jan 6, 2015 at 2:34

meliniak

7721 gold badge9 silver badges18 bronze badges

2 Comments

stenix Over a year ago

I added a \b in my solution to solve the problem. Thanks for pointing it out.

Keith Turkowski Over a year ago

This will fail when the url is "?q=1&x=", it will return "?q=1?", I think the condition in the else should be >=0 instead of >0 to resolve this.

Aakash Goplani · Accepted Answer · 2020-03-24 12:43:55Z

4

If you are having very narrow and specific use-case like replacing a particular parameter of given name that have alpha-numeric values with certain special characters capped upto certain length limit, you could try this approach:

urlValue.replace(/\bsrc=[0-9a-zA-Z_@.#+-]{1,50}\b/, 'src=' + newValue);

Example:

let urlValue = 'www.example.com?a=b&src=test-value&p=q';
const newValue = 'sucess';
console.log(urlValue.replace(/\bsrc=[0-9a-zA-Z_@.#+-]{1,50}\b/, 'src=' + newValue));
// output - www.example.com?a=b&src=sucess&p=q

answered Mar 24, 2020 at 12:43

Aakash Goplani

1,3842 gold badges23 silver badges38 bronze badges

Comments

Mayank Dudakiya · Accepted Answer · 2019-04-03 11:14:19Z

2

I have get best solution to replace the URL parameter.

Following function will replace room value to 3 in the following URL.

http://example.com/property/?min=50000&max=60000&room=1&property_type=House

var newurl = replaceUrlParam('room','3');
history.pushState(null, null, newurl);

function replaceUrlParam(paramName, paramValue){
    var url = window.location.href;

    if (paramValue == null) {
        paramValue = '';
    }

    var pattern = new RegExp('\\b('+paramName+'=).*?(&|#|$)');
    if (url.search(pattern)>=0) {
        return url.replace(pattern,'$1' + paramValue + '$2');
    }

    url = url.replace(/[?#]$/,'');
    return url + (url.indexOf('?')>0 ? '&' : '?') + paramName + '=' + paramValue;
}

Output

http://example.com/property/?min=50000&max=60000&room=3&property_type=House

answered Apr 3, 2019 at 11:14

Mayank Dudakiya

3,88940 silver badges37 bronze badges

1 Comment

dermatthias Over a year ago

Why are you reposting Stenix answer?

Random Person · Accepted Answer · 2020-01-03 18:01:33Z

2

Editing a Parameter The set method of the URLSearchParams object sets the new value of the parameter.

After setting the new value you can get the new query string with the toString() method. This query string can be set as the new value of the search property of the URL object.

The final new url can then be retrieved with the toString() method of the URL object.


var query_string = url.search;

var search_params = new URLSearchParams(query_string); 

// new value of "id" is set to "101"
search_params.set('id', '101');

// change the search property of the main url
url.search = search_params.toString();

// the new url string
var new_url = url.toString();

// output : http://demourl.com/path?id=101&topic=main
console.log(new_url);

Source - https://usefulangle.com/post/81/javascript-change-url-parameters

answered Jan 3, 2020 at 18:01

Random Person

675 bronze badges

2 Comments

Samar Rizvi Over a year ago

The set method also removes all other params.

Rodolphe Over a year ago

Not at all. The set method only sets id parameter. Any other parameter is untouched.

wesbos · Accepted Answer · 2011-08-24 06:17:26Z

1

UpdatE: Make it into a nice function for you: http://jsfiddle.net/wesbos/KH25r/1/

function swapOutSource(url, newSource) {
    params = url.split('&');
    var src = params[0].split('=');
    params.shift();
    src[1] = newSource;
    var newUrl = ( src.join('=') + params.join('&')); 
    return newUrl; 
}

Then go at it!

var newUrl = swapOutSource("http://localhost/mysite/includes/phpThumb.php?src=http://media2.jupix.co.uk/v3/clients/4/properties/795/IMG_795_1_large.jpg&w=592&aoe=1&q=100","http://link/to/new.jpg");


console.log(newUrl);

answered Aug 24, 2011 at 6:17

wesbos

26.4k31 gold badges109 silver badges144 bronze badges

1 Comment

Robert Martin Over a year ago

The problem here is that you are always replacing the 1st parameter. So if I rearrange the string to be "localhost/mysite/includes/phpThumb.php?q=100&src=http://…" All the sudden it will break...

Ryan · Accepted Answer · 2015-01-26 14:15:55Z

1

If you look closely you'll see two surprising things about URLs: (1) they seem simple, but the details and corner cases are actually hard, (2) Amazingly JavaScript doesn't provide a full API for making working with them any easier. I think a full-fledged library is in order to avoid people re-inventing the wheel themselves or copying some random dude's clever, but likely buggy regex code snippet. Maybe try URI.js (http://medialize.github.io/URI.js/)

answered Jan 26, 2015 at 14:15

Ryan

8,01110 gold badges59 silver badges64 bronze badges

1 Comment

dogonaroof Over a year ago

As someone that doesn't know regex, I am afraid of 'some random dude's clever, but likely buggy regex code snippet' hahah.

Laurent · Accepted Answer · 2019-05-15 10:32:26Z

I use this method which:

replace the url in the history

return the value of the removed parameter

function getUrlParameterAndRemoveParameter(paramName) {
    var url = window.location.origin + window.location.pathname;
    var s = window.location.search.substring(1);
    var pArray = (s == "" ? [] : s.split('&'));

    var paramValue = null;
    var pArrayNew = [];
    for (var i = 0; i < pArray.length; i++) {
        var pName = pArray[i].split('=');
        if (pName[0] === paramName) {
            paramValue = pName[1] === undefined ? true : decodeURIComponent(pName[1]);
        }
        else {
            pArrayNew.push(pArray[i]);
        }
    }

    url += (pArrayNew.length == 0 ? "" : "?" + pArrayNew.join('&'));
    window.history.replaceState(window.history.state, document.title, url);

    return paramValue;
}

Mickster · Accepted Answer · 2020-05-15 07:20:55Z

2020 answer since I was missing the functionality to automatically delete a parameter, so:

Based on my favorite answer https://stackoverflow.com/a/20420424/6284674 : I combined it with the ability to:

automatically delete an URL param if the value if null or '' based on answer https://stackoverflow.com/a/25214672/6284674
optionally push the updated URL directly in the window.location bar
IE support since it's only using regex and no URLSearchParams

JSfiddle: https://jsfiddle.net/MickV/zxc3b47u/


function replaceUrlParam(url, paramName, paramValue){
    if(paramValue == null || paramValue == "")
        return url
        .replace(new RegExp('[?&]' + paramValue + '=[^&#]*(#.*)?$'), '$1')
        .replace(new RegExp('([?&])' + paramValue + '=[^&]*&'), '$1');   
    url = url.replace(/\?$/,'');
    var pattern = new RegExp('\\b('+paramName+'=).*?(&|$)')
    if(url.search(pattern)>=0){
        return url.replace(pattern,'$1' + paramValue + '$2');
    }
    return url + (url.indexOf('?')>0 ? '&' : '?') + paramName + '=' + paramValue 
}

// Orginal URL (default jsfiddle console URL)
//https://fiddle.jshell.net/_display/?editor_console=true

console.log(replaceUrlParam(window.location.href,'a','2'));   
//https://fiddle.jshell.net/_display/?editor_console=true&a=2

console.log(replaceUrlParam(window.location.href,'a',''));   
//https://fiddle.jshell.net/_display/?editor_console=true

console.log(replaceUrlParam(window.location.href,'a',3));   
//https://fiddle.jshell.net/_display/?editor_console=true&a=3

console.log(replaceUrlParam(window.location.href,'a', null));   
//https://fiddle.jshell.net/_display/?editor_console=true&

//Optionally also update the replaced URL in the window location bar
//Note: This does not work in JSfiddle, but it does in a normal browser
function pushUrl(url){
    window.history.pushState("", "", replaceUrlParam(window.location.href,'a','2'));   
}


pushUrl(replaceUrlParam(window.location.href,'a','2'));   
//https://fiddle.jshell.net/_display/?editor_console=true&a=2

pushUrl(replaceUrlParam(window.location.href,'a',''));   
//https://fiddle.jshell.net/_display/?editor_console=true

pushUrl(replaceUrlParam(window.location.href,'a',3));   
//https://fiddle.jshell.net/_display/?editor_console=true&a=3

pushUrl(replaceUrlParam(window.location.href,'a', null));   
//https://fiddle.jshell.net/_display/?editor_console=true&

sfdeveloper · Accepted Answer · 2014-04-14 08:35:26Z

0

In addition to @stenix, this worked perfectly to me

 url =  window.location.href;
    paramName = 'myparam';
        paramValue = $(this).val();
        var pattern = new RegExp('('+paramName+'=).*?(&|$)') 
        var newUrl = url.replace(pattern,'$1' + paramValue + '$2');
        var n=url.indexOf(paramName);
        alert(n)
        if(n == -1){
            newUrl = newUrl + (newUrl.indexOf('?')>0 ? '&' : '?') + paramName + '=' + paramValue 
        }
        window.location.href = newUrl;

Here no need to save the "url" variable, just replace in current url

answered Apr 14, 2014 at 8:35

sfdeveloper

1961 gold badge4 silver badges14 bronze badges

1 Comment

Niuya Over a year ago

how about replacing multiply param?

Community · Accepted Answer · 2017-02-02 16:53:49Z

0

How about something like this:

<script>
function changeQueryVariable(keyString, replaceString) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    var replaced = false;
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == keyString) {
            vars[i] = pair[0] + "="+ replaceString;
            replaced = true;
        }
    }
    if (!replaced) vars.push(keyString + "=" + replaceString);
    return vars.join("&");
}
</script>

edited Feb 2, 2017 at 16:53

CommunityBot

11 silver badge

answered Aug 24, 2011 at 6:06

Robert Martin

17.3k17 gold badges64 silver badges89 bronze badges

2 Comments

Javier Villanueva Over a year ago

The only problem is that the URL doesn't come from the browser but from a variable, so I can't use the search method :(

Robert Martin Over a year ago

That is okay, you can do the same thing with regex. Here is an example: stackoverflow.com/questions/901115/…

Alper Ebicoglu · Accepted Answer · 2019-03-04 14:23:19Z

try this

var updateQueryStringParam = function (key, value) {

    var baseUrl = [location.protocol, '//', location.host, location.pathname].join(''),
        urlQueryString = document.location.search,
        newParam = key + '=' + value,
        params = '?' + newParam;

    // If the "search" string exists, then build params from it
    if (urlQueryString) {
        var updateRegex = new RegExp('([\?&])' + key + '[^&]*');
        var removeRegex = new RegExp('([\?&])' + key + '=[^&;]+[&;]?');

        if( typeof value == 'undefined' || value == null || value == '' ) { // Remove param if value is empty
            params = urlQueryString.replace(removeRegex, "$1");
            params = params.replace( /[&;]$/, "" );

        } else if (urlQueryString.match(updateRegex) !== null) { // If param exists already, update it
            params = urlQueryString.replace(updateRegex, "$1" + newParam);

        } else { // Otherwise, add it to end of query string
            params = urlQueryString + '&' + newParam;
        }
    }

    // no parameter was set so we don't need the question mark
    params = params == '?' ? '' : params;

    window.history.replaceState({}, "", baseUrl + params);
};

Pasi Matalamäki · Accepted Answer · 2019-11-30 10:48:40Z

A solution without Regex, a little bit easier on the eye, one I was looking for

This supports ports, hash parameters etc.

Uses browsers attribute element as a parser.

function setUrlParameters(url, parameters) {
    var parser = document.createElement('a');
    parser.href = url;

    url = "";

    if (parser.protocol) {
        url += parser.protocol + "//";
    }

    if (parser.host) {
        url += parser.host;
    }

    if (parser.pathname) {
        url += parser.pathname;
    }

    var queryParts = {};

    if (parser.search) {
        var search = parser.search.substring(1);

        var searchParts = search.split("&");
        for (var i = 0; i < searchParts.length; i++) {
            var searchPart = searchParts[i];

            var whitespaceIndex = searchPart.indexOf("=");

            if (whitespaceIndex !== -1) {
                var key = searchPart.substring(0, whitespaceIndex);
                var value = searchPart.substring(whitespaceIndex + 1);

                queryParts[key] = value;
            } else {
                queryParts[searchPart] = false;
            }
        }
    }

    var parameterKeys = Object.keys(parameters);

    for (var i = 0; i < parameterKeys.length; i++) {
        var parameterKey = parameterKeys[i];

        queryParts[parameterKey] = parameters[parameterKey];
    }


    var queryPartKeys = Object.keys(queryParts);

    var query = "";

    for (var i = 0; i < queryPartKeys.length; i++) {
        if (query.length === 0) {
            query += "?";
        }
        if (query.length > 1) {
            query += "&";
        }

        var queryPartKey = queryPartKeys[i];

        query += queryPartKey;

        if (queryParts[queryPartKey]) {
            query += "=";

            query += queryParts[queryPartKey];
        }
    }

    url += query;

    if (parser.hash) {
        url += parser.hash;
    }

    return url;
}

Emir Musradin · Accepted Answer · 2020-12-06 13:06:21Z

0

Here is function which replaces url param with paramVal

function updateURLParameter(url, param, paramVal){
        if(!url.includes('?')){
            return url += '?' + param + '=' + paramVal;
        }else if(!url.includes(param)){
            return url += '&' + param + '=' + paramVal;
        }else {
            let paramStartIndex = url.search(param);
            let paramEndIndex = url.indexOf('&', paramStartIndex);
            if (paramEndIndex == -1){
                paramEndIndex = url.length;
            }
            let brands = url.substring(paramStartIndex, paramEndIndex);
    
            return url.replace(brands, param + '=' + paramVal);
        }
    }

answered Dec 6, 2020 at 13:06

Emir Musradin

811 silver badge6 bronze badges

Comments

Franck Theeten · Accepted Answer · 2021-12-03 11:30:31Z

A lengthier, but maybe more flexible, answer that relies on two functions. The first one produces a key/value dictionary with all the parameters, the other one doing the substitution itself. This should work on old browsers, and can also create the parameter when it doesn't exist.

var get_all_params=function(url)
{               
    var regexS = /(?<=&|\?)([^=]*=[^&#]*)/;
    var regex = new RegExp( regexS,'g' );
    var results = url.match(regex);
    if(results==null)
    {
        return {};
    }
    else
    {
        returned={};
        for(i=0;i<results.length;i++)
        {
            var tmp=results[i];                
            var regexS2="([^=]+)=([^=]+)";
            var regex2 = new RegExp( regexS2 );
            var results2 = regex2.exec(tmp );                
            returned[results2[1]]=results2[2];
        }
        return returned;
    }   
}

var replace_param=function(url, param, value)
{
    var get_params=get_all_params(url);
    var base_url=url.split("?");
    get_params[param]=value;
    var new_params=Array();
    for(key in get_params)
    {
        new_params.push(key+"="+get_params[key]);
    }
    return base_url[0]+"?"+new_params.join("&");
}

Exemple of call :

var url ="https://geoserver.xxx.com/geoserver/project?service=WFS&version=1.0.0&request=GetFeature&typename=localities";
url=replace_param(url, "service","WMS");

Collectives™ on Stack Overflow

How to replace url parameter with javascript/jquery?

20 Answers 20

11 Comments

2 Comments

8 Comments

4 Comments

2 Comments

Comments

2 Comments

Comments

http://example.com/property/?min=50000&max=60000&room=1&property_type=House

1 Comment

2 Comments

1 Comment

1 Comment

Comments

Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

20 Answers 20

11 Comments

2 Comments

8 Comments

4 Comments

2 Comments

Comments

2 Comments

Comments

1 Comment

2 Comments

1 Comment

1 Comment

Comments

Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related