Find and replace between two points in JavaScript

Question

I am working on a web app at the moment, and I need to build a URL based on the users selections, the user can only select 1 item per product, so I should be able to create a url that looks like this,

?collection=French%20Curves&room=Bright%20And%20Airy&scene=best&wall_treatment=Wall Treatment 1

If for example the users selects a different wall_treatment, I need to some how search the string I'm generating, and replace that section with new relevant data?

I am googled and tried to use .replace() but that does not work, any ideas?

Sorry what do you mean, everytime something changes I append it to the string, but what if I want to change something that is already in the string? — Udders, Dec 12 '13 at 17:08
Build the sting on demand... `var url = baseURL + "collection=" + encodeURIComponent(xxx) + "&room=" + encodeURIComponent(yyy);` — epascarello, Dec 12 '13 at 17:09
seems like a duplicate of http://stackoverflow.com/questions/1090948/change-url-parameters — Chris Montgomery, Dec 12 '13 at 17:10

Krish R · Answer 1 · 2013-12-12T17:17:48.143

0

Can you try this,

     var String ='?collection=French%20Curves&room=Bright%20And%20Airy&scene=best&wall_treatment=Wall Treatment 1';
     var Urls = String.split('wall_treatment=');         
     String  =  String.replace(Urls[1], "YourString");
     console.log(String); //output : ?collection=French%20Curves&room=Bright%20And%20Airy&scene=best&wall_treatment=YourString

edited Dec 12 '13 at 17:17

answered Dec 12 '13 at 17:10

Krish R

22,583
7
50
59

score 0 · Answer 2 · answered Dec 12 '13 at 17:10

You can replace like this:

wt="something"; // user entered value

s = '?collection=French%20Curves&room=Bright%20And%20Airy&scene=best&wall_treatment=Wall Treatment 1';
s = s.replace(/([?&]wall_treatment=)[^&]*/i, "$1" + wt);
//=> ?collection=French%20Curves&room=Bright%20And%20Airy&scene=best&wall_treatment=something

score 0 · Answer 3 · answered Dec 12 '13 at 17:11

You could build each time the url new instead of replacing something in a string:

var collection = 'French Curves';
var room = 'Bright and Airy';
var scene = 'best';
var wallTreatment = 'Wall Treatment 1';

newUrl = '?collection=' + collection + '&room=' + room + '&scene=' + scene + '&wall_treatment=' + wallTreatment';

Then a bit urlencode and everything should be fine. You could do this in a foreach too, if your GET-Parameters are dynamically.

Beat Richartz · Accepted Answer · 2013-12-12T17:23:06.987

You can build a regexp matching any part of your string like this:

var urlPart = "wall_treatment";
var reg = new RegExp("([&?]+)" + urlPart + "=[^&]+");

Just replace "wall_treatment" with any variable holding a string / part of your URL. [^&]+ matches anything up to the next occurence of & in the url.

Replace it like this:

var yourURL = "?collection=French%20Curves&room=Bright%20And%20Airy&scene=best&wall_treatment=Wall Treatment 1";
var new_value = "Wall Treatment 2";
yourURL.replace(reg, "$1" + urlPart + "=" + new_value);

Having solved that, let me advise that you should probably try to build your url from an object or an array rather than replacing variables in the url string:

var myURLSearchObject = {},
    addURLSearchPart = function(key, value) {
      myURLSearchObject[key] = value;
    },
    buildURLSearch = function() {
      var string = "?";
      for (var key in myURLSearchObject) {
        if (myURLSearchObject.hasOwnProperty(key)) {
           string.length > 1 && (string += '&');
           string += key;
           string += '=';
           string += myURLSearchObject[key];
        }
      }
      return string;
    };

Now you can use it like this:

addURLSearchPart('hello', 'hi');
addURLSearchPart('bye', 'goodbye');

buildURLSearch();

score 0 · Answer 5 · answered Dec 12 '13 at 17:14

0

Try:

(?i)(?<=wall_treatment=)[^&]+

Build the above regex up where wall_treatment can be any parameter from your url. If it was scene the regex will capture best if wall_treatment the regex will capture Wall Treatment 1.

I hope this helps!

answered Dec 12 '13 at 17:14

Srb1313711

2,017
5
24
35

Find and replace between two points in JavaScript

5 Answers5