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

How to display unicode / hexadecimal emoji and octal literals in HTML using Vue.js

所以我从网络服务器收到这样的响应:

"\ud83d\ude48\ud83d\ude02\ud83d\ude30\ud83d\ude09\ud83d\udc4f\ud83c\udffd\ud83d\udc4c\ud83c\udffd\ud83d\udd1d\u2714\ufe0f\ud83d\ude42 4647\u015b\u0161"

解码后应该是这样的:

✔️ äöüßśš

äöüß 被编码为八进制文字 4647

为了正确显示此消息(未编码的纯文本),我使用了:

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

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

对我来说另一件奇怪的事情是当我尝试直接从服务器响应显示消息时(即使它不包含任何八进制文字)使用 {{ 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

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

感谢您的帮助。

尝试手动解码 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')