JSFiddle - React, Tailwind, and code Playground

by Taufik Nurrohman

HTML

<div id='emo_box'> :) :( :p :D :o ;) 8-) 8:) :/ :&#39;( 3:) O:) :* &lt;3 ^_^ -_- o.O O.o &gt;:o :v :3</div>

CSS

.emo {
    width:17px;
    height:16px;
    display:inline-block;
   ...

JavaScript

! function (e, a) {
    var l = a.querySelector("#emo_box"),
        sa = a.createElement("input");
    e.replaced = function (e, a) {
        var l = a,
            l = l.replace(/^(<br ?\/?>|&nbsp;)+/i, "").replace(/(<br ?\/?>)+(:|;|\^|=)/gi, "<br> $2").replace(/^(&nbsp;|<br ?\/?>| <br ?\/?>)+/gi, "").replace(/\s:\)+/g, " <span class='emo smile' title=' :)'></span>").replace(/\s:\(/g, " <span class='emo sad' title=' :('></span>").replace(/\s;\)/g, " <span class='emo ok' title=' ;)'></span>").replace(/\s:p/gi, " <span class='emo melet' title=' :p'></span>").replace(/\s:3/g, " <span class='emo wkwk' title=' :3'></span>").replace(/\s:v/g, " <span class='emo pacman' title=' :v'></span>").replace(/\s:D/g, " <span class='emo mrangas' title=' :D'></span>").replace(/\so.O/g, " <span class='emo ori' title=' o.O'></span>").replace(/\sO.o/g, " <span class='emo oka' title=' O.o'></span>").replace(/\s:o/g, " <span class='emo oo' title=' :o'></span>").replace(/\s:\//gi, " <span class='emo uu' title=' :/'></span>").replace(/\s:'\(/g, " <span class='emo nangis' title=' :&#39;('></span>").replace(/\s\^(\_|)\^/g, " <span class='emo imut' title=' ^_^'></span>").replace(/\s\-(\_|)\-/g, " <span class='emo lha' title=' -_-'></span>").replace(/\s&gt;:o/gi, " <span class='emo sepet' title=' &gt;:o'></span>").replace(/\s&lt;3/gi, " <span class='emo hati' title=' &lt;3'></span>").replace(/\s:\*/g, " <span class='emo kiss' title=' :*'></span>").replace(/\sO:\)/g, " <span class='emo apa' title=' O:)'></span>").replace(/\s3:\)/g, " <span class='emo jahat' title=' 3:)'></span>").replace(/\s8:\)/g, " <span class='emo kocoi' title=' 8:)'></span>").replace(/\s8-\)/g, " <span class='emo koco' title=' 8-)'></span>");
        e.innerHTML = l
    }, replaced(l, l.innerHTML);
    // Pakai `querySelectorAll`, lalu di-loop
    var r = a.querySelectorAll('.emo');
    for (var i = 0, len = r.length; i < len; ++i) {
        clickThatEmoticon(r[i]);
    }
    function clickThatEmoticon(elem) {
       ...