JS操作Unicode编码的emoji表情显示在页面
前言:项目中用到了emoji表情,后端传递数据时直接是以Unicode形式,在页面总是无法展示,找尽各种方法总算是试出了一种,虽然达到效果但是并不是特别理解其中的原理并且无比笨拙,贴在这用作笔记,如果哪位大神有更简洁的方法希望指导一下。anugular js
其中展示方法分为两种:
- 例:某Unicode编码的emoji表情为U+1F62C,取出其中的1f62c部分,拼接成😬这种形式(包括其中的";")就可以直接在页面展示。有时则需要利用到trustAsHtml()[1]写一个filter来处理即可。
- 利用String.fromCharCode()方法
例:某Unicode编码的emoji表情为U+1F62C,取出其中的1f62c部分,拼接成0x1f62c,将得到的结果做参数传进下述方法[2]:function findSurrogatePair(point) {
// assumes point > 0xffff
var offset = point - 0x10000,
lead = 0xd800 + (offset >> 10),
trail = 0xdc00 + (offset & 0x3ff);
return [lead.toString(16), trail.toString(16)];
}得到一个数组:

给该数组中的两项前面拼接上"0x",得到一个新的数组
["0xd83d", "0xde2c"]
接下来将数组中的两项直接传递进String.fromCharCode()方法中得到的结果双向绑定到界面即可显示出对应的emoji表情。
要注意的一点:如果该Unicode编码的emoji表情U+后面是四位,例如:U+2600或者U+26c4,则需要省去调用findSurrogatePair()方法这一步,即以U+2600为例,取到2600,拼接上0x得到0x2600,直接调用String.fromCharCode()方法得到的结果双向数据绑定到界面即可。
注释:[1]示例文档:点我跳转,或者点我跳转
[2]原文链接:点我跳转
JS操作Unicode编码的emoji表情显示在页面的更多相关文章
- 字符串进行富文本操作后末尾emoji表情显示会乱码
问题描述: 1.UIlabel展示的text中包含emoji表情 2.emoji表情作为最后一个字符 在满足以上条件的前提下末尾的emoji会乱码. 寻找问题过程: 因为是在单独的机型上出现的问题,所 ...
- 【Java】如何检测、替换4个字节的utf-8编码(此范围编码包含emoji表情)
> 参考的优秀文章 1.十分钟搞清字符集和字符编码 2.Java中byte与16进制字符串的互相转换 3.[异常处理]Incorrect string value: '\xF0\x90\x8D\ ...
- Python 读取文件中unicode编码转成中文显示问题
Python读取文件中的字符串已经是unicode编码,如:\u53eb\u6211,需要转换成中文时有两种方式 1.使用eval: eval("u"+"\'" ...
- js小记 unicode 编码解析
var str = "\\u6211\\u662Funicode\\u7F16\\u7801"; // 关于这样的数据转换为中文问题,常用的两种方法. // 1. eval 解析 ...
- django JsonResponse返回中文时显示unicode编码(\u67e5\u8be2)
django JsonResponse返回中文时显示unicode编码(\u67e5\u8be2) 关注公众号"轻松学编程"了解更多. 原因 这个unicode编码,是python ...
- 为网站添加emoji表情的支持
项目框架 React.js + webpack + ES6 + Jquery 需求描述 使用客户端的用户常常喜欢发emoji表情,而在浏览器打开网页版的时候,emoji表情不能正常显示.在chrome ...
- php过滤表单输入的emoji表情
1.过滤emoji表情的原因 在我们的项目开发中,emoji表情是个麻烦的东西,即使我们可以能存储,也不一定能完美显示,因为它的更新速度很快:在iOS以外的平台上,例如PC或者android.如果你需 ...
- Emoji表情图标在iOS与PHP之间通信及MySQL存储
在某个 iOS 项目中,需要一个服务器来保存一些用户数据,例如用户信息.评论等,我们的服务器端使用了 PHP+MySQL 的搭配.在测试过程中我们发现,用户在 iOS 端里输入了 Emoji 表情提交 ...
- MySQL中支持emoji表情的存储
由于需要实现emoji表情评论的功能,所以数据库需要支持emoji表情的存储,根据查询的资料最终实现了该功能,现将实现的过程以及过程遇到的一些问题记录下来,供大家参考和交流. mysql的utf8编码 ...
随机推荐
- Three.js制作360度全景图
这是个基于three.js的插件,预览地址:戳这里 使用方法: 1.这个插件的用法很简单,引入如下2个js <script src="js/three.min.js"> ...
- AlloyRenderingEngine之Shape
写在前面 不读文章,只对代码感兴趣可以直接跳转到这里 https://github.com/AlloyTeam/AlloyGameEngine 然后star一下,多谢支持:). 游戏或者应用中,不是所 ...
- jQuery flickity 滑动触屏
flickity是一款自适应手机触屏滑动插件,它的API参数很丰富,包括对齐方式.循环滚动.自动播放.是否支持拖动.是否开启分页.是否自适应窗口等. 在线实例 实例演示 使用方法 <div cl ...
- 服务器开启https协议
开启Tomcat https服务 发布企业级应用的时候遇到一个问题,就是IOS7.1之后app的下载地址URL必须是https开头的协议,所以服务器必须支持https协议. 实验环境:Mac OSX ...
- STSDB、NDataBase 对象数据库在不同.net framework下无法读取的解决办法
STSDB.NDataBase 等对象数据库将对象保存在文件中后,如果在不同的windows平台.不同的.net frameWork下总是无法读取,原因是对象模式已经不同了. 解决的办法也很简单,就是 ...
- IOS的七种手势
今天为大家介绍一下IOS 的七种手势,手势在开发中经常用到,所以就简单 通俗易懂的说下, 话不多说,直接看代码: // 初始化一个UIimageView UIImageView *imageView ...
- 如何做好一个Sprint Demo
我列出了一些关于如何做好一个Demo(演示)的建议.我想通过以下四个步骤可以做出一个较好的Demo. 第一步:准备Demo故事 以真实用户使用软件的方式进行Demo.关键点不在于演示软件如何工作,而是 ...
- MS SQL巡检系列——检查重复索引
前言感想:一时兴起,突然想写一个关于MS SQL的巡检系列方面的文章,因为我觉得这方面的知识分享是有价值,也是非常有意义的.一方面,很多经验不足的人,对于巡检有点茫然,不知道要从哪些方面巡检,另外一方 ...
- Javascript——arguments的shift问题谈方法“借用”
今天本来运行了打算这样的方法 arguments.shift() (shift方法是删除数组的第一个元素,例如var arr=[1,2,3,4,5]执行var a=arr.shift();之后,a的值 ...
- Spring类型转换 ConversionSerivce Convertor
以String转Date为例: 定义转换器: import java.text.ParseException; import java.util.Date; import org.apach ...