Replace text with smilies

Subscribe to Replace text with smilies 5 posts, 2 voices

itsjareds Scriptwright

I'm creating a script that will replace text smilies like ;) :) :D etc.

It's working fine, but each time a page loads, it makes my browser freeze for about 5 seconds, then it loads all the smilies.

How can I make my script run faster without making my browser hang?

I have already converted the images to data:uris.


//--- Images ---

var tongue = "data:image/gifAAAAAAACa0GEQSU4YB1TWgIA ...";
var happy = "data:image/gif;base64,R0lGODlhEQARALMAABy+ASTTAiXWAi ...";
var lol = "data:image/gif;base64,R0lGODlhEQARALMAABy+ ...";
var wink = "data:image/gif;base64,R0lGODlhEQARALMAABy+AQCZACTTAi ...";
var sad = "data:image/gif;base64,R0lGODlhEQARALMAABy+AQAzACHLAiT ...";
var blush = "data:image/gif;base64,R0lGODlh ...";
var angry = "data:image/gif;base64,R0lGODlhEQARANUAAB7JAR ...";
var tears = "data:image/gif;base64,R0lGODlhEQARANUAA ...";
var stunned = "data:image/gif;base64,R0lGODlhEQARALMAACDIARawARWt ...";
var cool = "data:image/gif;base64,R0lGODlhEQARANUAAAAAAAAB ...";
var yawn = "data:image/gif;base64,R0lGODlhEQARANUAAAAAA ...";
var ill = "data:image/gif;base64,R0lGODlhEQARALMAAAAAAEqZAEudAE+iAFK ...";
var confused = "data:image/gif;base64,R0lGODlhEQARANUAAB7J ...";
var love = "data:image/gif;base64,R0lGODlhEQARANUAACXXA ...";
var mean = "data:image/gif;base64,R0lGODlhEQARANUAAAIAA ...";
var glad = "data:image/gif;base64,R0lGODlhEQARANUAAAI ...";

//--- Functions ---

function replaceSmilie(smilie, surl)
{
  var reptext = new RegExp(smilie, "gi");
  document.body.innerHTML = document.body.innerHTML.replace(reptext, "");
}

//--- Replace ---

/*
replaceSmilie(":\\)", happy);
replaceSmilie(";\\)", wink);
replaceSmilie(":P", tongue);
replaceSmilie(":\\(", sad);
replaceSmilie("8o", stunned);
replaceSmilie("80", stunned);
replaceSmilie(":o", stunned);
replaceSmilie("\\*cool\\*", cool);
replaceSmilie("\\*yawn\\*", yawn);
replaceSmilie("\\*ill\\*", "ill");
replaceSmilie("\\*angry\\*", angry);
replaceSmilie("\\*mad\\*", angry);
replaceSmilie("\\*sad\\*", tears);
replaceSmilie("\\*cry\\*", tears);
replaceSmilie("\\*tears\\*", tears);
replaceSmilie(":'\\(", tears);
replaceSmilie(":D", lol);
replaceSmilie("\\*blush\\*", blush);
replaceSmilie("\\*confused\\*", confused);
replaceSmilie("\\*love\\*", love);
replaceSmilie("\\*mean\\*", mean);
replaceSmilie("\\*glad\\*", glad);

 
Aquilax Scriptwright

Don't use the innerHTML! Look at this thread, there is a very good piece of code how to replace part of text with an element:

http://userscripts.org/forums/2/topics/2698

 
itsjareds Scriptwright

I can't figure out how to incorporate that into my script. How could I change it to adding an image instead?

 
itsjareds Scriptwright

Also, is there any way to do all the smilies at once, rather than the same function over and over?

 
Aquilax Scriptwright

replace:

with (t.parentNode.insertBefore(document.createElement('span'), t))
textContent = RegExp.$1,
style.cssText = 'color: #f00; font-size: 14pt;';

with

with (t.parentNode.insertBefore(document.createElement('img'), t))
src= "data:image/gif;base64,.....",
border="0px",
title="Smile";

Cross
Presentational HTML allowed.
Use <code> for inline code and <pre> for code blocks. Use &lt; and &gt; for literal < and >.
We help break paragraphs and link your links.
or cancel