JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    Hi :smile:!<br/>
    And :grin: and :joy:!</br>
    Haha!
</div>
<br />
<button id="emoji">Emojies!</button>

CSS

textarea {
    height: 300px;
    width: 300px;
}

JavaScript

var emojies = ["smile", "smiley", "grin", "joy"];
var emojiRegex = new RegExp(":("+ emojies.join("|") +"):","g");

$.fn.toEmoji = function(){
    return this.each(function() {
        this.innerHTML = this.innerHTML.replace(emojiRegex,function(fullmatch,match){
            return '<span class="emoji '+match.toLowerCase()+'"></span>';
        });                
    });
};

//And use like
$(document).ready(function(){
    $('#emoji').on('click', function() {
        $('div').toEmoji();
    });
    //$(".content div").toEmoji();
});