JavaScript replace text with images problem
<p>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!! </p>

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

<p>Here's the code:</p>

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

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

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

}
</code></pre>

<p>any help would be appreciated to figure out why this code is not working!</p>

<p><strong>Final Code Below (after all the help I got from Guffa)</strong></p>

<pre><code>/*
    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&lt;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&lt;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 === "*" &amp;&amp; elm.all)? elm.all : elm.getElementsByTagName(tag),
                    current,
                    returnElements = [],
                    match;
                for(var k=0, kl=classes.length; k&lt;kl; k+=1){
                    classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
                }
                for(var l=0, ll=elements.length; l&lt;ll; l+=1){
                    current = elements[l];
                    match = false;
                    for(var m=0, ml=classesToCheck.length; m&lt;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&lt;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 '&lt;img src="http://upload.wikimedia.org/wikipedia/commons/thumb/'+cardname[m]+'.svg.png" alt="'+m+'" /&gt;';
        }
        );
        elements[i].innerHTML = html;
    }
    */

    for (var i=0; i&lt;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 = '&lt;img src="http://upload.wikimedia.org/wikipedia/commons/thumb/'+img+'.svg.png" alt="'+name+'" /&gt;';
    }

    }
</code></pre>
