title: Replacing ASCII emotions with images
body: <p>I'm currently using jQuery on a Chrome extension to replace ASCII smilies with an image. I am using regular expressions. The problem is, it seems to crash pages like Facebook. Is there a quicker way to do what I'm trying to do to ensure pages don't crash?</p>
  
  <pre><code>function replaceEmotions() 
  {
  var emotions = {
      smile: '&lt;img src="' + chrome.extension.getURL('images/10.gif') + '" /&gt;',
      wink: '&lt;img src="' + chrome.extension.getURL('images/4.gif') + '" /&gt;',
      sad: '&lt;img src="' + chrome.extension.getURL('images/23.gif') + '" /&gt;',
      angry: '&lt;img src="' + chrome.extension.getURL('images/1.gif') + '" /&gt;',
      bigsmile: '&lt;img src="' + chrome.extension.getURL('images/2.gif') + '" /&gt;',
      crying: '&lt;img src="' + chrome.extension.getURL('images/13.gif') + '" /&gt;',
      surprised: '&lt;img src="' + chrome.extension.getURL('images/23.gif') + '" /&gt;',
      tounge: '&lt;img src="' + chrome.extension.getURL('images/14.gif') + '" /&gt;',
      cool: '&lt;img src="' + chrome.extension.getURL('images/24.gif') + '" /&gt;',
      shh: '&lt;img src="' + chrome.extension.getURL('images/7.gif') + '" /&gt;',
      confused: '&lt;img src="' + chrome.extension.getURL('images/40.gif') + '" /&gt;',
      blushing: '&lt;img src="' + chrome.extension.getURL('images/9.gif') + '" /&gt;',
      kiss: '&lt;img src="' + chrome.extension.getURL('images/6.gif') + '" /&gt;',
      huh: '&lt;img src="' + chrome.extension.getURL('images/32.gif') + '" /&gt;',
      heart: '&lt;img src="' + chrome.extension.getURL('images/38.gif') + '" /&gt;',
      sick: '&lt;img src="' + chrome.extension.getURL('images/29.gif') + '" /&gt;',
      sarcastic: '&lt;img src="' + chrome.extension.getURL('images/3.gif') + '" /&gt;',
      laughing: '&lt;img src="' + chrome.extension.getURL('images/16.gif') + '" /&gt;',
      cantWatch: '&lt;img src="' + chrome.extension.getURL('images/15.gif') + '" /&gt;',
      omg: '&lt;img src="' + chrome.extension.getURL('images/32.gif') + '" /&gt;',
      wtf: '&lt;img src="' + chrome.extension.getURL('images/18.gif') + '" /&gt;',
  };
  
  var patterns = {
      smile: /:\)/gm,
      wink: /;\)/gm,
      sad: /:\(/gm,
      angry: /&gt;: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: /\&lt;3/gm,
      sick: /:\&amp;/gm,
      sarcastic: /:\&gt;/gm,
      laughing: /=D/gm,
      //cantWatch: /x_x/gm,
      //omg: /o_o/gm,
      //wtf: /o_O/gm,
  }
  
  // :) ;) :( &gt;:o :D :'( :o :p B) :x :s :$ :* :/ &lt;3 :&amp; :&gt; =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)
      );
  });
  </code></pre>