（前端）解决emoji显示问题

末蓝、 2021-11-10 23:20 623阅读 0赞

这里来介绍一下前端解决Emoji显示的问题；

后台返回UTF-8格式

1、存储格式

我们的emoji是一个个16进制组成的在传个后台不被编译的情况下我们把16进制转成8进制

方法如下

//把utf16的emoji表情字符进行转码成八进制的字符
    //str你传给后台的内容
    utf16toEntities(str) {
        var patt = /[\ud800-\udbff][\udc00-\udfff]/g; // 检测utf16字符正则  
        return str.replace(patt, function (char) {
          var H, L, code;
          if (char.length === 2) {
            H = char.charCodeAt(0); // 取出高位  
            L = char.charCodeAt(1); // 取出低位  
            code = (H - 0xD800) * 0x400 + 0x10000 + L - 0xDC00; // 转换算法  
            return "&#" + code + ";";
          } else {
            return char;
          }
        });
      },

2.接收内容

我们前端拿到的内容utf-8的格式的内容

这个时候表情是加载不出来的，我们需要再次转换输出显示

方法如下：

//将编码后的八进制的emoji表情重新解码成十六进制的表情字符
     entitiesToUtf16(str) {
      return str.replace(/&#(\d+);/g, function (match, dec) {
        let H = Math.floor((dec - 0x10000) / 0x400) + 0xD800;
        let L = Math.floor(dec - 0x10000) % 0x400 + 0xDC00;
        return String.fromCharCode(H, L);
      });

这样我们的Emoji就能完美输出了；

有更好的方法还请评论O(∩\_∩)O哈哈~  共同分享

发表评论取消回复

表情：

评论列表（有 0 条评论，623人围观）

还没有评论，来说两句吧...

相关阅读

相关 java emoji过滤_Java 解决Emoji表情过滤问题（转载）

本文作者我是周洲本人使用的是第三种引入jar的方法问题： Emoji表情从三方数据中获取没有过滤，导致存入DB的时候报错。原因： UTF-8编码有可能是两个、

曾经终败给现在/ 2022年11月03日 11:06/ 0 赞/ 266 阅读

相关 mysql 5.7 emoji_解决mysql 5.7保存emoji 失败问题

测试机mysql版本为5.7.21，默认引擎为InnoDB，默认字符集为utf8。字段插入Emoji表情具体报错内容如下： Error updating data

矫情吗；*/ 2022年08月28日 11:50/ 0 赞/ 207 阅读

相关 mysql node emoji问题

var mysql = require('mysql'); module.exports = mysql.createPool( {

左手的ㄟ右手/ 2022年08月09日 12:43/ 0 赞/ 175 阅读

相关 emoji 表情图片解决方法

1:先弄到图片上传到服务器上 ![6955dcf3-3473-39fc-bcca-45e0cee03ed2.jpg][] 2.下载 unicod

短命女/ 2022年07月13日 04:20/ 0 赞/ 303 阅读

相关 Java 解决Emoji表情过滤问题

问题： Emoji表情从三方数据中获取没有过滤，导致存入DB的时候报错。 ![70][] 原因： UTF-8编码有可能是两个、三个、四个字

柔情只为你懂/ 2022年05月31日 13:25/ 0 赞/ 577 阅读

相关 mysql设置utf8mb4解决emoji显示乱码

网络上有相关的解决文章,但我看了觉得写得都不是很清晰,所以把我自己的解决步骤记录下来.无需重启数据库的方法见文章最后.这里针对的是版本为5.5.3以上的mysql数据库(低版本

浅浅的花香味﹌/ 2022年05月29日 05:36/ 0 赞/ 389 阅读

相关（前端）解决emoji显示问题

这里来介绍一下前端解决Emoji显示的问题；后台返回UTF-8格式 1、存储格式我们的emoji是一个个16进制组成的在传个后台不被编译的情况下我们把16进制转

末蓝、/ 2021年11月10日 23:20/ 0 赞/ 624 阅读

相关 CSDN前端图片显示问题

图片适配问题过了一个礼拜还没有搞好？ ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

布满荆棘的人生/ 2021年09月27日 17:56/ 0 赞/ 392 阅读

相关 Mybatis系列之前端显示时间格式问题解决方法

我的开发工具是IntelliJ IDEA，然后在SpringBoot集成Mybatis，前端用模块引擎Thymeleaf的过程中遇到几个问题，不过也花了点时间，现在记录下来，作

电玩女神/ 2021年09月16日 21:08/ 0 赞/ 436 阅读

相关 emoji表情在web html上显示

[iOS][]或[Android][]客户的输入法支持emoji表情输入，系统管理后台需要显示用户实际输入的效果,因此处理emoji表情符 1.[MySQL][]需要设置支持

落日映苍穹つ/ 2021年06月24日 14:36/ 0 赞/ 1107 阅读