Question

I have some JavaScript which replaces smiley symbols with their corresponding images in my blog.
So symbols like :) or :( are replaced by proper <img> tags.

Currently there are around 50 smiley symbols that can be used. But in any page only a few of them will be used obviously.
The script has lines of the form element.replace(smileyRegex, <imgTags>) for each smiley.
The problem is that, due to a large number of these regex matching lines, the script causes a slight delay after the page is loaded.

I’m thinking of the following method to make this more efficient: To call replace with a large regex which matches all smiley symbols as first argument, and a function which chooses proper image from an array as the second argument.
Will this usage be more efficient than a number of separate replace calls that may or may not match?

Answer 1

Having one regex match all occurences of smileys would be a lot more efficient. That is because it would only be one iteration through the source, instead of one interation per smiley. Then have an appropriate hashtable / object with smiley -> img src would be an efficient lookup:

var smileyImgMap = {
    ":)" : "happysmiley.png",
    ":(" : "sadsmiley.png"
};

Then use it like this:

var smileyImg = smileyImgMap[":)"];

I think you get the idea.