JavaScript replace text with images problem

Question

I'm extremely new to JS and have this code that I'm trying to tweak. WHen I was adding the array, I had tested it with only a couple of items and it was working fine, now it just doesn't work, and I can't figure out what is wrong with it!!

Basically, I'm trying to change every instance of a card type with an image on a webpage

Here's the code:

    window.onload = function(){
 var cardname = new Array();
 cardname[0] = "Ace of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_a.svg/88px-Ornamental_h_a.svg.png' />";
 cardname[1] = "2 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_2.svg/88px-Ornamental_h_2.svg.png' />";
 cardname[2] = "3 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_3.svg/88px-Ornamental_h_3.svg.png' />";
 cardname[3] = "4 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_4.svg/88px-Ornamental_h_4.svg.png' />";
 cardname[4] = "5 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_5.svg/88px-Ornamental_h_5.svg.png' />";
 cardname[5] = "6 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_6.svg/88px-Ornamental_h_6.svg.png' />";
 cardname[6] = "7 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_7.svg/88px-Ornamental_h_7.svg.png' />";
 cardname[7] = "8 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_8.svg/88px-Ornamental_h_8.svg.png' />";
 cardname[8] = "9 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_9.svg/88px-Ornamental_h_9.svg.png' />";
 cardname[9] = "10 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Ornamental_h_10.svg/88px-Ornamental_h_10.svg.png' />";
 cardname[10] = "Jack of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_j.svg/88px-Ornamental_h_j.svg.png' />";
 cardname[11] = "Queen of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_q.svg/88px-Ornamental_h_q.svg.png' />";
 cardname[12] = "King of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_k.svg/88px-Ornamental_h_k.svg.png' />";
 cardname[13] = "Ace of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_a.svg/88px-Ornamental_s_a.svg.png' />";
 cardname[14] = "2 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_2.svg/88px-Ornamental_s_2.svg.png' />";
 cardname[15] = "3 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_3.svg/88px-Ornamental_s_3.svg.png' />";
 cardname[16] = "4 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_4.svg/88px-Ornamental_s_4.svg.png' />";
 cardname[17] = "5 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_5.svg/88px-Ornamental_s_5.svg.png' />";
 cardname[18] = "6 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_6.svg/88px-Ornamental_s_6.svg.png' />";
 cardname[19] = "7 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_7.svg/88px-Ornamental_s_7.svg.png' />";
 cardname[20] = "8 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_8.svg/88px-Ornamental_s_8.svg.png' />";
 cardname[21] = "9 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_9.svg/88px-Ornamental_s_9.svg.png' />";
 cardname[22] = "10 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_10.svg/88px-Ornamental_s_10.svg.png' />";
 cardname[23] = "Jack of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Ornamental_s_j.svg/88px-Ornamental_s_j.svg.png' />";
 cardname[24] = "Queen of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_q.svg/88px-Ornamental_s_q.svg.png' />";
 cardname[25] = "King of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_k.svg/88px-Ornamental_s_k.svg.png' />";
 cardname[26] = "Ace of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_a.svg/88px-Ornamental_c_a.svg.png' />";
 cardname[27] = "2 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_2.svg/88px-Ornamental_c_2.svg.png' />";
 cardname[28] = "3 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_3.svg/88px-Ornamental_c_3.svg.png' />";
 cardname[29] = "4 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_4.svg/88px-Ornamental_c_4.svg.png' />";
 cardname[30] = "5 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_5.svg/88px-Ornamental_c_5.svg.png' />";
 cardname[31] = "6 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_6.svg/88px-Ornamental_c_6.svg.png' />";
 cardname[32] = "7 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_7.svg/88px-Ornamental_c_7.svg.png' />";
 cardname[33] = "8 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_8.svg/88px-Ornamental_c_8.svg.png' />";
 cardname[34] = "9 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_9.svg/88px-Ornamental_c_9.svg.png' />";
 cardname[35] = "10 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_10.svg/88px-Ornamental_c_10.svg.png' />";
 cardname[36] = "Jack of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_j.svg/88px-Ornamental_c_j.svg.png' />";
 cardname[37] = "Queen of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_q.svg/88px-Ornamental_c_q.svg.png' />";
 cardname[38] = "King of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_k.svg/88px-Ornamental_c_k.svg.png' />";
 cardname[39] = "Ace of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_a.svg/88px-Ornamental_d_a.svg.png' />";
 cardname[40] = "2 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_2.svg/88px-Ornamental_d_2.svg.png' />"; 
 cardname[41] = "3 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_3.svg/88px-Ornamental_d_3.svg.png' />";
 cardname[42] = "4 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_4.svg/88px-Ornamental_d_4.svg.png' />";
 cardname[43] = "5 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_5.svg/88px-Ornamental_d_5.svg.png' />";
 cardname[44] = "6 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_6.svg/88px-Ornamental_d_6.svg.png' />";
 cardname[45] = "7 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_7.svg/88px-Ornamental_d_7.svg.png' />";
 cardname[46] = "8 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_8.svg/88px-Ornamental_d_8.svg.png' />";
 cardname[47] = "9 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_9.svg/88px-Ornamental_d_9.svg.png' />";
 cardname[48] = "10 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_10.svg/88px-Ornamental_d_10.svg.png' />";
 cardname[49] = "Jack of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_j.svg/88px-Ornamental_d_j.svg.png' />";
 cardname[50] = "Queen of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_q.svg/88px-Ornamental_d_q.svg.png' />";
 cardname[51] = "King of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_k.svg/88px-Ornamental_d_k.svg.png' />";

 var j, k, findit, part, page, repl;
 var page = document.body.innerHTML;
 for(var i=0; i<cardname.length; i++){
  part = cardname[i].split("^");
  findit = part[0];
  repl = part[1];

  while (page.indexOf(findit) >=0){
   var j = page.indexOf(findit);
   var k = findit.length;
   page = page.substr(0,j) + repl + page.substr(j+k);
  }
 }
   document.body.innerHTML = page;

}

