Замена изображений внутри тега «Код»

Question

Я пытаюсь заменить все изображения смайликов обычным текстом на этом jsfiddle:

http://jsfiddle.net/44mqG/4/

Как видите, я пытаюсь использовать:

$("code").each(function () {
    var a = ['<img class="smile" src="http://static.yamma.org/images/icons/smile.png">', '&lt;img class="laugh" src="http://static.yamma.org/images/icons/laugh.png"&gt;'],
        b = [":)", ":D"],
        inner = $(this).children('img').size();
    for (var d = 0; d < inner; d++) {

        var c = $(this).html();
        var e = c.replace(a[d], b[d]);
        $(this).text(e)
    }
});​

Но это заменяет только первый смайлик каждого изображения. Затем, после уже замененных смайликов, не замененные возвращают:

<img class="smile" src="http://static.yamma.org/images/icons/smile.png"> <img class="laugh" src="http://static.yamma.org/images/icons/laugh.png">

Я не понимаю, почему он добавляет & amp; lt;

Есть ли решение для этого? У кого-нибудь есть другая идея, как заменить некоторые смайлики в их обычный текст.

Answer 1

Чтобы ответить на последнюю часть вашего вопроса, касающуюся альтернативного подхода, могу я предложить вам:

var emotions = {
    'smile' : ':)',
    'laugh' : ':D'
};

var img = $('code img').each(
    function(){
        var s = this.src.split('/').pop(),
            emo = s.substring(0,s.lastIndexOf('.'));
        if (emo == 'laugh' || emo == 'smile'){
            console.log(emotions[emo]);
            $(this)
                .replaceWith('<span class="emotion">' + emotions[emo] + '</span>');
        }
    });​

http://jsfiddle.net/davidThomas/44mqG/8/

Answer 2

Вот ваш ответ:

$('img').each(function(){
    switch($(this).attr('class')){
        case "smile":
            $(this).replaceWith(':)');
            break;
        case "laugh":
            $(this).replaceWith(':D');
            break;
    }   
});

а вот и ДЕМО

Answer 3

Но это заменяет только первый смайлик каждого изображения

String.replace работает таким образом. Чтобы заменить все вхождения, вам нужно либо заменить на RegExp с включенным глобальным флагом (g), либо сделать это в цикле.

Не понимаю, почему добавляется & amp; lt;

Потому что вы получаете это в виде html (var c = $(this).html();) и записываете обратно как текст ($(this).text(e))

Answer 4

Вы пытаетесь заменить весь тег изображения или добавить текст смайлика в качестве текста тега изображения? Я не уверен, что второй вариант имеет большой смысл, но мне кажется, что ваш код делает. Вот код, который делает это: http://jsfiddle.net/44mqG/5/

Вот код, который заменяет весь тег новыми тегами span: http://jsfiddle.net/44mqG/6/