前端解决表情符号乱码问题（前端处理表情符号编码）@令狐张豪

最新推荐文章于 2024-08-16 13:29:25 发布

令狐张豪

最新推荐文章于 2024-08-16 13:29:25 发布

阅读量2.2k

点赞数 2

分类专栏： js 文章标签： javascript html vue 前端

本文链接：https://blog.csdn.net/LingHuzh/article/details/120291427

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了在前端项目中遇到的一个问题，即用户输入的Unicode表情在MySQL数据库中显示为???。原因是MySQL的utf8编码不支持四字节的Emoji。为了解决这个问题，作者提供了两个JavaScript方法，用于编码和解码表情符号。通过在插入数据前对表情进行编码，并在获取数据后解码，成功解决了表情显示问题。这是一个针对前端开发中字符编码问题的实战解决方案。

摘要由CSDN通过智能技术生成

今天接手了一个项目，里面有个功能点是点赞评论的功能，之前写的代码用户输入表情符号后我们返显出来的是一堆???问号

大概原因：UTF-8编码有可能是两个、三个、四个字节。Emoji表情是4个字节，而Mysql的utf8编码最多3个字节，所以数据插不进去，识别不出来就成了一堆???。
解决方案：先把用户选择的表情符号用charCodeAt给转成编码，取数据时再解码成16进制的就好了。

这里直接封装好的两个js方法，粘贴复制直接调用就行

		//编码：
        emojiEncode(e) {
            var n = /[\ud800-\udbff][\udc00-\udfff]/g;
            // 检测utf16字符正则
            return e = e.replace(n, function(e) {
                var n, r;
                return 2 === e.length ? (n = e.charCodeAt(0), r = e.charCodeAt(1),
                    "&#" + (1024 * (n - 55296) + 65536 + r - 56320) + ";") : e
            })
        },
		//解码：
        emojiDecode(e) {
            var n = /\&#.*?;/g; //获取数据库种16进制的数据
            //然后进行解码操作
            return e.replace(n, function(e) {
                var n, r, t;
                return 9 == e.length ? (t = parseInt(e.match(/[0-9]+/g)), n = Math.floor((t - 65536) / 1024) + 55296, r = (t - 65536) % 1024 + 56320, unescape("%u" + n.toString(16) + "%u" + r.toString(16))) : e
            })
        },



			//我们输入了评论内容把内容进行编码
     		var data = {
                   token: App.getP('token'),
                   family_content_id: App.getP('family_content_id'),
                   comment_message: this.emojiEncode(this.commentMessage)
              }
           //获取数据后在解码
             content: {
                   text: that.emojiDecode(that.commentMessage),
                   date: "刚刚"
              },