如何用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); 
} 

如你所知.replace（）转换的第一次出现，如何更换更多的则文本中的一个表情？如何改变这个功能？

非常感谢！

Answer 1

你可以每个表情字符串转换成一个全球性的正则表达式，使用String＃使用时将替换所有出现的替换方法：

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对您的现有功能应该做一个相当小的改变。如果你正在做这些替换的文本很大，那么你可能会考虑在他们的头上翻动东西，并使用正则表达式替换和替换函数。

交替的正则表达式是这样的：/A|B|C/，它告诉正则表达式引擎来寻找一个或乙或 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

另一种解决方案是为每个字符串创建一个带有“g”修饰符的RegExp。而且，由于该功能可运行超过一次面值页面加载更多，你应该创建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/