JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="input" cols="50">Hello :-) How are you :p ?</textarea>
<p><button id="go">Go</button></p>
<textarea id="output" cols="50" rows="10"></textarea>

JavaScript

var emoticons = (function () {
    var url = "http://www.domain.it/images/smilies/";
    var emt = {
       ":D"  : 'icon_e_biggrin.gif',
       ":-D" : 'icon_e_biggrin.gif',       
       ":)"  : 'icon_e_smile.gif',
       ":-)" : 'icon_e_smile.gif',       
       ";)"  : 'icon_e_wink.gif',
       "';-)" : 'icon_e_wink.gif',

       ":("  : 'icon_e_sad.gif',
       ":-(" : 'icon_e_sad.gif',
       ":o"  : 'icon_e_surprised.gif',
       ":?"  : 'icon_e_confused.gif',
       "8-)" : 'icon_cool.gif',

       ":x"  : 'icon_mad.gif',
       ":P"  : 'icon_razz.gif'
    };

    var patterns = [];
    for (smile in emt) {
        patterns.push([
            new RegExp(smile.replace(/([\(\)\[\]\{\}\.\?\^\$\|\-])/g, "\\$1"), "gi"),
            '<img src="' + url + emt[smile] + '" class="emoticons" />'
        ]); 
    }

    return function (text) {
        for(var i=0; i<patterns.length; i++) {
            text = text.replace(patterns[i][0], patterns[i][1]);
        }
        return text;
    }

})();

    Event.observe(window, "load", function() {
        $('go').observe('click', function () {
            $('output').value  = emoticons($('input').value);
        });
    });