Vue.js使用vue-twemoji时外部输入的Emoji Unicode无法正常显示问题

问题原因 #

• JS代码中硬编码的'I \u2764\uFE0F emoji!'里，\u2764\uFE0F是JavaScript原生Unicode转义序列，JS引擎解析代码时会自动将其转换为对应真实Unicode表情字符，因此可以被twemoji正常识别解析。
• 通过props传入、用户输入得到的字符串里的\u2764\uFE0F是普通字面量字符序列，内容为\、u、2、7、6、4等独立字符拼接的结果，JS不会自动将其转义为Unicode字符，twemoji无法识别这类字符序列，自然不会渲染为表情。
• 你给出的第二版示例代码直接将原始message渲染到v-html，没有调用twemoji.parse方法做转换，就算是格式正确的Unicode字符也不会被渲染为twemoji格式的表情。

解决方法 #

首先新增工具方法，将字符串中的Unicode转义序列转换为真实的Unicode字符：

function parseUnicodeEscape(str) {
  // 匹配所有\u开头的4位十六进制转义序列
  return str.replace(/\\u([\dA-Fa-f]{4})/g, (match, code) => {
    return String.fromCharCode(parseInt(code, 16))
  })
}

修改计算属性逻辑，先处理原始内容再调用twemoji转换：

computed:{
  parseEmoji: function () {
    // 先解析转义序列，再传给twemoji处理
    const processedText = parseUnicodeEscape(this.message)
    return twemoji.parse(processedText)
  }
}

调整模板，使用处理后的计算属性渲染内容：

<div id="app">
  <input type="text" v-model="message" />
  <div v-html="parseEmoji"></div>
</div>

如果需要兼容更长的Unicode转义（如部分特殊emoji的\u1xxxx格式），调整正则匹配规则为匹配4到6位十六进制编码即可。

内容的提问来源于stack exchange，提问作者Hesham White