如何使用Jquery替換DIV中包含的字符，並用圖像替換？

Question

我想知道是否有一種方法可以替換div.number-plate中的純文本，併爲每個字符（逐個）顯示圖像？我使用JQuery

任何幫助是極大的讚賞，感謝

Answer 1

由於@AndyE規定這裏的代碼是高爾夫手套，你可以用正則表達式來替換所有的圖像，如下：

$("div.number-plate").html(function(i, h) { 
    return h.replace(/(.)/g, '<img src="images/char-$1.gif" />'); 
}); 

You can test it out here。

---

而且，它似乎你不想贖金筆記發電機，但我沒有！ so here it is。示例結果：
http://www.joshuarey.com/ransom/w/2.gifhttp://www.joshuarey.com/ransom/e/3.gif   http://www.joshuarey.com/ransom/h/8.gifhttp://www.joshuarey.com/ransom/a/13.gifhttp://www.joshuarey.com/ransom/v/5.gifhttp://www.joshuarey.com/ransom/e/15.gif   http://www.joshuarey.com/ransom/y/1.gifhttp://www.joshuarey.com/ransom/o/8.gifhttp://www.joshuarey.com/ransom/u/5.gifhttp://www.joshuarey.com/ransom/r/3.gifhttp://www.joshuarey.com/ransom/d/4.gifhttp://www.joshuarey.com/ransom/o/4.gifhttp://www.joshuarey.com/ransom/g/2.gif

Answer 2

var charMap = { 
    'A': 'A.gif', 'B': 'B.gif' // ... etc. 
} 

$("div.number-plate").each(function() { 
    var text = $(this).text(); // Assuming no HTML content 
    var out = []; 
    for (var i = 0, len = text.length; i < len; i++) { 
    var img= charMap[text.charAt(i)]; 
    if (img) out.push("<img src='" + img + "'>"); 
    } 
    $(this).html(out.join("")); 
}); 

（未經測試）

Answer 3

var div = $("div.number-plate"), 
    txt = div.text(), 
    pre = '<img src="images/char-', 
    suf = '.gif">', 
    result = pre + txt.split("").join(suf+pre) + suf; 

div.html(result); 

樣品號牌：

V332LAE

薩mple結果：

這是一個簡短的，簡單的解決方案中，你也會，如果他們在你的文本存在需要標點字符圖像。既然你在使用號碼牌，那不應該是個問題。

感謝@Nick我介紹給http://dummyimage.com，我已經設置了我自己的一個演示：

http://www.jsfiddle.net/aCdLR/

Answer 4

事情是這樣的：

$(document).ready(function() { 

    var str = $('div.number-plate').html(); 
    var output = ''; 

    for (i = 0; i < str.length; i++) { 
    var char = str.substr(i, 1); 
    output = output + '<img src="/images/characters/' + char + '.gif" />'; 
    } 

    $('div.number-plate').html(output);   
}); 

Answer 5

如果您需要轉換每個字符（或過濾掉非alnums）的$.map()可用於：

$('.number-plate').html(function(i, o) { 
    var imgs = $.map(o.split(''), function(c) { 
     return '<img src="images/' + c.toLowerCase() + '.png" />'; 
    }); 
    return imgs.join(''); 
}); 

可以通過返回0來過濾字符在映射函數中。

（ - with dummy images（沒有理由使用$.map()，雖然））