Emoticons doesn't work with multiple emoji in (Saferi and Chrome browser)

Question

I am trying to make a emoticon using jquery. But i have a problem with multiple emoji. I have created this demo from jsfiddle.net .

The jquery code is working fine with if user write different multiple emoji but if user write two or more smile like :):):):) then jquery code showing just first emoji other emoji will not showing. Anyone can help me here ?

JS

jQuery.fn.emoticons = function(icon_folder) {
    /* emoticons is the folder where the emoticons are stored*/
    var icon_folder = icon_folder || "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(":-(","=(",":[",":&lt;"),
                  "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=\"http://www.oobenn.com/"+icon_folder+"/face-"+emoticon+".png\" class=\"emoticonimg\" alt=\""+emotes[emoticon][i]+"\"/>","g");
            }
        }
        return html;
    }
    return this.each(function(){
        $(this).html(emoticons($(this).html()));
    });
};

$(document).ready(function(){
    $(".posted").emoticons();
});

Why is your issue? in your example, is work fine, all emoji appears yet :):):):):) — P. Frank, Dec 04 '15 at 14:48
@P.Frank Did you see the red text in demo page ? The problem is on there. — , Dec 04 '15 at 14:49
@P.Frank Can you show me screenshot. Because i have an error on there ? — , Dec 04 '15 at 14:50
@P.Frank please look at this screenshot [CLICK](https://scontent-frt3-1.xx.fbcdn.net/hphotos-xpf1/t31.0-8/12310079_209983382668162_2154144656596689137_o.jpg) — , Dec 04 '15 at 14:52
Yes, the flags in `replace` are not working in Chrome (deprecated), see my answer below — Finrod, Dec 04 '15 at 14:58

score 1 · Accepted Answer · edited May 23 '17 at 10:27

To do that, you will need regular expressions as the flags (your ,"g") in replace are deprecated and will not work on every browser (source).

So you need to create your regexp with your smiley code:

var re = new RegExp(emotes[emoticon][i], 'g');

But as your smiley codes has special characters, you need to escape them. To do that, I took a piece of code from this answer:

function escape(smiley){
  return smiley.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}

Finaly, you can use replace to replace all your smileys, even when there is several times the same smiley:

var escaped = escape(emotes[emoticon][i]);
var re = new RegExp(escaped, 'g');
html = html.replace(re,"<img src=\"http://www.oobenn.com/"+icon_folder+"/face-"+emoticon+".png\" class=\"emoticonimg\" alt=\""+emotes[emoticon][i]+"\"/>");

Working Demo

Thanks for your best answer. It is very good description for me and i understood what i am missing in the code. Thank you so much again. — , Dec 04 '15 at 15:04

Emoticons doesn't work with multiple emoji in (Saferi and Chrome browser)

1 Answers1