Forum Moderators: open
I'd like to create another directory that has images of the same name, and then have the browser change the path to point to those images.
Let's say our server spits this out at me: <img src="/images/weather/weather_icons/set_2/08.gif">
How could I change it to say: <img src="/images/shore/weather_icons/08.gif">
This seems simple, but regex is a bit out of my league. Can you help?
<img src="/images/weather/weather_icons/set_2/08.gif">
and you want to convert it to:
src="/images/shore/weather_icons/08.gif">
You could just parse out the "/" character to get each piece of the path.
var pathArray = src.split("/");
Then just reconstruct the string using only the values you want.
var srcString = "/" + pathArray[0] + "/" + "shore" + "/" + pathArray[2] + "/" + pathArray[4];
That's assuming your string will always be in that format.
I'd still like to see the regex as well if anybody doesn't mind.
simply do this:
var x = '<img src="/images/weather/weather_icons/set_2/08.gif">';
var y = x.replace("/images/weather/","/images/shore/");
var z = y.replace("/set_2","");
however, if the set can be any number between 0-9, the you could use this:
var z = y.replace(/set_[0-9]\//,"");
if the set can be any number [0-10*x] (more then 1 digit) you could use this:
var z = y.replace(/set_[0-9]+\//,"");
If the paths are more complex, give some more examples.
- JS
The full markup that the system gives me on an image is this:
<img src=http://www.domain.com/images/weather/weather_icons/set_2/08.gif width=64 height=46 alt="OVERCAST" border=0>
I'm now thinking I'd like to repurpose this as a css background image for an inline style, with this output:
url(/images/shore/weather_icons/08.jpg)
OK, please bear with me now...
This is the actual code that would be on the page if we didn't run this...
<div class="whatever" style="background: url(<img src=http://www.domain.com/images/weather/weather_icons/set_2/08.gif width=64 height=46 alt="OVERCAST" border=0>);">
I know that the CSS there doesn't work, but I want to convert that to this:
<div class="whatever" style="background: url(/images/shore/weather_icons/08.gif);">
This isn't too farfetched, is it?
I was thinking I might as well go one better while I'm at it with this...The full markup that the system gives me on an image is this:
<img src=http://www.domain.com/images/weather/weather_icons/set_2/08.gif width=64 height=46 alt="OVERCAST" border=0>
I'm now thinking I'd like to repurpose this as a css background image for an inline style, with this output:
url(/images/shore/weather_icons/08.jpg)
OK, please bear with me now...
This is the actual code that would be on the page if we didn't run this...
<div class="whatever" style="background: url(<img src=http://www.domain.com/images/weather/weather_icons/set_2/08.gif width=64 height=46 alt="OVERCAST" border=0>);">
I know that the CSS there doesn't work, but I want to convert that to this:
<div class="whatever" style="background: url(/images/shore/weather_icons/08.gif);">
This isn't too farfetched, is it?
Of course not!
if nothing else if differant, you could do something like this:
var x = '<img src=http://www.domain.com/images/weather/weather_icons/set_2/08.gif width=64 height=46 alt="OVERCAST" border=0>';
//change weather to shore
var y = x.replace("/images/weather/","/images/shore/");
//remove set_x+
var z = y.replace(/set_[0-9]+\//,"");
//find "src=blabla" and store everything after it (up to a space)
var geturl = new RegExp(/src=([^ ]+)/i);
//run the regex on z and return the stored result
var url = geturl.exec(z)[1];
//now you just need to remove the domain.
//if it is always going to be the same then:
url = url.replace("http://www.domain.com","");
//if it could be differant domains:
url = url.replace(/http:\/\/[^\/]+/i,"");
//BAM, theres your url. now just set the background property of your element:
document.getElementById("someelement").style.background = "url("+url+")";
- JS
I added this...
var ext = '.gif';
var newext = ext.replace(".gif",".jpg");
Is this even close to being right?
OK, we're getting very close! One last piece remains... I'd also like to switch .gif to .jpg. I tried some stuff but I couldn't quite get it. I think the part I'm having trouble with is tacking it back on.I added this...
var ext = '.gif';
var newext = ext.replace(".gif",".jpg");Is this even close to being right?
Yes, that could work, but you'd have to get the extestion out of the url, then tack it back on...
why remove it at all? You could just do this:
url = url.replace(".gif",".jpg");
- JS
I have one last question for now...
Right now, I'm working with this off of a private development server, and we have this set in the script:
var x = '<img src=http://whatever.com/images/weather/weather_icons/set_2/08.gif width=64 height=46 alt="OVERCAST" border=0>';
When I publish this to the actual server, I'm concerned that it may stop working, since it will be on a different domain (and the tool that originally inserts that image will be pulling it from that different server). Is there a way I can compensate for this?
<script type="text/javascript">
function weatherImg() {
var x = '<img src=http://njo.dev.advance.net/images/weather/weather_icons/set_2/08.gif width=64 height=46 alt="OVERCAST" border=0>';
//change weather to shore
var y = x.replace("/images/weather/weather_icons/set_2/","/images/shore/weather_icons/");
//remove set_x+
var z = y.replace(/set_[0-9]+\//,"");
//find "src=blabla" and store everything after it (up to a space)
var geturl = new RegExp(/src=([^ ]+)/i);
//run the regex on z and return the stored result
var url = geturl.exec(z)[1];
// remove domain
url = url.replace(/http:\/\/[^\/]+/i,"");
url = url.replace(".gif",".jpg");
// set the background property of your element:
document.getElementById("weatherbox").style.background = "url("+url+") no-repeat";
}
</script>
So if x is in a loop and is changed each time to a differant image name, all the same replace strings will work since they just grab the x string and only remove whats not wanted(<img...) Everything that remains will include the changing domain/filename.
Hope that makes sense.
- JS
The one with 08.gif works, the one with 07.gif does not.
Changing var x in the script to 07 makes it work, but then it displays 07.jpg as the background, even when the image is 08.gif.
What I'm looking to do is if the image is 08.gif, then make the background 08.jpg... if the image is 07.gif, the background should be 07.jpg
Right now, no matter what the image is, it's always inserting the image from var x in the script
Well I tested it by including two instances, one with 07.gif, where I just copied and changed the code that the tool actually gives me, and the original, which on this server, always gives me 08.gif.The one with 08.gif works, the one with 07.gif does not.
Changing var x in the script to 07 makes it work, but then it displays 07.jpg as the background, even when the image is 08.gif.
What I'm looking to do is if the image is 08.gif, then make the background 08.jpg... if the image is 07.gif, the background should be 07.jpg
Right now, no matter what the image is, it's always inserting the image from var x in the script
all the expressions are run on x, so x needs to be changed to whatever image your currently on...
So how are you calling your function? How does it know how/when to change x?
- JS
The domain portion of x changes based on the server it's running on. I could compensate by changing it to always check for the live server, but then I'd have no way of testing.
Would it be possible to have something like this in x?
[[any...] domain here]/images/weather/weather_icons/set_2/[any value here].gif
x changes with the weather. That might sound like a joke, but it's serious. It can be anything from 01.gif to 44.gif, with a few missing for some unknown reason.The domain portion of x changes based on the server it's running on. I could compensate by changing it to always check for the live server, but then I'd have no way of testing.
Would it be possible to have something like this in x?
[[any...] domain here]/images/weather/weather_icons/set_2/[any value here].gif
It will already work like that, but you still have to change x to get the proper image name as the background image...
send x as an arg...
function weatherImg(x) {
...
}
weatherImg('<img src="http://www.blabla.com/08.gif">');
then you can send whatever image path, and it will change the background accordingly
- JS
