Comment remplacer les chaînes avec javascript?

Question

J'ai cette fonction:

function emoticons(text){ 
    var url = "http://www.domain.it/images/smilies/"; 
    var emt = { 
     ":D" : 'icon_e_biggrin.gif', 
     ":-D" : 'icon_e_biggrin.gif',  
     ":)" : 'icon_e_smile.gif', 
     ":-)" : 'icon_e_smile.gif',  
     ";)" : 'icon_e_wink.gif', 
     "';-)" : 'icon_e_wink.gif', 

     ":(" : 'icon_e_sad.gif', 
     ":-(" : 'icon_e_sad.gif', 
     ":o" : 'icon_e_surprised.gif', 
     ":?" : 'icon_e_confused.gif', 
     "8-)" : 'icon_cool.gif', 

     ":x" : 'icon_mad.gif', 
     ":P" : 'icon_razz.gif' 
    }; 

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

    return (text); 
} 

Comme vous le savez .replace() convertir la première occurence, comment remplacer plus d'un émoticône dans le texte? Comment changer cette fonction?

Merci beaucoup!

Answer 1

Vous pouvez traduire chaque chaîne émoticône à une expression régulière globale, qui remplacera toutes les occurrences lorsqu'il est utilisé avec les # de chaîne de remplacement méthode:

function emoticons(text){ 
    var url = "http://www.domain.it/images/smilies/"; 
    var emt = { 
    /\:D/g: 'icon_e_biggrin.gif', 
    /\:\-D/g: 'icon_e_biggrin.gif', 
//... 

Vous devrez faire attention à l'échappement des caractères spéciaux dans la texte d'émoticône cependant.

Answer 2

maerics' answer est un changement assez petit à votre fonction existante qui devrait faire l'affaire. Si le texte dans lequel vous effectuez ces remplacements est important, vous pouvez envisager de retourner les choses sur leur tête et d'utiliser une alternance regex et une fonction de remplacement.

alternances Regex ressemblent à ceci: /A|B|C/, qui indique au moteur regex regarder un ou B ou C. La fonction que vous donnez à String#replace reçoit le texte correspondant comme argument, il peut alors rechercher la remplacement concerné sur une carte:

function emoticons(text){ 
    // The base URL of all our smilies 
    var url = "http://www.domain.it/images/smilies/"; 

    // A regex alternation that looks for all of them (be careful to use escapes 
    // where necessary) 
    var searchFor = /:D|:-D|:\)|:-\)|;\)|';-\)|:\(|:-\(|:o|:\?|8-\)|:x|:P/gi; 

    // A map mapping each smiley to its image 
    var map = { 
     ":D" : 'icon_e_biggrin.gif', // Capped version of the next 
     ":d" : 'icon_e_biggrin.gif', // Lower case version of the previous 
     ":-D" : 'icon_e_biggrin.gif', // Capped version of the next 
     ":-d" : 'icon_e_biggrin.gif', // Lower case version of the previous 
     ":)" : 'icon_e_smile.gif', 
     ":-)" : 'icon_e_smile.gif', 
     ";)" : 'icon_e_wink.gif', 
     "';-)" : 'icon_e_wink.gif', 

     ":(" : 'icon_e_sad.gif', 
     ":-(" : 'icon_e_sad.gif', 
     ":O" : 'icon_e_surprised.gif', // Capped version of the next 
     ":o" : 'icon_e_surprised.gif', // Lower case version of the previous 
     ":?" : 'icon_e_confused.gif', 
     "8-)" : 'icon_cool.gif', 

     ":X" : 'icon_mad.gif', // Capped version of the next 
     ":x" : 'icon_mad.gif', // Lower case version of the previous 
     ":P" : 'icon_razz.gif', // Capped version of the next 
     ":p" : 'icon_razz.gif' // Lower case version of the previous 
    }; 

    // Do the replacements 
    text = text.replace(searchFor, function(match) { 
     var rep; 

     // Look up this match to see if we have an image for it 
     rep = map[match]; 

     // If we do, return an `img` tag using that smiley icon; if not, there's 
     // a mis-match between our `searchFor` regex and our map of 
     // smilies, but handle it gracefully by returning the match unchanged. 
     return rep ? '<img src="' + url + rep + '" class="emoticons" />' : match; 
    }); 

    return (text); 
} 

cela vous permet de ne boucle à travers la chaîne une fois et de construire une seule chaîne de remplacement, plutôt que par une boucle pour chaque smiley et la construction de plusieurs chaînes intermédiaires.

Pour les petits morceaux de texte, cela ne sera pas important et la complexité (maintenir chaque smiley à deux endroits différents) ne vaut peut-être pas la peine, mais pour les textes volumineux, cela peut l'être.

Answer 3

Une autre solution consiste à créer un RegExp avec le modificateur "g" pour chaque chaîne. Et puisque cette fonction peut être exécuté plus d'une fois par pageload, vous devez créer emt et les regexps qu'une seule fois:

var emoticons = (function() { 
    var url = "http://www.domain.it/images/smilies/"; 
    var emt = { 
     ":D" : 'icon_e_biggrin.gif', 
     ":-D" : 'icon_e_biggrin.gif',  
     ":)" : 'icon_e_smile.gif', 
     ":-)" : 'icon_e_smile.gif',  
     ";)" : 'icon_e_wink.gif', 
     "';-)" : 'icon_e_wink.gif', 

     ":(" : 'icon_e_sad.gif', 
     ":-(" : 'icon_e_sad.gif', 
     ":o" : 'icon_e_surprised.gif', 
     ":?" : 'icon_e_confused.gif', 
     "8-)" : 'icon_cool.gif', 

     ":x" : 'icon_mad.gif', 
     ":P" : 'icon_razz.gif' 
    }; 

    var patterns = []; 
    for (smile in emt) { 
     patterns.push([ 
      // escaping string special characters by hand 
      // case-insensitive to match :p :d etc. 
      new RegExp(smile.replace(/([\(\)\[\]\{\}\.\?\^\$\|\-])/g, "\\$1"), "gi"), 
      '<img src="' + url + emt[smile] + '" class="emoticons" />' 
     ]); 
    } 

    // this is the function that will be referenced by the variable emoticons 
    return function (text) { 
     for(var i=0; i<patterns.length; i++) { 
      text = text.replace(patterns[i][0], patterns[i][1]); 
     } 
     return text; 
    } 

})(); 

Voici une démo: http://jsfiddle.net/gjfzf/2/