Jquery emoticon script only finds first occurrence of smiley

Question

I am running a pretty basic jQuery emoticon script to change smiley text into images. This works great but only appears to work on the first occurrence of a smily. so if i write 2 x smileys that are the same, it only changes one into an image.

See fiddle: http://jsfiddle.net/t6vaH/

here is the JS

jQuery.fn.emoticons = function(icon_folder) {
/* emoticons is the folder where the emoticons are stored*/
var icon_folder = icon_folder || "../../../../images/forum/emoticons";
//var settings = jQuery.extend({emoticons: "emoticons"}, options);
/* keys are the emoticons
 * values are the ways of writing the emoticon
 *
 * for each emoticons should be an image with filename
 * 'face-emoticon.png'
 * so for example, if we want to add a cow emoticon
 * we add "cow" : Array("(C)") to emotes
 * and an image called 'face-cow.png' under the emoticons folder   
 */
var emotes = {"smile": Array(":-)",":)","=]","=)"),
              "sad": Array(":-(","=(",":[",":<"),
              "wink": Array(";-)",";)",";]","*)"),
              "grin": Array(":D","=D","XD","BD","8D","xD"),
              "surprise": Array(":O","=O",":-O","=-O"),
              "devilish": Array("(6)"),
              "angel": Array("(A)"),
              "crying": Array(":'(",":'-("),
              "plain": Array(":|"),
              "smile-big": Array(":o)"),
              "glasses": Array("8)","8-)"),
              "kiss": Array("(K)",":-*"),
              "monkey": Array("(M)")};

/* Replaces all ocurrences of emoticons in the given html with images
 */
function emoticons(html){
    for(var emoticon in emotes){
        for(var i = 0; i < emotes[emoticon].length; i++){
            /* css class of images is emoticonimg for styling them*/
            html = html.replace(emotes[emoticon][i],"<img src=\""+icon_folder+"/face-"+emoticon+".png\" class=\"emoticonimg\" alt=\""+emotes[emoticon][i]+"\"/>","g");
        }
    }
    return html;
}
return this.each(function(){
    $(this).html(emoticons($(this).html()));
});
};

Whats the best way to repair this function to work for every occurrence of a smiley so i can repeat them?

Thanks

Answer 1

Javascript replace is well known for replacing only the first occurence of the substring. You will need to use regex to achieve what you want.

var emotes = {
                "angel": Array(/\(A\)/g)
             };

The g in the regex options specifies you want to match all occurences of the pattern.