问题描述:

最近做一个评论回复的功能遇到了用户输入框输入表情,存入数据库的时候转变成了问号???

起初为了避免这个问题,做了一个过滤表情的控制

var inputText = $('#pinglun').val().trim().replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g,"");

后来经过网上查询资料,原来emoji用到的字符是4字节的utf-16(utf-16有2字节和4字节两种编码),而我们的数据库是采用的utf-8,并且最大只允许3字节的字符。这样冲突就产生了,表单因为这些emoji字符的存在无法正常提交。

解决方法:

方案一:

一是让后台处理,把这个utf-16字符做一些转换(也有一种方案是把数据库编码格式改成utf8mb4)。第二种办法就是在前端直接转换成实体字符后再提交。

处理函数:

/**
* 用于把用utf16编码的字符转换成实体字符,以供后台存储
* @param {string} str 将要转换的字符串,其中含有utf16字符将被自动检出
* @return {string} 转换后的字符串,utf16字符将被转换成&#xxxx;形式的实体字符
*/
function utf16toEntities(str) {
var patt=/[\ud800-\udbff][\udc00-\udfff]/g; // 检测utf16字符正则
str = 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;
}
});
return str;
}

这样就能成功的把utf-16编码部分的emoji表情转换为了实体字符。

转换方法参考地址:http://blog.csdn.net/binjly/article/details/47321043

方案二:

另外还有一种方法是把表情转换成自己定义好的各种标识存入数据库,下次再从数据库取出的时候进行翻译

引入emoji表情库,一个gitHub上的插件

https://github.com/node-modules/emoji

引用线上代码示例:

<link href="http://cdn.staticfile.org/emoji/0.2.2/emoji.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.staticfile.org/jquery/2.1.0/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/emoji/0.2.2/emoji.js"></script>
var $text = $('.emojstext');
var html = $text.html().trim().replace(/\n/g, '<br/>');
$text.html(jEmoji.unifiedToHTML(html));

JS 控制输入框输入表情emoji 显示在页面上的更多相关文章

  1. JS常用正则表达式和JS控制输入框输入限制(数字、汉字、字符)

    验证数字:^[0-9]*$验证n位的数字:^\d{n}$验证至少n位数字:^\d{n,}$验证m-n位的数字:^\d{m,n}$验证零和非零开头的数字:^(0|[1-9][0-9]*)$验证有两位小数 ...

  2. JS控制只能输入数字并且最多允许小数点两位

    直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  3. JS 控制只能输入数字并且最多允许两位小数点

    <html lang="en"> <head> <meta charset="UTF-8"> <title>JS ...

  4. echarts如何显示在页面上

    echarts如何显示在页面上 1.引入echarts的相关.js文件 <script src="js/echarts.min.js"></script> ...

  5. 【WPF学习笔记】之如何把数据库里的值读取出来然后显示在页面上:动画系列之(六)(评论处有学习资料及源码)

    (应博友们的需要,在文章评论处有源码链接地址,以及WPF学习资料.工具等,希望对大家有所帮助) ...... 承接系列五 上一节讲了,已经把数据保存到数据库并且删除数据,本讲是把已经存在的数据从数据库 ...

  6. iOS限制输入表情(emoji),出现九宫格不能输入的解决方法

    在提交数据发送网络请求,由于用户输入了emoji表情,服务端返回系统异常,体验感很差.为了解决服务器不能验证emoji编码的问题,需要在本地进行emoji的输入控制(一般情况应该由服务器在数据库中添加 ...

  7. 把Employees显示在页面上

    项目代码下载:https://files.cnblogs.com/files/xiandedanteng/gatling20200429-1.zip 需求:从后台DB取出雇员数据,显示在前台页面上: ...

  8. JS控制输入框,输入正确的价格

    在HTML中,验证输入内容的正确性是提高用户体验的一方面,同时也是初步保证了数据的来源的正确性. 下面是一个常用的控制输入正确的价格的JS代码 function clearNoNum(obj) { o ...

  9. js控制输入框只能输入数字不能输入其他字符

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. mysqli链接数据库

    <?php $uid = $_GET['uid']; $host = 'localhost';$database = 'test';$username = 'root';$password = ...

  2. 20175314 《Java程序设计》第七周学习总结

    20175314 <Java程序设计>第七周学习总结 教材学习内容总结 第八章:常用实用类 String()类代表字符串:Java 程序中的所有字符串字面值(如 "abc&quo ...

  3. redis哨兵集群

    Sentinel 哨兵 修改src下的sentinel.conf文件 , 配置端口  :port:随便   daemonize yes 配置主服务器的ip 和端口 我们把监听的端口修改成7000,并且 ...

  4. 使用发射将JavaBean转为Map

    import java.lang.reflect.Field; private static Map<String, Object> objectToMap(Object obj) thr ...

  5. java代码实现简单的认证——图片验证码形式

    前言:认证在互联网中会经常见到,其主要作用是安全问题中防止恶意破解.刷票等.在系统开发中认证的实现也有很多种,什么手机短信认证,邮箱认证等.在这里我使用最基本的验证码的形式进行认证,下面例出过程. 验 ...

  6. 2-java-写代码技巧和交题注意点

    用java交题要严格按照规定写代码: 比如蓝桥杯就是: 1.不能有包名: 2.Class的名字必须是 Main; 代码补全建议: 1.main函数的头可以建立class时候直接勾选,也可以: 只输入 ...

  7. MVC Request生命周期(综合总结)

    当用户在浏览器输入一个URL地址后,浏览器会发送一个请求到服务器.这时候在服务器上第一个负责处理请求的是IIS.然后IIS再根据请求的URL扩展名将请求分发给不同的处理程序处理. 流程如下: 当请求一 ...

  8. 分布式ID方案有哪些以及各自的优劣势,我们当如何选择

    作者介绍 段同海,就职于达达基础架构团队,主要参与达达分布式ID生成系统,日志采集系统等中间件研发工作. 背景 在分布式系统中,经常需要对大量的数据.消息.http请求等进行唯一标识,例如:在分布式系 ...

  9. 生产与学术之Pytorch模型导出为安卓Apk尝试记录

    生产与学术 写于 2019-01-08 的旧文, 当时是针对一个比赛的探索. 觉得可能对其他人有用, 就放出来分享一下 生产与学术, 真实的对立... 这是我这两天对pytorch深度学习->a ...

  10. ASP .NetCore 部署500错误 查看异常详情

    部署.net core 网站后,访问报错:500 按照教程设置完成,但访问时总是提示 服务器内部错误,没有详细的异常信息,无从下手. 解决办法: 1.在站点根目录下按住shift+鼠标右键,选择在此处 ...