如何使用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.gif http://www.joshuarey.com/ransom/e/3.gif http://www.joshuarey.com/ransom/h/8.gif http://www.joshuarey.com/ransom/a/13.gif http://www.joshuarey.com/ransom/v/5.gif http://www.joshuarey.com/ransom/e/15.gif http://www.joshuarey.com/ransom/y/1.gif http://www.joshuarey.com/ransom/o/8.gif http://www.joshuarey.com/ransom/u/5.gif http://www.joshuarey.com/ransom/r/3.gif http://www.joshuarey.com/ransom/d/4.gif http://www.joshuarey.com/ransom/o/4.gif http://www.joshuarey.com/ransom/g/2.gif

Answer 2

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

示例结果：

这是一个简短的解决方案，如果标点字符存在于文本中，您还需要使用标点字符的图像。由于你正在使用车牌，这应该不是问题。

感谢@Nick向我介绍http://dummyimage.com，我已经设置了自己的演示：

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

Answer 3

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 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('');
});

可以通过在映射函数中返回NULL来过滤掉字符。

（Demo - with dummy images（无理由使用$.map()））