ansaurus

Question

JavaScript replace text with images problem

Answer 1

+1 A:

The code is working when I test it. One possible reasons why it would fail is that you have some other code that is replacing the load event that you set, for example by setting the onload attribute in the body tag.

Replacing the entire body content might conflict with other code that is manipulating the content. Preferrably you should only replace the content of specific elements inside the body.

I would rather use a regular expression to make a single replacement instead of looping through the strings and doing one replacement at a time. That should help a lot if you replace the content in specific elements instead of the entire body.

Most of the image tags are the same, so you don't have to repeat that for every card. The image should have an alt attribute to conform with the standards, you can use the original text for that.

window.onload = function(){
  var cardname = {
    'Ace of Hearts': '7/7c/Ornamental_h_a.svg/88px-Ornamental_h_a',
    '2 of Hearts': '7/7c/Ornamental_h_2.svg/88px-Ornamental_h_2',
    '3 of Hearts': '7/7c/Ornamental_h_3.svg/88px-Ornamental_h_3',
    '4 of Hearts': '7/7c/Ornamental_h_4.svg/88px-Ornamental_h_4',
    '5 of Hearts': '7/7c/Ornamental_h_5.svg/88px-Ornamental_h_5',
    '6 of Hearts': '7/7c/Ornamental_h_6.svg/88px-Ornamental_h_6',
    '7 of Hearts': '7/7c/Ornamental_h_7.svg/88px-Ornamental_h_7',
    '8 of Hearts': '7/7c/Ornamental_h_8.svg/88px-Ornamental_h_8',
    '9 of Hearts': '7/7c/Ornamental_h_9.svg/88px-Ornamental_h_9',
    '10 of Hearts': '9/91/Ornamental_h_10.svg/88px-Ornamental_h_10',
    'Jack of Hearts': '7/7c/Ornamental_h_j.svg/88px-Ornamental_h_j',
    'Queen of Hearts': '7/7c/Ornamental_h_q.svg/88px-Ornamental_h_q',
    'King of Hearts': '7/7c/Ornamental_h_k.svg/88px-Ornamental_h_k',
    'Ace of Spades': '7/7c/Ornamental_s_a.svg/88px-Ornamental_s_a',
    '2 of Spades': '7/7c/Ornamental_s_2.svg/88px-Ornamental_s_2',
    '3 of Spades': '7/7c/Ornamental_s_3.svg/88px-Ornamental_s_3',
    '4 of Spades': '7/7c/Ornamental_s_4.svg/88px-Ornamental_s_4',
    '5 of Spades': '7/7c/Ornamental_s_5.svg/88px-Ornamental_s_5',
    '6 of Spades': '7/7c/Ornamental_s_6.svg/88px-Ornamental_s_6',
    '7 of Spades': '7/7c/Ornamental_s_7.svg/88px-Ornamental_s_7',
    '8 of Spades': '7/7c/Ornamental_s_8.svg/88px-Ornamental_s_8',
    '9 of Spades': '7/7c/Ornamental_s_9.svg/88px-Ornamental_s_9',
    '10 of Spades': '7/7c/Ornamental_s_10.svg/88px-Ornamental_s_10',
    'Jack of Spades': '7/78/Ornamental_s_j.svg/88px-Ornamental_s_j',
    'Queen of Spades': '7/7c/Ornamental_s_q.svg/88px-Ornamental_s_q',
    'King of Spades': '7/7c/Ornamental_s_k.svg/88px-Ornamental_s_k',
    'Ace of Clubs': '7/7c/Ornamental_c_a.svg/88px-Ornamental_c_a',
    '2 of Clubs': '7/7c/Ornamental_c_2.svg/88px-Ornamental_c_2',
    '3 of Clubs': '7/7c/Ornamental_c_3.svg/88px-Ornamental_c_3',
    '4 of Clubs': '7/7c/Ornamental_c_4.svg/88px-Ornamental_c_4',
    '5 of Clubs': '7/7c/Ornamental_c_5.svg/88px-Ornamental_c_5',
    '6 of Clubs': '7/7c/Ornamental_c_6.svg/88px-Ornamental_c_6',
    '7 of Clubs': '7/7c/Ornamental_c_7.svg/88px-Ornamental_c_7',
    '8 of Clubs': '7/7c/Ornamental_c_8.svg/88px-Ornamental_c_8',
    '9 of Clubs': '7/7c/Ornamental_c_9.svg/88px-Ornamental_c_9',
    '10 of Clubs': '7/7c/Ornamental_c_10.svg/88px-Ornamental_c_10',
    'Jack of Clubs': '7/7c/Ornamental_c_j.svg/88px-Ornamental_c_j',
    'Queen of Clubs': '7/7c/Ornamental_c_q.svg/88px-Ornamental_c_q',
    'King of Clubs': '7/7c/Ornamental_c_k.svg/88px-Ornamental_c_k',
    'Ace of Diamonds': '7/7c/Ornamental_d_a.svg/88px-Ornamental_d_a',
    '2 of Diamonds': '7/7c/Ornamental_d_2.svg/88px-Ornamental_d_2', 
    '3 of Diamonds': '7/7c/Ornamental_d_3.svg/88px-Ornamental_d_3',
    '4 of Diamonds': '7/7c/Ornamental_d_4.svg/88px-Ornamental_d_4',
    '5 of Diamonds': '7/7c/Ornamental_d_5.svg/88px-Ornamental_d_5',
    '6 of Diamonds': '7/7c/Ornamental_d_6.svg/88px-Ornamental_d_6',
    '7 of Diamonds': '7/7c/Ornamental_d_7.svg/88px-Ornamental_d_7',
    '8 of Diamonds': '7/7c/Ornamental_d_8.svg/88px-Ornamental_d_8',
    '9 of Diamonds': '7/7c/Ornamental_d_9.svg/88px-Ornamental_d_9',
    '10 of Diamonds': '7/7c/Ornamental_d_10.svg/88px-Ornamental_d_10',
    'Jack of Diamonds': '7/7c/Ornamental_d_j.svg/88px-Ornamental_d_j',
    'Queen of Diamonds': '7/7c/Ornamental_d_q.svg/88px-Ornamental_d_q',
    'King of Diamonds': '7/7c/Ornamental_d_k.svg/88px-Ornamental_d_k'
  };

  document.body.innerHTML = document.body.innerHTML.replace(
    /((?:Ace|[2-9]|10|Jack|Queen|King) of (?:Hearts|Spades|Clubs|Diamonds))/g,
    function(m){
      return '<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/'+cardname[m]+'.svg.png" alt="'+m+'" />';
    }
  );

}

