Find and replace in Javascript

sam_p_lay · Nov 13, 2012

Hello people, I have this function:

Code:

function flip_image() {
	var zoomed_image = document.getElementById('zoomed_image').src;
	var zoomed_link = document.getElementById('zoomed_link').href;
	if (zoomed_image.search("-back") > 0) {
		zoomed_image.replace(".jpg","-back.jpg");
		zoomed_link.replace(".jpg","-back.jpg");
	} else {
		zoomed_image.replace("back","");
		zoomed_link.replace("back","");
	}
}

Basically, if the src/href contains '-back', remove it. If it doesn't, add it. What I am doing wrong here?

majestic1805 · Nov 13, 2012

I think you want to look at indexOf instead of search. I don't see it anywhere on the list of methods for strings.

http

/www.w3schools.com/jsref/jsref_obj_string.asp

sam_p_lay · Nov 13, 2012

majestic1805 :

Isn't it that one about halfway down under 'String Object Methods'? It was actually w3schools I found the function on

I did spot indexOf also though, maybe it's worth a shot.

majestic1805 · Nov 13, 2012

I'm dork, haha.

sam_p_lay · Nov 13, 2012

majestic1805 :

Hehe me too

With Javascript I'm usually just missing something obvious. I'm not a Javascript developer at all (not even close) so I pretty much just muddle through... PHP is so much more helpful with the error reporting.

sam_p_lay · Nov 13, 2012

Removed the variables to boil it down as basic as possible...

Code:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function flip_image() {
    if (document.getElementById('zoomed_image').src.search("-back")) {
        document.getElementById('zoomed_image').src.replace("back","");
        document.getElementById('zoomed_link').href.replace("back","");
    } else {
        document.getElementById('zoomed_image').src.replace(".jpg","-back.jpg");
        document.getElementById('zoomed_link').href.replace(".jpg","-back.jpg");
    }
}
</script>
</head>
<body>
<a onclick="flip_image()" href="#">test</a>
<a href="http://justjamie.scsmarketing.net/images/gallery/menswear/coats/zoom/01.jpg" id="zoomed_link">
	<img src="http://justjamie.scsmarketing.net/images/gallery/menswear/coats/large/01.jpg"  id="zoomed_image"/>
</a>
</body>
</html>

Still no effect... :-(

majestic1805 · Nov 13, 2012

2 things...

1) First, your search line in if contains no test. As long as it doesn't fail it will always return true. Add a check for " > -1."

2) JavaScript is a functional language and operates on returned values. So, your calls to replace do nothing except return a string. You need to set those attributes to that returned value rather than simply calling the replace function.

sam_p_lay · Nov 13, 2012

Ah thanks dude, appreciate it! :-D Here's the working solution:

Code:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function flip_image() {
	var zoomed_image = document.getElementById('zoomed_image').src;
	var zoomed_link = document.getElementById('zoomed_link').href;
    if (zoomed_image.search("-back") > 0) {
        document.getElementById('zoomed_image').src = zoomed_image.replace("-back","");
        document.getElementById('zoomed_link').href = zoomed_link.replace("-back","");
    } else {
        document.getElementById('zoomed_image').src = zoomed_image.replace(".jpg","-back.jpg");
        document.getElementById('zoomed_link').href = zoomed_link.replace(".jpg","-back.jpg");
    }
}
</script>
</head>
<body>
<a onclick="flip_image()" href="#">test</a>
<a href="http://justjamie.scsmarketing.net/images/gallery/menswear/coats/zoom/01.jpg" id="zoomed_link">
	<img src="http://justjamie.scsmarketing.net/images/gallery/menswear/coats/large/01.jpg"  id="zoomed_image"/>
</a>
</body>
</html>

majestic1805 · Nov 13, 2012

Don't do 0. Strings are character arrays that start at 0. -1 is the "doesn't exist" condition.

sam_p_lay · Nov 14, 2012

majestic1805 :

That's weird because it's working correctly with 0... -1 is what it returned though when I echoed it. Wasn't sure how to write it though - as == -1 it looks like the minus would work as the math operator? And in quotes wouldn't it be treated as a string? I think in PHP I could get away with doing that, but the slightest mistake with Javascript and it just seems to break. Thanks for your help with this, really appreciate it

randomizer · Nov 15, 2012

It's working correctly because "-back" is never at the start of the filename. Search() returns the position of the matching substring, and it can be anywhere from index 0 onwards. If it doesn't exist, the method returns -1.

Essentially, you will want to change your test to be:

Code:

zoomed_image.search("-back" ) >= 0

or:

Code:

zoomed_image.search("-back" ) > -1

Both are equivalent and it's more down to preference which you choose to use. I personally prefer to use the latter because -1 stands out as an obvious (at least in common JS methods) sentinel value.

Note that you should also probably use the indexOf method rather than search. Search actually takes a regular expression and tries to match it, whereas indexOf looks for a plain string. Since you are clearly looking for the index of (see, they named it well) a string and not some pattern, you should use the right method for the job. Also, while it probably doesn't matter in your case, indexOf is a much, much faster method than search.

sam_p_lay · Nov 15, 2012

Thanks to both of you for the advice, I hugely appreciate it

It's been educational for me, also learnt about timeOut functions too (I needed this to execute after something else did) so I've learnt a lot. Will probably have forgotten it by the next time I need to write some Javascript but you never know!

Randomizer/majestic1805, if you post my solution with that correction then I can select that as best answer (don't think I can choose myself as best answer?). Then randomizer can feel free to rename the thread with [Solved] or let me know how to do that.

Search

Find and replace in Javascript

sam_p_lay

Distinguished

majestic1805

Honorable

sam_p_lay

Distinguished

majestic1805

Honorable

sam_p_lay

Distinguished

sam_p_lay

Distinguished

majestic1805

Honorable

sam_p_lay

Distinguished

majestic1805

Honorable

sam_p_lay

Distinguished

randomizer

Distinguished

sam_p_lay

Distinguished

Similar threads

TRENDING THREADS

Share this page