Replace part of text in regex with javascript

Question

I need to change my URL with regex. For example, my url would looklike this:

http://domain.com/blog/?page=2&order=asc&by=date

And with javascript I want to dynamicaly change order=asc to order=desc . But this function would also work for any of the attribute, such as by , so chaging only order is not the way.

This is the function:

function replace(url, attribute, value) {
    var pattern = new RegExp('([\?|\&])' + attribute + '=.\w+');
    var replacement = '$1' + attribute + '=' + value;
    return url.replace(pattern, '', url);
}

So in example, calling function with these variables:

url = 'http://domain.com/blog/?page=2&order=asc&by=date'
attribute = 'order'
value = 'desc'

Would return http://domain.com/blog/?page=2&order=desc&by=date .

Answer 1

You can parse the parameters using an inverse of the jQuery $.param function.

 (function($) { $.unparam = function(value) { var params = {}; var pieces = value.split('&'); var pair, i, l; for (i = 0, l = pieces.length; i < l; i++) { pair = pieces[i].split('=', 2); params[decodeURIComponent(pair[0])] = (pair.length == 2 ? decodeURIComponent(pair[1].replace(/\\+/g, ' ')) : true); } return params; }; }(jQuery)); var url = 'http://domain.com/blog/?page=2&order=asc&by=date'; $('<p>').text('Before: ' + url).appendTo('body'); var parts = url.split('?'); var base = parts[0]; var params = parts[1]; var data = $.unparam(params); data.order = 'desc'; var newUrl = base + '?' + $.param(data); $('<p>').text('After: ' + newUrl).appendTo('body'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

---

Dynamic Example

 (function($) { $.unparam = function(value) { var params = {}; var pieces = value.split('&'); for (var i = 0, l = pieces.length; i < l; i++) { var pair = pieces[i].split('=', 2); params[decodeURIComponent(pair[0])] = (pair.length == 2 ? decodeURIComponent(pair[1].replace(/\\+/g, ' ')) : true); } return params; }; }(jQuery)); function updateParams(url, data) { var parts = url.split('?'); var base = parts[0]; var params = parts.length > 0 ? parts[1] : ''; return base + '?' + $.param($.extend($.unparam(params), data)); } var oldUrl = 'http://domain.com/blog/?page=2&order=asc&by=date'; var newUrl = updateParams(oldUrl, { order: 'desc' }); $('<p>').text(newUrl).appendTo('body'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

Answer 2

I got your example working properly by changing your regex :

new RegExp('([\?|\&])' + attribute + '=.\w+');

to this:

new RegExp('([?&])' + attribute + '=\\w+');

the once-escaped \\w+ is the problem since javascript string interpolation is actually interpreting the backslash itself, and ends up stripping it off and passing regex just a "w". escape this twice: \\\\w+

also:

the [\\?|\\&] is a character class and doesn't need the | alternation (you're actually matching the pipe symbol right now), and quantifiers like ? that are special chars usually are not special inside a character class, so no need to escape them.

you don't need the . before the \\w+ , the \\w+ is sufficient.