Замена эмоций ASCII изображениями

Question

В настоящее время я использую jQuery для расширения Chrome, чтобы заменить смайлики ASCII изображением. Я использую регулярные выражения. Проблема в том, что, кажется, происходит сбой страниц, таких как Facebook. Есть ли более быстрый способ сделать то, что я пытаюсь сделать, чтобы страницы не зависали?

function replaceEmotions() 
{
var emotions = {
    smile: '<img src="' + chrome.extension.getURL('images/10.gif') + '" />',
    wink: '<img src="' + chrome.extension.getURL('images/4.gif') + '" />',
    sad: '<img src="' + chrome.extension.getURL('images/23.gif') + '" />',
    angry: '<img src="' + chrome.extension.getURL('images/1.gif') + '" />',
    bigsmile: '<img src="' + chrome.extension.getURL('images/2.gif') + '" />',
    crying: '<img src="' + chrome.extension.getURL('images/13.gif') + '" />',
    surprised: '<img src="' + chrome.extension.getURL('images/23.gif') + '" />',
    tounge: '<img src="' + chrome.extension.getURL('images/14.gif') + '" />',
    cool: '<img src="' + chrome.extension.getURL('images/24.gif') + '" />',
    shh: '<img src="' + chrome.extension.getURL('images/7.gif') + '" />',
    confused: '<img src="' + chrome.extension.getURL('images/40.gif') + '" />',
    blushing: '<img src="' + chrome.extension.getURL('images/9.gif') + '" />',
    kiss: '<img src="' + chrome.extension.getURL('images/6.gif') + '" />',
    huh: '<img src="' + chrome.extension.getURL('images/32.gif') + '" />',
    heart: '<img src="' + chrome.extension.getURL('images/38.gif') + '" />',
    sick: '<img src="' + chrome.extension.getURL('images/29.gif') + '" />',
    sarcastic: '<img src="' + chrome.extension.getURL('images/3.gif') + '" />',
    laughing: '<img src="' + chrome.extension.getURL('images/16.gif') + '" />',
    cantWatch: '<img src="' + chrome.extension.getURL('images/15.gif') + '" />',
    omg: '<img src="' + chrome.extension.getURL('images/32.gif') + '" />',
    wtf: '<img src="' + chrome.extension.getURL('images/18.gif') + '" />',
};

var patterns = {
    smile: /:\)/gm,
    wink: /;\)/gm,
    sad: /:\(/gm,
    angry: />:o/gm,
    bigsmile: /:\D/gm,
    crying: /:'\(/gm,
    surprised: /:o/gm,
    tounge: /:p/gm,
    cool: /B\)/gm,
    shh: /:x/gm,
    confused: /:s/gm,
    blushing: /:\$/gm,
    kiss: /:*/gm,
    huh: /:\//gm,
    heart: /\<3/gm,
    sick: /:\&/gm,
    sarcastic: /:\>/gm,
    laughing: /=D/gm,
    //cantWatch: /x_x/gm,
    //omg: /o_o/gm,
    //wtf: /o_O/gm,
}

// :) ;) :( >:o :D :'( :o :p B) :x :s :$ :* :/ <3 :& :> =D x_x o_o o_0

$('.messageBody, .commentBody').each(function() {
    var $content = $(this);
    var html = $content.html();

    $content.html(
        html.replace(patterns.smile, emotions.smile) . 
        replace(patterns.wink, emotions.wink) . 
        replace(patterns.sad, emotions.sad) . 
        replace(patterns.angry, emotions.angry) .
        replace(patterns.bigsmile, emotions.bigsmile) .  
        replace(patterns.crying, emotions.crying) . 
        replace(patterns.surprised, emotions.surprised) . 
        replace(patterns.tounge, emotions.tounge) . 
        replace(patterns.cool, emotions.cool) . 
        replace(patterns.shh, emotions.shh) . 
        replace(patterns.confused, emotions.confused) . 
        replace(patterns.blushing, emotions.blushing) . 
        replace(patterns.kiss, emotions.kiss) . 
        replace(patterns.huh, emotions.huh) . 
        replace(patterns.heart, emotions.heart) . 
        replace(patterns.sick, emotions.sick) . 
        replace(patterns.sarcastic, emotions.sarcastic) . 
        replace(patterns.laughing, emotions.laughing)
    );
});

Answer 1

Вы можете использовать функцию обратного вызова, поэтому вам нужно будет вызвать replace только один раз.

function replaceEmotions(html) 
{
    var icons = {
        ':)':'images/00.gif',
        ';)':'images/01.gif',
        ':(':'images/02.gif',
        '>:o':'images/03.gif',
        ':D':'images/04.gif',
        ':\'(':'images/05.gif',
        ':o':'images/06.gif',
        ':p':'images/07.gif',
        'B)':'images/08.gif',
        ':x':'images/09.gif',
        ':s':'images/10.gif',
        ':$':'images/11.gif',
        ':*':'images/12.gif',
        ':/':'images/13.gif',
        '<3':'images/14.gif',
        ':&':'images/15.gif',
        ':>':'images/16.gif',
        '=D':'images/17.gif'
        }
    var search = '';
    for(var i in icons)
      search += i.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')+'|';//escape characters and add 'or'
    search = search.substr(0, search.length-1);//remove last 'or'

    var replaceCallback = function(match) {
      return '<img src="' + chrome.extension.getURL(icons[match]) + '" />'; 
    }

    return html.replace(new RegExp(search, 'gm'), replaceCallback);
}

$('.messageBody, .commentBody').each(function() {
    var $content = $(this);
    var html = $content.html();
    html = replaceEmotions(html)
    $content.html(html);
});

Я решил, что функция replaceEmoticons будет более общей.Я помещаю jQuery снаружи и заставляю его вызывать replaceEmoticons для каждого комментария тела.Таким образом, replaceEmoticons может быть легко использован в другом месте.

Answer 2

Не уверен, поможет ли это.

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

Это занимает много памяти, так как новый HTML-контент должен храниться, скажем, в стеке интерпретатора при каждом вызове replace() для следующей цепочки. Это может быть причиной сбоя Chrome.

Используя что-то подобное, вы можете достичь того же результата с меньшим количеством строк кода, а также он более эффективен:

$html = $content.html();
$(patterns).each(function(key, value) {
    $html = $html.replace(value, emotions[key]);
});
$content.html($html);