如何使用Vue.js在HTML中显示unicode / hexadecimal表情符号和八进制文字

时间:2018-03-02 08:14:07

标签: javascript unicode vue.js emoji

所以我从网络服务器得到了这样的回复:

"\ud83d\ude48\ud83d\ude02\ud83d\ude30\ud83d\ude09\ud83d\udc4f\ud83c\udffd\ud83d\udc4c\ud83c\udffd\ud83d\udd1d\u2714\ufe0f\ud83d\ude42 \344\366\374\337\u015b\u0161"

解码后的

应如下所示:

✔️äöüßśš

äöüß编码为八进制文字\344\366\374\337

要正确显示我使用过的这条消息(不是编码的纯文本):

{{ JSON.parse('"' + messageContent.message + '"') }}

它对于转义的unicode值非常有效但是当八进制文字出现时却没有,所以这就是问题 - ES6不允许使用八进制文字,因为它们已被弃用,并且发生错误,所以我做了什么只是用正则表达式查找八进制文字,然后使用:String.fromCharCode(parseInt(parseInt(val.replace('\\', ''), 8), 10))解析它们,以便从例如:\344我得到ä。在我替换octals之后,我必须搜索任何unicode字符,然后再使用JSON.parse(`"${val}"`)逐个解析(这里的情况与下面描述的相同 - 如果我对字符串进行硬编码并仅返回\ud83d\ude48我不必用JSON.parse解析它,它只是返回)。我认为这不是最佳解决方案。

对我来说另一件奇怪的事情是当我尝试直接从服务器响应中显示消息时(即使它不包含任何八进制文字) {{ response.message }}它将打印为普通字符串,但是当我创建新变量并指定与从服务器接收的值完全相同的值时:

message='\ud83d\ude48\ud83d\ude02\ud83d\ude30\ud83d\ude09\ud83d\udc4f\ud83c\udffd\ud83d\udc4c\ud83c\udffd\ud83d\udd1d\u2714\ufe0f\ud83d\ude42' 然后显示它

{{ message }}显示的值是✔️。

最后一件事:即使我使用我的算法,我只是寻找匹配/\\[[a-zA-Z0-9]{1,5}\\[[a-zA-Z0-9]{1,5}/g的文本,但有时它并不能很好地解析unicode - 例如:如果用户更改了肤色,则unicode消息将是: \ud83d\udc4d\ud83c\udffd,解码:,但使用此正则表达式,它将是�\udffd

如果有必要,可以在后端进行一些小的更改,但它也会被完成的移动应用程序使用,以便更改不会影响它们。

感谢您的帮助。

1 个答案:

答案 0 :(得分:3)

尝试手动解码unicode转义序列(\uXXXX)和八进制转义序列(\XXX),如下所示:

const response = '\\ud83d\\ude48\\ud83d\\ude02\\ud83d\\ude30\\ud83d\\ude09\\ud83d\\udc4f\\ud83c\\udffd\\ud83d\\udc4c\\ud83c\\udffd\\ud83d\\udd1d\\u2714\\ufe0f\\ud83d\\ude42 \\344\\366\\374\\337\\u015b\\u0161'
const decoded = response
  .replace(/\\u(....)/g, (match, p1) => String.fromCharCode(parseInt(p1, 16)))
  .replace(/\\(\d{3})/g, (match, p1) => String.fromCharCode(parseInt(p1,  8)))
console.log(decoded)

服务器正在向您发送包含文字字符\ud83d\ude48(等等)的字符串,因此必须通过将转义序列转换为它们所代表的unicode字符来以某种方式显式解码字符串。另一方面,如果JavaScript代码中的字符串文字包含字符\ud83d\ude48,那么它将自动解码为。

观察这两个字符串之间的区别:

console.log('\ud83d\ude48')
console.log('\\ud83d\\ude48')