Emotions com javascript?

Front-end JavaScript
#1

Estou tentando criar um sistema que faz um replace da String :slight_smile: por um emotion. Eu tenho uma var data que recebe o texto digitado por um usuário. Gostaria de um exemplo com array

Observação: consegui com PHP, mas, não com Javascript.

1 curtida
#2

Exemplo:

DEMO

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">';
}

Html

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

Resultado

DEMO

#3

Muito obrigado, com seu exemplo clareou muito para mim a forma do array, sou iniciante em javascript mas consegui fazer tudo direitinho, ajudou mesmo…Resolvi meu problema Obrigado!!

1 curtida
#4