Replace rear part of image source string with different parameter

Question

I have an image (which is actually a webservice map), where, upon a change of user chosen parameters, the bounding box must be changed and the image updated.

It's working if I replace the whole image tag:

document.getElementById("dropzone1").innerHTML = "<img style='margin-top: 0' 
  src='http://neowms.sci.gsfc.nasa.gov/wms/wms?
  SERVICE=WMS&VERSION=1.1.0&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=true&
  LAYERS=MOD13A2_E_NDVI&SRS=EPSG:4326&STYLES=&WIDTH=500&HEIGHT=400&
  BBOX=10.163726806640625,49.10217838413516,10.240631103515625,49.14172346635712'>";

But I'd like to only replace the rear part, the BBOX data with a variable "extent":

  str.replace("10.163726806640625,49.10217838413516,10.240631103515625,49.14172346635712", extent")

Is there a simple way of doing this? The number of decimals vary.

Thanks for any hints!

Stefano Zanini · Accepted Answer · 2017-03-06 11:25:21Z

1

You can use regular expressions, like

yourString.replace(/BBOX=[\d\.,]+/, 'BBOX=' + yourNewBBox);

That regex will search for substrings composed by 'BBOX=' followed by any combination of digits, dots and commas.

answered Mar 6, 2017 at 11:25

Stefano Zanini

5,9362 gold badges15 silver badges33 bronze badges

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

Comments

CaptainHere · Accepted Answer · 2017-03-06 11:26:35Z

0

This is a simple solution.

var n = str.lastIndexOf('BBOX');
var o=str.lastIndexOf('>');
var result = str.substring(n + 1,o-1);

Then you can replace the result with extent.

str.replace(result, extent);

answered Mar 6, 2017 at 11:26

CaptainHere

6886 silver badges14 bronze badges

Comments

Farzin Kanzi · Accepted Answer · 2017-03-06 11:35:13Z

0

Its better your image has an id to access that, Or we can access to the element (image) by it's index in parent. For example if your image is the first element of its parent0 div id="dropzone1":

var myImage = document.getElementById("dropzone1").children[0];
var oldSrc = myImage.src;
var newboundingBox = "NEW BOUNDING BOX";
var srcArray = oldSrc.split('BBOX=');
srcArray[1] = newboundingBox;
var newSrc = srcArray.join('BBOX=');


myImage.src = newSrc ;

edited Mar 6, 2017 at 11:35

answered Mar 6, 2017 at 11:20

Farzin Kanzi

3,4532 gold badges23 silver badges25 bronze badges

Collectives™ on Stack Overflow

Replace rear part of image source string with different parameter

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related