Làm thế nào để thay thế chuỗi bằng javascript?

Question

tôi có chức năng này:

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

Như bạn đã biết .replace() chuyển đổi sự xuất hiện đầu tiên, làm thế nào để thay thế hơn sau đó một biểu tượng cảm xúc bên trong văn bản? Làm thế nào để thay đổi chức năng này?

Cảm ơn bạn rất nhiều!

Answer 1

Bạn có thể dịch mỗi chuỗi biểu tượng cảm xúc để một biểu thức chính quy toàn cầu, mà sẽ thay thế tất cả các lần xuất hiện khi sử dụng với String # thay thế phương pháp:

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

Bạn sẽ phải cẩn thận về việc thoát ký tự đặc biệt trong văn bản biểu tượng cảm xúc.

Answer 2

maerics' answer là một thay đổi khá nhỏ đối với chức năng hiện tại của bạn nên thực hiện thủ thuật. Tuy nhiên, nếu văn bản bạn đang thực hiện các thay thế này là lớn, bạn có thể xem xét việc lật các thứ trên đầu và sử dụng phép thay thế regex và chức năng thay thế.

alternations Regex trông như thế này: /A|B|C/, kể về những động cơ regex để trông Một hay B hay C. Chức năng bạn cung cấp cho String#replace nhận được văn bản phù hợp như một cuộc tranh cãi, vì vậy nó sau đó có thể tra cứu thay thế có liên quan trong bản đồ:

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

Làm điều này cho phép bạn chỉ lặp lại chuỗi một lần và tạo một chuỗi thay thế duy nhất, thay vì lặp qua từng chuỗi và tạo nhiều chuỗi tạm thời.

Đối với các bit văn bản nhỏ thì không quan trọng và độ phức tạp (duy trì mỗi nụ cười ở hai vị trí khác nhau) có thể không đáng, nhưng đối với các văn bản lớn thì có thể.

Answer 3

Một giải pháp khác là tạo RegExp bằng công cụ sửa đổi "g" cho mỗi chuỗi. Và kể từ khi chức năng này có thể được chạy nhiều hơn một lần mệnh pageload, bạn nên tạo emt và regexps chỉ một lần:

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

})(); 

Đây là một bản demo: http://jsfiddle.net/gjfzf/2/