Edit:

To replace the contents of specific elements, you can for example use:

var elements = document.getElementsByTagName('DIV');
for (var i=0; i<elements.length; i++) {
  elements[i].innerHTML = elements[i].innerHTML.replace( ...same as above... );
}

Edit 2:

As the tags only contains the card name, you don't need the replacement at all, you can just get the name and put the image in it's place:

var elements = document.getElementsByTagName('LI');
for (var i=0; i<elements.length; i++) {
  if (elements[i].className && elements[i].className == 'card') {
    var name = elements[i].innerHTML;
    var img = cardname[name];
    if (typeof(img) == "undefined") {
      img = "8/89/Back07.svg/88px-Back07";
    }
    elements[i].innerHTML = '<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/'+img+'.svg.png" alt="'+name+'" />';
  }
}

Guffa 2010-04-15 05:57:15

well this works fine! Thank you so much.. I wonder why my script wasn't working properly. Now how do I put that in using getElementsByClassName('card') (each card name is <li class=card>cardname</li>and how would I use similar to "getElementsByClassName" but for IE? Thank you in advance for your further help!

Amit Malhotra 2010-04-15 07:14:09

@Amit: I added an example on how to replace the contents of several elements above. You can replace the getElementsBytagName call with any method that returns an array of elements.

Guffa 2010-04-15 07:35:25

Thanks Guffa, will try that out. Thank you for all your assistance into this.

Amit Malhotra 2010-04-15 07:46:15

Hi Guffa, nothing happened on the page when I did that and error console said element.innerHtml is not defined. I tried to do alert(document.getElementsByClassName('card').innerHtml); to see what it returns and this only returned "undefined". I also tried alert(document.getElementsByTagName('card').innerHtml); and I got the same "undefined".

Amit Malhotra 2010-04-15 20:46:15

I got it to work using Robert Nyman's getElementByClassName ... I'm posting the proper code that it took for me to get it to work below.

Amit Malhotra 2010-04-15 22:18:09

var elements = getElementsByClassName('card');for (var i=0; i<elements.length; i++){ var html = elements[i].innerHTML; html = html.replace( /((?:Ace|[2-9]|10|Jack|Queen|King) of (?:Hearts|Spades|Clubs|Clbus|Diamonds))/g, function(m){ return '<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/'+cardname[m]+'.svg.png" alt="'+m+'" />'; } ); elements[i].innerHTML = html;}my last question is, lets say the card name was spelled wrong and I want to replace it with a card-down picture, how would I add that in?

Amit Malhotra 2010-04-15 22:19:16

I guess what would help would be to add an "else" type in function(m) where if it is not part of the pattern, replace it with http://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Back07.svg/88px-Back07.svg.png

Amit Malhotra 2010-04-15 22:29:10

@Amit: Javascript is case sensetive, so it's innerHTML, not innerHtml. Sorry for the typo. Replacing cards that are spelled wrong would be tricky, as you have to define every possible misspelling that you want to handle. Unless of course the elements only contains a card name, in which case the entire exercise of replacing text is rather pointless...

Guffa 2010-04-16 00:28:12

Hi Guffa, the element <li class="card"> only contains cardname the way they are listed in the variable cardname. The exercise is to replace every single card name within that li class with an appropriate image and if the card name is not part of the list, then replace it with a card facing down image. Thanks for the innerHTML correction. I figured that out later when I corrected the code and used innerHTML only.

Amit Malhotra 2010-04-16 03:52:09

@Amit: I see. Then the replace is not needed at all, just get the card name and put the image in the element. I added some code that should do that above.

Guffa 2010-04-16 05:23:38

Hey Guffa -- I adapted your edited code to my needs and that is just PERFECT! It does the job and then some. Beautiful. I really appreciate all your assistance, thank you so much for the help. I edited my initial question to include my final code that I used. Thank you!

Amit Malhotra 2010-04-16 15:46:54

ansaurus

tags:

views:

answers:

JavaScript replace text with images problem

Edit:

Edit 2:

related questions