Sostituire un elenco di emoticon con le loro immagini

Question

Ho un array con:

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

poi ho un variabile con il testo.

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

e una variabile con l'url del sito

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

Come scrivere una funzione che sostituiscono i simboli con le loro immagini?

Il risultato <img> tag deve essere:

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

(devo concatenare il varible URL al nome dell'immagine).

Grazie davvero!

Answer 1

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

Answer 2

Un altro approccio:

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"/>" 

Edit:@pepkin88 fatto davvero un buon suggerimento, costruire l'espressione regolare in base ai nomi delle proprietà dell'oggetto emoticons.

Può essere fatto facilmente, ma dobbiamo sfuggire ai meta-caratteri se vogliamo che funzioni correttamente.

I motivi di escape sono memorizzati su un array, che viene utilizzato in seguito per creare l'espressione regolare utilizzando il costruttore RegExp, aggiungendo fondamentalmente tutti i modelli separati con il metacarattere |.

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

L'utilizzo di un'espressione regolare con un array di elementi di ricerca di ricerca funziona correttamente.

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