Wie ersetze ich ein Zeichen, das in einem DIV enthalten ist, und ersetzen Sie es durch ein Bild mit Jquery?

Question

Ich frage mich, ob es eine Möglichkeit gibt, Klartext in einem div.number-plate zu ersetzen, mit einem Bild für jedes Zeichen (eins nach dem anderen)? Ich benutze JQuery

Jede Hilfe wird sehr geschätzt, Dank

Answer 1

Seit @AndyE festgelegt den Code Golf Handschuh hier, können Sie eine Regex verwenden, um alle Chacters mit Bildern, wie folgt zu ersetzen:

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

You can test it out here.

---

Auch scheint es, Sie kein Erpresserbrief-Generator wollte, aber ich tat es! so here it is. Beispielergebnis:
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("")); 
}); 

(ungetestet)

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); 

Musternummernschild:

V332LAE

Sa mple Ergebnis:

Es ist eine kurze, einfache Lösung, in der Sie auch Bilder müssen für Interpunktionszeichen, wenn sie in Ihrem Text existieren. Da Sie mit Nummernschildern arbeiten, sollte das kein Problem sein.

Dank für die Einführung von mir http://dummyimage.com zu @ Nick, ich habe eine Demo von meinem eigenen einzurichten:

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

Answer 4

Etwas wie folgt aus:

$(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

Wenn Sie jedes Zeichen umwandeln müssen (oder ausfiltern nicht-alnums) die $.map() verwendet werden könnten:

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

Zeichen können herausgefiltert werden, indem 0 zurückgegeben wirdin der Mapping-Funktion.

(- with dummy images (kein Grund $.map() zu verwenden, obwohl))