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

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

大概原因：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: "刚刚"},

end~~~

如有错误或观点不一致的请评论留言共同讨论，本人前端小白一枚，根据自己实际项目遇到的问题进行总结分享，谢谢大家的阅读！
文章对您有所帮助请给作者点个赞支持下，谢谢~

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

前端实现点击复制功能，兼容Safari浏览器 @令狐张豪
这里我们使用clipboard来实现介绍:clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件,支持很多主流浏览器,包括Safari //引入方式 <scr ...
前端解决粘贴过来的东西不触发键盘事件@令狐张豪
描述: 在做登录的时候输入正确校验时按钮高亮并可以触发事件,我们正常输入的时候没问题,但是直接粘贴过来的时候input监听不到. 解决: 换成oninput事件 //vue写法 <input t ...
解决小程序底部导航在iphone x及以上机型上安全区域的适配问题@令狐张豪
问题点:小程序底部导航如果写固定的位置在安卓系统上是没有问题的,但是在iPhone X及以上机型有安全区域的机器上就显得有点太靠下了,我们可以写成动态的: 解决思路:判断是Android 还是 iOS ...
解决在小程序/H5上点击输入框键盘弹起后弹框显示不全问题@令狐张豪
要实现的效果图: 解决思路: 先禁止input键盘弹起时,是否自动上推页面: 点击input的时候获取键盘弹起来的高度: 把获取出来的高度赋值到弹框的margin-bottom上: 键盘失焦或弹框关闭 ...
前端解决跨域问题的8种方案（最新最全）
.同源策略如下: URL 说明是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下允许 http://www.a.com/lab/a.j ...
前端——解决微信网页清除缓存的方法
前端--解决微信网页清除缓存的方法参考文章: (1)前端--解决微信网页清除缓存的方法 (2)https://www.cnblogs.com/fkcqwq/p/9604184.html 备忘一下.
inline-block间隙原因和解决方法（web前端问题）
inline-block间隙原因和解决方法(web前端问题) 参考文章: (1)inline-block间隙原因和解决方法(web前端问题) (2)https://www.cnblogs.com/ge ...
通俗易懂地解决中文乱码问题（2） --- 分析解决Mysql插入移动端表情符报错 ‘incorrect string value: '\xF0......
原文:[原创]通俗易懂地解决中文乱码问题(2) --- 分析解决Mysql插入移动端表情符报错 'incorrect string value: '\xF0... 这篇blog重点在解决问题,如果你对 ...
前端解决跨域问题的8种方案
2019独角兽企业重金招聘Python工程师标准>>> 1.同源策略如下: URL 说明是否允许通信 http://www.a.com/a.js http://www.a.com/ ...

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

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

最新文章

热门文章