any help would be appreciated to figure out why this code is not working!

Final Code Below (after all the help I got from Guffa)

/*
    Developed by Robert Nyman, http://www.robertnyman.com
    Code/licensing: http://code.google.com/p/getelementsbyclassname/
*/     
window.onload=function(){

        var getElementsByClassName = function (className, tag, elm){
        if (document.getElementsByClassName) {
            getElementsByClassName = function (className, tag, elm) {
                elm = elm || document;
                var elements = elm.getElementsByClassName(className),
                    nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,
                    returnElements = [],
                    current;
                for(var i=0, il=elements.length; i<il; i+=1){
                    current = elements[i];
                    if(!nodeName || nodeName.test(current.nodeName)) {
                        returnElements.push(current);
                    }
                }
                return returnElements;
            };
        }
        else if (document.evaluate) {
            getElementsByClassName = function (className, tag, elm) {
                tag = tag || "*";
                elm = elm || document;
                var classes = className.split(" "),
                    classesToCheck = "",
                    xhtmlNamespace = "http://www.w3.org/1999/xhtml",
                    namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
                    returnElements = [],
                    elements,
                    node;
                for(var j=0, jl=classes.length; j<jl; j+=1){
                    classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
                }
                try {
                    elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
                }
                catch (e) {
                    elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
                }
                while ((node = elements.iterateNext())) {
                    returnElements.push(node);
                }
                return returnElements;
            };
        }
        else {
            getElementsByClassName = function (className, tag, elm) {
                tag = tag || "*";
                elm = elm || document;
                var classes = className.split(" "),
                    classesToCheck = [],
                    elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
                    current,
                    returnElements = [],
                    match;
                for(var k=0, kl=classes.length; k<kl; k+=1){
                    classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
                }
                for(var l=0, ll=elements.length; l<ll; l+=1){
                    current = elements[l];
                    match = false;
                    for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
                        match = classesToCheck[m].test(current.className);
                        if (!match) {
                            break;
                        }
                    }
                    if (match) {
                        returnElements.push(current);
                    }
                }
                return returnElements;
            };
        }
        return getElementsByClassName(className, tag, elm);
    };

      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'
      };

    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;
    }
    */

    for (var i=0; i<elements.length; i++){
    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+'" />';
    }

    }

by saying it doesn't work., do you mean to say that there is no output or do you get the wrong one? — ZX12R
– ZX12R, Commented Apr 15, 2010 at 4:39
I know the code is cumbersome, but lets say I wanted to edit this code. That each card type is in an <li> on the webpage and the <li> has its own class called "card". How would you simplify the above using getElementsByClassName('card'). And considering that would not work in IE, one could probably use if(document.getElementsByClassName) ... then do the getELementsByCLassName subroutine, if not, do the other one .. (getElementsByTagName) ?? Any help about that would really be appreciated as well! — Amit Malhotra
– Amit Malhotra, Commented Apr 15, 2010 at 4:40
hi ZX, I don't get any output on the page, page remains the same.. the card text wherever appearing should have been changed to the images, but it doesn't change. — Amit Malhotra
– Amit Malhotra, Commented Apr 15, 2010 at 4:41
Try an alert(page) after all replacements are done. Debugging with Firebug can also help. Also, your data structure could just be an object literal with the substrings as property names and the image URLs as values: var card_images = { "Ace of Hearts": "7/7c/Ornamental_h_a.svg/88px-Ornamental_h_a.svg.png", "2 of Hearts": "...", ... — Ateş Göral
– Ateş Göral, Commented Apr 15, 2010 at 5:43
Thanks Ates, the response below by Guffa was pretty much as you suggested and it seemed to have worked. Though I still can't figure out what was wrong with my code :) Now just looking to see how I can put this using "getElementsByClassName('card')" as per my comment to the answer below. — Amit Malhotra
– Amit Malhotra, Commented Apr 15, 2010 at 7:15

Guffa · Accepted Answer · 2010-04-16 05:20:56Z

1

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+'" />';
  }
}

edited Apr 16, 2010 at 5:20

answered Apr 15, 2010 at 5:57

Guffa

703k112 gold badges760 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Amit Malhotra Over a year ago

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!

Guffa Over a year ago

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

Amit Malhotra Over a year ago

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

Amit Malhotra Over a year ago

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 Over a year ago

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.

|

Collectives™ on Stack Overflow

JavaScript replace text with images problem

1 Answer 1

Edit:

Edit 2:

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit:

Edit 2:

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related