如何使用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()，虽然））