H5前端输入和展示表情三种解决方案

前端表情输入展示需求，最终解决方案。

1.修改数据库编码格式

a.修改my.ini [mysqld] character-set-server=utf8mb4 (没有就自己添加进去)

b. 在Connector/J的连接参数中，不要加characterEncoding参数。不加这个参数时，默认值就时autodetect,或手动设置utf8mb4

c.修改表结构和参数列的编码格式为 utf8mb4

d.重启mysql服务搞定

2.在存取时编码（PHP）

//对emoji表情转义

function emoji_encode($str){

$strEncode = '';

$length = mb_strlen($str,'utf-8');

for ($i=0; $i < $length; $i++) {

$_tmpStr = mb_substr($str,$i,1,'utf-8');

if (strlen($_tmpStr) >= 4){

$strEncode .= '[[EMOJI:'.rawurlencode($_tmpStr).']]';

} else {

$strEncode .= $_tmpStr;

}

return $strEncode;

}

//对emoji表情转反义

function emoji_decode($str){

$strDecode = preg_replace_callback('|\[\[EMOJI:(.*?)\]\]|', function($matches){

return rawurldecode($matches[1]);

}, $str);

return $strDecode;

}

3.前端编码解决（本方案输入框可以输入存储，但是读取后无法再放入输入框编辑，直接展示没有问题。欢迎补充）

/**表情符号存储与编译**/

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;

// 转换算法

var ss = "&#" + code + ";";

return ss;

} else {

return char;

}

});

str = str.replace(/&#/g,'^^');

return str;

}

//表情解码

function entitiestoUtf16(str){

// 检测出形如〹形式的字符串

var strObj=utf16toEntities(str);

strObj = strObj.replace(/\^\^/g,'&#');

var patt = /&#\d+;/g;

var H,L,code;

var arr = strObj.match(patt)||[];

for (var i=0;i<arr.length;i++){

code = arr[i];

code=code.replace('&#','').replace(';','');

// 高位

H = Math.floor((code-0x10000) / 0x400)+0xD800;

// 低位

L = (code - 0x10000) % 0x400 + 0xDC00;

code = "&#"+code+";";

var s = String.fromCharCode(H,L);

strObj.replace(code,s);

}

return strObj;

}

H5前端输入和展示表情三种解决方案相关推荐

前端特殊符号展示的三种方式
一.效果图: 二.代码块: <!DOCTYPE html><html><head><meta charset="utf-8">< ...
web设计师和前端设计师的互动—前端工程师应该具备的三种思维
如果你是一个天才工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你.但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需 ...
前端实现跨域的三种方式
前端解决跨域的三种方式: 1.cors跨域(只需要后端配置) header("Access-Control-Allow-Origin:*"); // 允许任何来源 header(& ...
xp计算机管理下的服务显示不出来,WinXP系统任务栏不显示打开窗口的三种解决方案...
最近,不少windowsXP系统用户都碰到了任务栏不显示打开窗口的问题.不过,他们还反馈用TAB+ALT或任务管理器应用程序却可以看到任务项目.这是怎么回事呢?其实,该问题可能是桌面程序explore ...
ROS学习：cv_bridge与opencv版本冲突三种解决方案
cv_bridge与opencv版本冲突三种解决方案 1 问题描述: 2 解决方案: 2.1 不使用cv_bridge包 2.2 令cv_bridge使用opencv版本切换为自己工程所使用的版本 2 ...
win10微软图标点击无反应_Win10下鼠标双击桌面图标打不开应用的三种解决方案...
电脑安装的是最新的windows10正式版系统,不过最近在使用过程中出现了一个问题,即鼠标双击桌面图标没有反应,打不开应用程序,这是怎么回事呢?下面,系统城小编就为大家介绍Windows10系统鼠标双 ...
宽动态范围的高端电流检测：三种解决方案
简介在电机控制.电磁阀控制.通信基础设施和电源管理等诸多应用中,电流检测是精密闭环控制所必需的关键功能.从安全至关重要的汽车和工业应用,到电源和效率至关重要的手持式设备,都能发现它的身影.利用精密电 ...
跨域请求的三种解决方案
跨域的三种解决方案一.同源策略二.jsonp 三.cors 四.proxy 一.同源策略 xhr对象无法跨域请求文件.通俗讲就是"浏览器"给js发送请求的限制,你只能给自己域名 ...
实战 2000w 数据大表的优化过程，提供三种解决方案
大家好,我是不才陈某~ 当我们业务数据库表中的数据越来越多,如果你也和我遇到了以下类似场景,那让我们一起来解决这个问题数据的插入,查询时长较长后续业务需求的扩展在表中新增字段影响较大表中的数 ...

H5前端输入和展示表情三种解决方案

H5前端输入和展示表情三种解决方案相关推荐

最新文章

热门文章

H5前端输入和展示 表情 三种解决方案

H5前端输入和展示 表情 三种解决方案相关推荐

最新文章

热门文章

H5前端输入和展示表情三种解决方案

H5前端输入和展示表情三种解决方案相关推荐