Sign in with
Sign up | Sign in
Your question

Find and replace in Javascript

Last response: in Apps General Discussion
Share
November 13, 2012 2:12:23 PM

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?
November 13, 2012 4:19:51 PM

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.
Related resources
November 13, 2012 6:16:10 PM

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.
November 13, 2012 6:32:22 PM

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="http://justjamie.scsmarketing.net/images/gallery/menswear/coats/zoom/01.jpg" id="zoomed_link">
  19. <img src="http://justjamie.scsmarketing.net/images/gallery/menswear/coats/large/01.jpg" id="zoomed_image"/>
  20. </a>
  21. </body>
  22. </html>


Still no effect... :-(
November 13, 2012 6:43:24 PM

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.
November 13, 2012 7:27:38 PM

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="http://justjamie.scsmarketing.net/images/gallery/menswear/coats/zoom/01.jpg" id="zoomed_link">
  21. <img src="http://justjamie.scsmarketing.net/images/gallery/menswear/coats/large/01.jpg" id="zoomed_image"/>
  22. </a>
  23. </body>
  24. </html>
November 13, 2012 7:34:42 PM

Don't do 0. Strings are character arrays that start at 0. -1 is the "doesn't exist" condition.
November 13, 2012 9:18:13 PM

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 :-)
a b L Programming
November 15, 2012 8:50:08 AM

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.
November 15, 2012 9:12:38 AM

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