JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" name="txt" id="txt" value="Renato :) :(">
<button type="button" id="btn" name="btn">Criar</button>
<span id="result"></span>

JavaScript

var emotions = [
	{id: ":)", path:"http://www.myiconfinder.com/uploads/iconsets/16-16-2e8758b3c3619afb94d5201cc7642c5c-emoticon.png"},
  {id: ":(", path:"http://www.myiconfinder.com/uploads/iconsets/16-16-f72535bdd6fcfb0cb471147e50c1b3d1-sad.png"}
];

var btn = document.getElementById("btn");
var doc = document.getElementById("txt");
var res = document.getElementById("result");

btn.addEventListener("click", function()
{
	res.innerHTML = replaceEmotion(doc.value);
});

var replaceEmotion = function(value)
{
  var values = value.split(" ");  
  value = "";
  for(var i = 0; i < values.length;i++)
  {  	
		if(values[i].substring(0,1)==":")
    {
    	 var c = 0;
       var s = true;
       while (c < emotions.length && s)
       {
       		if (emotions[c].id == values[i])
          {
             value = value + " " + tagImage(emotions[c].path);
             s = false;
          }
          c = c + 1;
       }
    }
    else 
    {
    	value = value + " " + values[i];
    }
  }
	return value;
}

var tagImage = function(value)
{
	return '<img src="' + value + '" border="0">';
}

console.log(emotions);