JQuery를 사용하여 DIV에 포함 된 문자를 바꾸고 이미지로 바꾸려면 어떻게해야합니까?

Question

div.number-plate의 일반 텍스트를 모든 문자 (하나씩)의 이미지로 대체하는 방법이 있는지 궁금합니다.

V332LAE

사 : 나는 감사

Answer 1

이 @AndyE이 규정 때문에 http://dummyimage.com에 저를 도입 @Nick하는

덕분에, 나는 내 자신의 데모를 설정 한 코드 골프 공을 여기에서 찾으십시오. 다음과 같이 정규식을 사용하여 모든 체이서를 이미지로 바꿀 수 있습니다.

$("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); 

샘플 번호판, 어떤 도움을 크게 감사 JQuery와

을 사용하고 있습니다 mple 결과 :

그것의 그들이 당신의 텍스트에 존재하는 경우도 구두점 문자에 대한 이미지를 필요가있는 짧고 간단한 솔루션입니다. 번호판을 가지고 일하기 때문에 문제가되지 않습니다. 이 같은

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

당신이 $.map()이 사용될 수 각 문자를 변환 (또는 비 alnums를 필터링)해야하는 경우 :

$('.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()를 사용하는)