开发者

JavaScript replace text with images problem

开发者 https://www.devze.com 2022-12-27 12:17 出处：网络
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
相关专题：javascript

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/thu开发者_Go百科mb/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+'" />';
    }

    }

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

上一篇:

:下一篇

更多 问答 相关资讯：

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

    关注公众号

    热门标签

    图文推荐

    Delphi - Custom drawing a message list

    Delphi - Custom drawing a message list
    C++ header-only include pattern

    C++ header-only include pattern
    IE7 Margin Collapses Into Padding

    IE7 Margin Collapses Into Padding
    in CoffeeScript, how can I use a variable as a key in a hash?

    in CoffeeScript, how can I use a variable as a key in a hash?
    Interactive visualization of a graph in python [closed]

    Interactive visualization of a graph in python [closed]
    How to customise PHP MYSQL tables?

    How to customise PHP MYSQL tables?
    High quality, simple random password generator

    High quality, simple random password generator
    Image Recognition ApI in android

    Image Recognition ApI in android

    开发者开发者网给大家分享系统运维,大数据运维,云计算,编程开发技巧,路由交换,运维和开发相关的资讯及技术文章，同时StackOverflow中文社区，知识经验交流分享。

    法律声明：本站内容均为网友上传，网站举办方负责审核和监督，如存在版权或非法内容，欢迎举报，我们将尽快予以删除。邮箱：devze@qq.com

    Copyright © 2018-2020 开发者. All rights reserved. Powered by 开发者ICP备案号: 京ICP备10032868号-9