前端输入Emoji表情导致的错误

最新推荐文章于 2024-06-24 14:01:42 发布

进无止进

最新推荐文章于 2024-06-24 14:01:42 发布

阅读量2.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Javascript 前端文章标签： emoji 前端 mysql 字符编码 input

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/lihchweb/article/details/88964886

Javascript 同时被 2 个专栏收录

30 篇文章

订阅专栏

前端

20 篇文章

订阅专栏

本文介绍了因emoji表情导致存入MySQL数据库时出现的问题及解决方案。主要原因是MySQL utf8字符集不支持某些emoji编码，提供了两种正则过滤方法，并建议将数据库编码升级到utf8mb4。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用户输入了emoji表情，提交的时候因为后端没有存储相应的emoji字符编码，导致报错异常。

原因： unicode定义的emoji是四个字符，对于一些之前没有考虑过emoji表情的系统来说，其获取或者展示简直就是灾难。公司用的MySQL,其utf8字符集最多支持三个字符。

解决方案

改变MySQL编码集设置，比如将其编码从utf8转换成utf8mb4
前端直接过滤掉emoji，可以用正则实现

正则一：

regemoRule : /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, // 表情匹配正则

正则二：

function replaceEmoji (val) {
    var regStr = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;
    var value = val;
    value = unescape(escape(value).replace(/\%uD.{3}/g, ''))
    return value;
};

以上两种正则方案都是线上采用的方式。