Find and replace in Javascript

Hello people, I have this function:

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?
11 answers Last reply
More about find replace javascript
  1. 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
  2. majestic1805 said:
    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


    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.
  3. I'm dork, haha.
  4. majestic1805 said:
    I'm dork, haha.


    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.
  5. Removed the variables to boil it down as basic as possible...

    
    <!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... :-(
  6. 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.
  7. Ah thanks dude, appreciate it! :-D Here's the working solution:

    
    <!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>
    
  8. Don't do 0. Strings are character arrays that start at 0. -1 is the "doesn't exist" condition.
  9. majestic1805 said:
    Don't do 0. Strings are character arrays that start at 0. -1 is the "doesn't exist" condition.


    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 :-)
  10. 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:

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


    or:

    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.
  11. 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.
Ask a new question

Read More

Programming Document Javascript Apps