JS 控制输入框输入表情emoji 显示在页面上
问题描述:
最近做一个评论回复的功能遇到了用户输入框输入表情,存入数据库的时候转变成了问号???
起初为了避免这个问题,做了一个过滤表情的控制
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 显示在页面上的更多相关文章
- JS常用正则表达式和JS控制输入框输入限制(数字、汉字、字符)
验证数字:^[0-9]*$验证n位的数字:^\d{n}$验证至少n位数字:^\d{n,}$验证m-n位的数字:^\d{m,n}$验证零和非零开头的数字:^(0|[1-9][0-9]*)$验证有两位小数 ...
- JS控制只能输入数字并且最多允许小数点两位
直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- JS 控制只能输入数字并且最多允许两位小数点
<html lang="en"> <head> <meta charset="UTF-8"> <title>JS ...
- echarts如何显示在页面上
echarts如何显示在页面上 1.引入echarts的相关.js文件 <script src="js/echarts.min.js"></script> ...
- 【WPF学习笔记】之如何把数据库里的值读取出来然后显示在页面上:动画系列之(六)(评论处有学习资料及源码)
(应博友们的需要,在文章评论处有源码链接地址,以及WPF学习资料.工具等,希望对大家有所帮助) ...... 承接系列五 上一节讲了,已经把数据保存到数据库并且删除数据,本讲是把已经存在的数据从数据库 ...
- iOS限制输入表情(emoji),出现九宫格不能输入的解决方法
在提交数据发送网络请求,由于用户输入了emoji表情,服务端返回系统异常,体验感很差.为了解决服务器不能验证emoji编码的问题,需要在本地进行emoji的输入控制(一般情况应该由服务器在数据库中添加 ...
- 把Employees显示在页面上
项目代码下载:https://files.cnblogs.com/files/xiandedanteng/gatling20200429-1.zip 需求:从后台DB取出雇员数据,显示在前台页面上: ...
- JS控制输入框,输入正确的价格
在HTML中,验证输入内容的正确性是提高用户体验的一方面,同时也是初步保证了数据的来源的正确性. 下面是一个常用的控制输入正确的价格的JS代码 function clearNoNum(obj) { o ...
- js控制输入框只能输入数字不能输入其他字符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- unfortunately,*********** has stopped及卸载模拟器上的多余不用apk
虽然不知道是怎么了,但是项目进不去了,害的我一脸雾水,百度了下好像没什么人遇到过这问题,都没找到解决办法,那只好来个简单粗暴的,卸载重新安装apk ,希望有大神知道原因和其他方法的欢迎留言或者评价给出 ...
- java.lang.RuntimeException: Class "org.apache.maven.cli.MavenCli$CliRequest" not found
IDEA版本:14.1 maven版本:apache-maven-3.3.9-bin IDEA的maven项目,在pom文件执行Maven--Reimport,引入jar包依赖,报错java.lang ...
- react 环境安装
React 使用了ES6标准的JSX(script标签type为text/babel),但目前很多浏览器只支持ES5,所以我们就需要将JSX转成普通JS.在生产环节中,通常直接将JSX编译为JS,但简 ...
- mysql权限操作(转)
慢慢看吧mysql中可以给你一个用户授予如select,insert,update,delete等其中的一个或者多个权限,主要使用grant命令,用法格式为: grant 权限 on 数据库对象 to ...
- vue调试方法
vue调试方法有如下三种 1.chrome谷歌插件vue-devtools 2.console.log().console.error().alert().debugger 3.设置全局变量,分为两种 ...
- Checked Uncheckd异常
Checked : 你可以在写代码的时候就throw 或者try catch 的 Unchecked : Error + RuntimeException .提前无法预测的 http://www ...
- 十一、eclipse如何创建一个maven工程project
1. 2. 3. 4. 这是刚创建的工程,因为缺少WEB-INF/web.xml,所以项目会报错 5. 6. 再编写一个web.xml文件,项目就正常了,没有报错:后期需要自己添加对应的pom.xml ...
- java搭建SSM的Web开发框架-整合这3者用到的配置文件
1./WEB-INF/web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmln ...
- PHP整理--MySQL--DOS命令操作数据库
一.MySQL:关系型数据库,存在表的概念. MySQL的结构:数据库可以存放很多表,每张表可以存放多个字段,每个字段可以存放多个记录. 二.Dos操作数据库 用PHPStudy终端➡其他选项菜单➡M ...
- vue中具名插槽的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...