(function( $ ) {

    $.fn.htmlCodes = function(){
        var $this = this;
        var body = this.html();
        body = body.replace(':)', '&#9786;').replace('<3', '&#9829;');
        this.html(body);
    };  


})( jQuery );

I wrote this JQuery plugin so that it would change smiley faces to the smiley face entity. (and heart)

However, the heart doesn't work! For some reason the smiley works but heart doesn't.

(function( $ ) {

    $.fn.htmlCodes = function(){
        var $this = this;
        var body = this.html();
        body = body.replace(':)', '&#9786;').replace('<3', '&#9829;');
        this.html(body);
    };  


})( jQuery );

I wrote this JQuery plugin so that it would change smiley faces to the smiley face entity. (and heart)

However, the heart doesn't work! For some reason the smiley works but heart doesn't.

• javascript
• jquery
• html
• string

3 Answers 3

Works if you do this...

.replace('<3', '♥');

DEMO: http://jsfiddle/ZdJh5/

The .html() is giving you the HTML character code for the < symbol.

A < is a special character in HTML, which is what jQuery's html function will return, and so you need to replace < instead of <. Also, for a catch-all, you should use the /g flag:

(function( $ ) {

    $.fn.htmlCodes = function() {
        var $this = this;
        var body = this.html();
        body = body.replace(/:\)/g, '☺').replace(/<3/g, '♥');
        this.html(body);
    };  

})( jQuery );

Otherwise, only the first instance will be replaced. And a quick demo to show that it works. ☺

body = body.replace(':)', '☺').replace('<3', '♥');

It is possible < gets encoded as <.