Question

Im trying to replace the html of emoticon (the image) in to plain text. But I need normal HTML to show.

On here: http://jsfiddle.net/xk2VX/

Im using:

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

    for (var d = 0; d < a.length; d++) {
        var e = $(this).html(),
            f = e,
            g = f.indexOf(a[d]);
        while (g != -1) {
            f = f.replace(a[d], b[d]);
            g = f.indexOf(a[d]);
        }
        $(this).text(f);
    }
});​

And it returns: <div>Hi</div> :) :D :) :D;
but it should return: <div>Hi</div> :) :D :) :D;

I just don’t get why the < and > are being replaced with < and >

Is there a fix for this? Thanks in advance.

Answer 1

I notice that you’re calling .text() at the end of your for loop when you should be calling .html() instead, even though you correctly call .html() at the beginning:

    for (var d = 0; d < a.length; d++) {
        var e = $(this).html(),
            f = e,
            g = f.indexOf(a[d]);
        while (g != -1) {
            f = f.replace(a[d], b[d]);
            g = f.indexOf(a[d]);
        }
        $(this).text(f);
    }

.text() always converts HTML special characters to entities so they won’t be treated as markup, because it expects text, not HTML.