title: JavaScript replace text with images problem
body: <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>