JQuery заменить текст с изображения (для смайликов)

Question

Эти две строки кода работают отлично -

var html = $this.find('pre').html().replace(':mellow:','<img src="http://i2.ifrm.com/html/emoticons/mellow.gif">'); 
$this.find('pre').html(html); 

(Он находит строку: сочный: и заменяет его с конкретным изображением.)

Трудность У меня есть попытка превратить его во что-то, где мне не нужно повторять эти две строки кода 50 или 60 раз. (Я на том начальном этапе, когда вы в конечном итоге пишете сотни строк кода, когда вы могли бы сделать это в три раза.)

Как бы вы превратили это в нечто, что может обрабатывать несколько кодов эмоций (например: mellow :, lol :, и т. д.) и вычислите соответствующее изображение (которое будет иметь то же имя, что и код, минус: :).

Псевдо пример кода -

var emoCodes = [ 
    ':mellow:', ':lol:', ':ninja:' 
];   
var html = $this.find('pre').html().replace(+emoCodes+,'<img src="http://i2.ifrm.com/html/emoticons/+CorrespondingImage+.gif">'); 
$this.find('pre').html(html); 

Хорошо, спасибо.

Answer 1

Это следует сделать это:

var emoCodes = [ 
 
    ':mellow:', ':lol:', ':ninja:' 
 
]; 
 
var $this = $("body"); 
 

 
emoCodes.forEach(function(code) { 
 
    var image = '<img src="http://i2.ifrm.com/html/emoticons/' + code.replace(/:/g, "") + '.gif">'; 
 
    $this.find('pre').html(function(index, html) {  
 
    return html.replace(new RegExp(code, "g"), image); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<pre>:mellow::mellow::lol::ninja:</pre>

Answer 2

Вы на правильном пути с использованием массива, так как вам нужно искать как код смайликов и соответствующее изображение вы можете создать массив объектов:

var emoCodes = [ 
    {code: ':mellow:', img: '<img src="http://i2.ifrm.com/html/emoticons/mellow.gif">'}, 
    {code: ':lol:', img: '<img src="http://i2.ifrm.com/html/emoticons/lol.gif">' }, 
    {code: ':ninja:', img: '<img src="http://i2.ifrm.com/html/emoticons/ninja.gif">' } 
]; 

Затем цикл через массив претендует в code и img свойства:

for(var i=0: i<emoCodes.length; i++) { 
    var html = $this.find('pre').html().replace(RegExp(emoCodes[i].code,"g"),emoCodes[i].img); 
    $this.find('pre').html(html); 
} 

Этот метод позволяет иметь любой код применить к любому изображению, даже если code не встроен в это URL.