代码之家 › 专栏 › 技术社区 › Piotr Sobusiak

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

emoji vue.js unicode javascript

Piotr Sobusiak · 技术社区 · 7 年前

所以我从Web服务器得到这样的响应:

"\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不允许使用八进制文字,因为它们已被弃用,并且出现了一个错误,所以我所做的只是使用regex查找八进制文字,然后使用以下方法解析它们: String.fromCharCode(parseInt(parseInt(val.replace('\\', ''), 8), 10)) 因此,从eg: \344 我要￥。替换八进制后,我必须搜索任何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 回复 | 直到 7 年前

Decade Moon 7 年前

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