How to print unicode emoticons in javascript / jquery

Question

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;
}

Both jquery $(...).append('test\uD83D\uDE00test') and vanilla js [...].innerHTML += 'test\uD83D\uDE00test') seem to work appropriately. This seems to me to be a translation across the network. That is, whatever is coming from the websocket thinks the string needs the literal ` and u` and such. You may want to consider something like json-encoding and decoding, or some other method of encoding/decoding to prevent this issue (among other random issues from network translations) — cegfault
– cegfault, Commented Jan 23, 2019 at 22:34
Yeah @cegfault, I agree, but I did several tests about this too... the websocket is returning correctly if I only print the string using console.log(). But you gave me a good idea, process the string using Json functions. I'll try now. — Arvy
– Arvy, Commented Jan 23, 2019 at 22:38

Arvy · Accepted Answer · 2019-01-24 00:47:39Z

0

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.

answered Jan 24, 2019 at 0:47

Arvy

1,2322 gold badges18 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to print unicode emoticons in javascript / jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related