Analyzing emoji input with Twemoji
So I installed the code to demonstrate my problem: http://codepen.io/anon/pen/yNYzXx
var emojiString = "I \u2764\uFE0F emoji!";
var parsedString = twemoji.parse(emojiString);
$('#string-result').html(parsedString);
var parsedInput = twemoji.parse($('#emoji-input').val());
$('#input-result').html(parsedInput);
If I type "I \ u2764 \ uFE0F emoji!" in the input field and click "go". I expect the same result on both lines, instead of the input text not being parsed but a variable.
source to share
You probably typed I \u2764\uFE0F emoji!
in the input field. When you type this into the input field, you actually get a string "I \\u2764\\uFE0F emoji!"
instead of a string "I \u2764\uFE0F emoji!"
, notice the extra \
.
In your variable in a string literal "I \u2764\uFE0F emoji!"
, that \
in \u2764
is of particular importance, it is a symbol scape. Instead of representing a character, \
it actually indicates what \u2764
the Unicode code point is. The code points \u2764
and \uFE0F
together form the heart symbol. In other words, it "\u2764\uFE0F"
is a code that only represents one character.
When you type I \u2764\uFE0F emoji!
in the input field, you weren't typing a heart character, you were actually passing a normal character \
. Since it \
has special meaning, we represent it on a line like this \\
, so the line from the input field looks different.
So, basically, you've typed JavaScript code that represents the character you want to enter instead of the character itself. We can fix this by evaluating what you typed as it was JavaScript code. If you replace var parsedInput = twemoji.parse($('#emoji-input').val());
with var parsedInput = twemoji.parse(eval("'" + $('#emoji-input').val() + "'"));
, the code works as expected. Also, avoid using eval because it will run whatever is passed to it.
source to share