JavaScript用图像替换文本问题

时间：2010-04-15 04:33:46

标签： javascript

我对JS非常陌生并拥有我正在尝试调整的代码。当我添加阵列的时候，我只用了几个项目来测试它并且它工作正常，现在它只是不起作用，我无法弄清楚它有什么问题！

基本上，我正在尝试使用网页上的图片更改卡片类型的每个实例

以下是代码：

    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;

}

任何帮助都将被理解为什么这个代码不起作用！

下面的最终代码（在我从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+'" />';
    }

    }

1 个答案:

答案 0 :(得分：1)

我测试时代码正常工作。它失败的一个可能原因是你有一些其他代码正在替换你设置的load事件，例如通过在body标签中设置onload属性。

替换整个正文内容可能与操纵内容的其他代码冲突。您最好只更换体内特定元素的内容。

我宁愿使用正则表达式来进行单个替换，而不是循环遍历字符串并一次进行一次替换。如果您替换特定元素中的内容而不是整个主体，这应该会有很大帮助。

大多数图片代码都是相同的，因此您不必为每张卡片重复这一点。图像应具有符合标准的alt属性，您可以使用原始文本。

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

}

编辑：

要替换特定元素的内容，您可以使用：

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

编辑2：

由于标签只包含卡片名称，您根本不需要更换，您只需获取名称并将图像放在其中：

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+'" />';
  }
}
相关问题
最新问题