Javascript 用图像代替情感

我目前正在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)
    );
});

函数（）
{
变量情感={
微笑：''，
眨眼：''，
可悲的是：，
愤怒地说：，
大微笑：''，
哭着说:",，
惊讶地说：，
tounge:“，
酷：''，
嘘：''，
困惑地说:",，
脸红:",，
吻：''，
嗯:",，
心：''，
病态：''，
讽刺的：''，
笑着说:"，
cantWatch:“，
天哪：''，
wtf:“”，
};
变量模式={
微笑：/：\）/gm，
眨眼：/；\）/gm，
悲伤：/：\（/gm，
愤怒：/>：o/gm，
大微笑：/：\D/gm，
哭泣：/：'\（/gm，
惊讶：/：o/gm，
tounge:/：p/gm，
酷：/B\）/gm，
嘘：/：x/gm，
困惑：/：s/gm，
脸红：/：\$/gm，
吻：/：*/gm，
嗯：/：\//总经理，
心脏：/\/gm，
笑：/=D/gm，
//cantWatch:/x_x/gm，
//omg:/o_o/gm，
//wtf:/o_o/gm，
}
//：）；）：（>：o:D:'（：o:pb）：x:s:$：*：/=dx_xo_o_0
$（'.messageBody、.commentBody'）。每个（函数（）{
var$content=$（此值）；
var html=$content.html（）；
$content.html(
替换（模式.微笑，情绪.微笑）。
替换（patterns.wink、emotions.wink）。
替换（模式。悲伤，情绪。悲伤）。
替换（模式、愤怒、情绪、愤怒）。
替换（模式。微笑，情绪。微笑）。
替换（模式、哭泣、情绪、哭泣）。
替换（模式、惊讶、情绪、惊讶）。
替换（patterns.tounge、emotions.tounge）。
替换（模式。酷，情绪。酷）。
替换（patterns.shh，emotions.shh）。
替换（模式。混乱，情绪。混乱）。
替换（模式。脸红，情绪。脸红）。
替换（模式、亲吻、情感、亲吻）。
替换（模式，嗯，情绪，嗯）。
替换（模式、心、情感、心）。
替换（模式。病态，情绪。病态）。
替换（模式。讽刺，情绪。讽刺）。
替换（模式、笑、情绪、笑）
);
});

不确定它是否有用

我看到你正在使用方法链接来替换所有的情感

这会消耗大量内存，因为新的html内容应该存储在下一个链的每个

replace（）

调用中的解释器堆栈中。这可能是它崩溃的原因

Chrome

使用类似的方法，您可以用更少的代码行获得相同的结果，而且效率更高：

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

---

您可以使用回调函数，因此只需调用

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

函数替换情感（html）
{
变量图标={
“：）”：“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”，
''：'images/16.gif'，
'=D'：'images/17.gif'
}
var搜索=“”；
用于（图标中的变量i）
search+=i.replace（/[-/\\^$*+？.（）\[\]{}]/g，'\\$&'）+'\'；//转义字符并添加'or'
search=search.substr（0，search.length-1）；//删除最后一个“或”
var replaceCallback=函数（匹配）{
返回“”；
}
返回html.replace（新的RegExp（搜索'gm'），replaceCallback）；
}
$（'.messageBody、.commentBody'）。每个（函数（）{
var$content=$（此值）；
var html=$content.html（）；
html=replaceMotations（html）
$content.html（html）；
});

---

我重新设计了

replaceEmotics

函数，使其更通用。我将jQuery放在外部，并让它为每个评论正文调用

replaceEmotics

。这样

replaceEmotics

就可以更容易地在其他地方重复使用。

在寻找一种更快的方法的同时，还应该寻找一种正确的方法例如，考虑你的解决方案会试图在元素的中间用属性值中的模式来粘贴<代码> >代码>标签。例如，代码> <代码>。只有2个地方可以取代情感，它们在包含文本的元素中没有HTML语法。我已经检查过了。嗨，谢谢。重构。我对正则表达式不太在行。代码生成的RegExp可以工作，但它与“：）”不匹配。有什么想法吗？这很奇怪。我刚刚测试了它，它正在替换

：）

很好。我使用了测试字符串“hello:）world”甚至“：）”，两者都被img代码替换。