javascriptphpjqueryunicodeemoticons

How to print unicode emoticons in javascript / jquery


I'm creating a chat room using Javascript/jQuery, PHP and Websockets. I want to support Unicode emoticons. I have a DIV with emoticons and, when user click in one of them, the emoticon is inserted in an input box. Simple.

User press "enter" and the text is sent to PHP. But PHP can't understand the emoticon (shows "??"), so I did a function in Javascript to convert to \uXXXX format (4-bytes) before submit to PHP.

Example:

1) User submits "test๐Ÿ˜€test"

2) Javascript converts to "test\uD83D\uDE00test" (function below) - If I go to Chrome console and type "test\uD83D\uDE00test" it shows "test๐Ÿ˜€test" correctly, so, the converted string is correct.

3) Submit the string to PHP: "test\uD83D\uDE00test"

4) PHP sends to Websocket that will only append the string into a DIV, something like $('#chat').append(d), where "d" (received from socket.io object) contains "test\uD83D\uDE00test".

But it shows the string "test\uD83D\uDE00test"... I want to show the emoticon.

Where is my error?


Function to convert emoticons to \u format: scan all chars and modify only the non-ascii ones.

function ChatUCode(t) {
 S='';
 for (a=0;a<t.length;a++) {
  if (t.charCodeAt(a)>255) {
   S+='\\u'+('0000'+t.charCodeAt(a).toString(16)).substr(-4,4).toUpperCase();
  } else {
   S+=t.charAt(a);
  }
 }
 return S;
}

Solution

  • Found a solution, thanks to @cegfault idea.

    Sending the string to JSON.parse function, it will show the emoticons correctly. But I had to escape the string to JSON format.

    $('#chat').append(JSON.parse('"'+d+'"'));
    

    Another way, not so secure, is the same idea but using eval() function, between quotes too.