JSFiddle - React, Tailwind, and code Playground

HTML

<div id="result">Hello there Paul :) How are you</div>

JavaScript

$.fn.emoji = function(){
        var keys = [':-D',':D',':-)',':)',';-)',';)',':-O',':o',':-P',':p',':-(',':(',':-S',':s',':-l',':l','B-)','B)','*-)','*)','8ol','8l'];
        for(var key in keys){
        	keys[key] = keys[key].replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
        }
        keys = '('+keys.join(')|(')+')';

        return this.each(function(){
           var regex = new RegExp('(' + keys + ')', 'g');
           $(this).html($(this).html().replace(regex, '<img />'));
        });
    };
    $('#result').emoji();