Question

我目前正在Chrome扩展程序上使用jQuery来替换带有图像的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

不确定是否有帮助。

我看到你正在使用方法链来取代所有情绪。

这会消耗大量内存，因为新的html内容应该存储在每个replace()调用中的解释器堆栈中，用于下一个链。这可能是它崩溃的原因Chrome。

使用这样的东西，你可以用更少的代码行获得相同的结果，而且效率也更高：

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

Answer 2

您可以使用回调功能，因此您只需要拨打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放在外面，并为每个commentBody调用replaceEmoticons。这种方式replaceEmoticons可以更容易地在其他地方重复使用。

用图像替换ASCII情绪

2 个答案: