Как заменить строки на javascript?

Question

У меня есть эта функция:

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

Как вы знаете .Надеть() преобразовать первое появление, как заменить более одного смайлика внутри текста? Как изменить эту функцию?

спасибо!

Answer 1

Вы можете перевести каждую строку смайликов для глобальной регулярного выражения, которое заменит все вхождения при использовании с Струнные # заменить метод:

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', 
//... 

Вы должны быть осторожны, о экранирования специальных символов в текст смайликов.

Answer 2

maerics' answer - довольно небольшое изменение в вашей существующей функции, которая должна делать трюк. Если текст, который вы делаете в этих заменах, большой, вы можете подумать о переворачивании вещей на их голове и использовании чередования регулярных выражений и функции замены.

Regex чередований выглядеть следующим образом: /A|B|C/, который говорит движок регулярных выражений, чтобы выглядеть или B или C. Функция вы даете String#replace получает текст соответствия в качестве аргумента, так что он может затем посмотреть вверх соответствующая замена в карте:

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

это позволяет вам только петлю через строку один раз и создать одну строку замены, а не зацикливание через него для каждого смайлика и построения нескольких промежуточных строк.

Для небольших фрагментов текста это не имеет значения, и сложность (сохранение каждого смайлика в двух разных местах) может не стоить того, но для больших текстов это может быть.

Answer 3

Другим решением является создание RegExp с модификатором «g» для каждой строки. И так как эта функция может выполняться более одного раза номинальной PageLoad, вы должны создать emt и регэкспы только один раз:

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

})(); 

Вот демо: http://jsfiddle.net/gjfzf/2/