reemplazar una lista de emoticonos con sus imágenes

Question

tengo una matriz con:

emoticons = { 
    ':-)' : 'smile1.gif', 
    ':)' : 'smile2.gif', 
    ':D' : 'smile3.gif'  
} 

entonces tengo una variabile con el texto.

var text = 'this is a simple test :)'; 

y una variable con la url de la página web

var url = "http://www.domain.com/"; 

Cómo escribir una función que sustituir los símbolos con sus imágenes?

El resultado <img> etiqueta debe ser:

<img src="http://www.domain.com/simple2.gif" /> 

(que tienen para concatenar la varible url para el nombre de la imagen).

¡Te quiero mucho!

Answer 1

for (smile in emoticons) 
{ 
    text = text.replace(smile, '<img src="' + url + emoticons[smile] + '" />'); 
} 

Answer 2

Otro enfoque:

function replaceEmoticons(text) { 
    var emoticons = { 
    ':-)' : 'smile1.gif', 
    ':)' : 'smile2.gif', 
    ':D' : 'smile3.gif' 
    }, url = "http://www.domain.com/"; 
    // a simple regex to match the characters used in the emoticons 
    return text.replace(/[:\-)D]+/g, function (match) { 
    return typeof emoticons[match] != 'undefined' ? 
      '<img src="'+url+emoticons[match]+'"/>' : 
      match; 
    }); 
} 

replaceEmoticons('this is a simple test :)'); 
// "this is a simple test <img src="http://www.domain.com/smile2.gif"/>" 

Editar:@pepkin88 hizo una muy buena sugerencia, construir la expresión regular en base a los nombres de las propiedades del objeto emoticons.

Se puede hacer fácilmente, pero tenemos que escapar de los metacaracteres si queremos que esto funcione correctamente.

Los patrones de escape se almacenan en una matriz, que luego se usa para construir la expresión regular utilizando el constructor RegExp, básicamente uniendo todos los patrones separados con el metacarácter |.

function replaceEmoticons(text) { 
    var emoticons = { 
    ':-)' : 'smile1.gif', 
    ':)' : 'smile2.gif', 
    ':D' : 'smile3.gif', 
    ':-|' : 'smile4.gif' 
    }, url = "http://www.domain.com/", patterns = [], 
    metachars = /[[\]{}()*+?.\\|^$\-,&#\s]/g; 

    // build a regex pattern for each defined property 
    for (var i in emoticons) { 
    if (emoticons.hasOwnProperty(i)){ // escape metacharacters 
     patterns.push('('+i.replace(metachars, "\\$&")+')'); 
    } 
    } 

    // build the regular expression and replace 
    return text.replace(new RegExp(patterns.join('|'),'g'), function (match) { 
    return typeof emoticons[match] != 'undefined' ? 
      '<img src="'+url+emoticons[match]+'"/>' : 
      match; 
    }); 
} 

replaceEmoticons('this is a simple test :-) :-| :D :)'); 

Answer 3

El uso de una expresión regular con una matriz de elementos de reemplazo de búsqueda funciona bien.

var emotes = [ 
    [':\\\)', 'happy.png'], 
    [':\\\(', 'sad.png'] 
]; 

function applyEmotesFormat(body){ 
    for(var i = 0; i < emotes.length; i++){ 
     body = body.replace(new RegExp(emotes[i][0], 'gi'), '<img src="emotes/' + emotes[i][1] + '">'); 
    } 
    return body; 
}