javascript - 使用 Twemoji 将输入解析为表情符号

Question

所以我在这里设置了一个代码笔来演示我的问题: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);

如果我输入文本“I\u2764\uFE0F emoji!”进入输入框并单击 go 我希望两行的结果相同，而不是输入文本未被解析但变量被解析。

Answer 1

您可能在输入字段中输入了 I\u2764\uFE0F emoji!。当您在输入字段中键入它时，您实际上得到的是字符串 "I\\u2764\\uFE0F emoji!" 而不是字符串 "I\u2764\uFE0F emoji!"，请注意额外的 \。

在您的变量中，在字符串文字 "I\u2764\uFE0F emoji!" 中，\ in \u2764 有一个特殊的意思是，它是一个 scape 字符。它不是表示字符 \，而是表示 \u2764 表示一个 Unicode 代码点。代码点 \u2764 和 \uFE0F 一起构成了心脏字符。换句话说，"\u2764\uFE0F" 是一个只代表一个字符的代码。

当您在输入字段中键入 I\u2764\uFE0F emoji! 时，您没有键入心形字符，您实际上传递了常规的 \ 字符。由于 \ 有特殊的含义，我们用这样的字符串表示 \\，这就是输入字段中的字符串看起来不同的原因。

基本上，您键入的 JavaScript 代码代表您要键入的字符，而不是字符本身。我们可以通过评估您键入的内容来解决此问题，就像它是 JavaScript 代码一样。如果将 var parsedInput = twemoji.parse($('#emoji-input').val()); 替换为 var parsedInput = twemoji.parse(eval("'"+ $ ('#emoji-input').val() + "'")); 代码将按预期工作。另外，避免使用 eval，因为它会运行传递给它的任何内容。