Search
Sign in with
Sign up | Sign in

Find and replace in Javascript

Last response: in Applications
Share

Hello people, I have this function:
  1. function flip_image() {
  2. 	var zoomed_image = document.getElementById('zoomed_image').src;
  3. 	var zoomed_link = document.getElementById('zoomed_link').href;
  4. 	if (zoomed_image.search("-back") > 0) {
  5. 		zoomed_image.replace(".jpg","-back.jpg");
  6. 		zoomed_link.replace(".jpg","-back.jpg");
  7. 	} else {
  8. 		zoomed_image.replace("back","");
  9. 		zoomed_link.replace("back","");
  10. 	}
  11. }

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

More about : find replace javascript

Register or log in to remove
Related ressources
Ask the community

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.

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script type="text/javascript">
  5. function flip_image() {
  6.     if (document.getElementById('zoomed_image').src.search("-back")) {
  7.         document.getElementById('zoomed_image').src.replace("back","");
  8.         document.getElementById('zoomed_link').href.replace("back","");
  9.     } else {
  10.         document.getElementById('zoomed_image').src.replace(".jpg","-back.jpg");
  11.         document.getElementById('zoomed_link').href.replace(".jpg","-back.jpg");
  12.     }
  13. }
  14. </script>
  15. </head>
  16. <body>
  17. <a onclick="flip_image()" href="#">test</a>
  18. <a href="<a href="http://justjamie.scsmarketing.net/images/gallery/menswear/coats/zoom/01.jpg" rel="nofollow" target="_blank">http://justjamie.scsmarketing.net/images/gallery/menswe...</a>" id="zoomed_link">
  19. 	<img src="<a href="http://justjamie.scsmarketing.net/images/gallery/menswear/coats/large/01.jpg" rel="nofollow" target="_blank">http://justjamie.scsmarketing.net/images/gallery/menswe...</a>"  id="zoomed_image"/>
  20. </a>
  21. </body>
  22. </html>


Still no effect... :-(

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.

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

  1. <!DOCTYPE html>
    

  2. <html>
    

  3. <head>
    

  4. <script type="text/javascript">
    

  5. function flip_image() {
    

  6. 	var zoomed_image = document.getElementById('zoomed_image').src;
    

  7. 	var zoomed_link = document.getElementById('zoomed_link').href;
    

  8.     if (zoomed_image.search("-back") > 0) {
    

  9.         document.getElementById('zoomed_image').src = zoomed_image.replace("-back","");
    

  10.         document.getElementById('zoomed_link').href = zoomed_link.replace("-back","");
    

  11.     } else {
    

  12.         document.getElementById('zoomed_image').src = zoomed_image.replace(".jpg","-back.jpg");
    

  13.         document.getElementById('zoomed_link').href = zoomed_link.replace(".jpg","-back.jpg");
    

  14.     }
    

  15. }
    

  16. </script>
    

  17. </head>
    

  18. <body>
    

  19. <a onclick="flip_image()" href="#">test</a>
    

  20. <a href="<a href="http://justjamie.scsmarketing.net/images/gallery/menswear/coats/zoom/01.jpg" rel="nofollow" target="_blank">http://justjamie.scsmarketing.net/images/gallery/menswe...</a>" id="zoomed_link">
    

  21. 	<img src="<a href="http://justjamie.scsmarketing.net/images/gallery/menswear/coats/large/01.jpg" rel="nofollow" target="_blank">http://justjamie.scsmarketing.net/images/gallery/menswe...</a>"  id="zoomed_image"/>
    

  22. </a>
    

  23. </body>
    

  24. </html>

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 :-)
Programming Expert

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:

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


or:

  1. 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.

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.
Register or log in to remove
 
Ask the community
Read discussions in other Applications categories
!