前言:项目中用到了emoji表情,后端传递数据时直接是以Unicode形式,在页面总是无法展示,找尽各种方法总算是试出了一种,虽然达到效果但是并不是特别理解其中的原理并且无比笨拙,贴在这用作笔记,如果哪位大神有更简洁的方法希望指导一下。anugular js


其中展示方法分为两种:

  1. 例:某Unicode编码的emoji表情为U+1F62C,取出其中的1f62c部分,拼接成😬这种形式(包括其中的";")就可以直接在页面展示。有时则需要利用到trustAsHtml()[1]写一个filter来处理即可。
  2. 利用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表情显示在页面的更多相关文章

  1. 字符串进行富文本操作后末尾emoji表情显示会乱码

    问题描述: 1.UIlabel展示的text中包含emoji表情 2.emoji表情作为最后一个字符 在满足以上条件的前提下末尾的emoji会乱码. 寻找问题过程: 因为是在单独的机型上出现的问题,所 ...

  2. 【Java】如何检测、替换4个字节的utf-8编码(此范围编码包含emoji表情)

    > 参考的优秀文章 1.十分钟搞清字符集和字符编码 2.Java中byte与16进制字符串的互相转换 3.[异常处理]Incorrect string value: '\xF0\x90\x8D\ ...

  3. Python 读取文件中unicode编码转成中文显示问题

    Python读取文件中的字符串已经是unicode编码,如:\u53eb\u6211,需要转换成中文时有两种方式 1.使用eval: eval("u"+"\'" ...

  4. js小记 unicode 编码解析

    var str = "\\u6211\\u662Funicode\\u7F16\\u7801"; // 关于这样的数据转换为中文问题,常用的两种方法. // 1. eval 解析 ...

  5. django JsonResponse返回中文时显示unicode编码(\u67e5\u8be2)

    django JsonResponse返回中文时显示unicode编码(\u67e5\u8be2) 关注公众号"轻松学编程"了解更多. 原因 这个unicode编码,是python ...

  6. 为网站添加emoji表情的支持

    项目框架 React.js + webpack + ES6 + Jquery 需求描述 使用客户端的用户常常喜欢发emoji表情,而在浏览器打开网页版的时候,emoji表情不能正常显示.在chrome ...

  7. php过滤表单输入的emoji表情

    1.过滤emoji表情的原因 在我们的项目开发中,emoji表情是个麻烦的东西,即使我们可以能存储,也不一定能完美显示,因为它的更新速度很快:在iOS以外的平台上,例如PC或者android.如果你需 ...

  8. Emoji表情图标在iOS与PHP之间通信及MySQL存储

    在某个 iOS 项目中,需要一个服务器来保存一些用户数据,例如用户信息.评论等,我们的服务器端使用了 PHP+MySQL 的搭配.在测试过程中我们发现,用户在 iOS 端里输入了 Emoji 表情提交 ...

  9. MySQL中支持emoji表情的存储

    由于需要实现emoji表情评论的功能,所以数据库需要支持emoji表情的存储,根据查询的资料最终实现了该功能,现将实现的过程以及过程遇到的一些问题记录下来,供大家参考和交流. mysql的utf8编码 ...

随机推荐

  1. sencha ext js 6 入门

    Sencha Ext JS号称是目前世界上最先进和最强大的.支持多平台多设备的JavaScript应用程序开发框架.首先看一下Ext JS的发展简史. 1 Ext JS发展简史 YUI-Ext的作者J ...

  2. css3 linear-gradient实现购物车地址选择信封效果

    对于css3的渐变前端的童鞋一定不陌生,在一些电商网站会为了美化将地址选择做成信封样式(个人感觉很稀饭~),看了一下它的实现方式,大多数是以图片的形式,持着优化的心态尝试着用css3 linear-g ...

  3. 吐个槽:bose的售后真心差劲!愧对这个顶级音响产品!

    400电话只提供周一到周五(中午有1个小时非服务时间),打进去就不厌其烦地告知你服务时间,你多按几个0,对方就直接把电话给你挂了!即使耐心等待它啰嗦完,哪怕只有0个人等待或1个人等待,你也是接不进去的 ...

  4. WinSetupFromUSB - 制作多系统U盘安装All-In-One的利器

    单U盘玩多个操作系统,这下有福了! 官网最新的下载地址:http://www.winsetupfromusb.com/files/download-info/winsetupfromusb-1-7-e ...

  5. python安装后推荐的安装两款文本编辑器

    Notepad++ 7.2.2和 Sublime Text --道心 Notepad++ 7.2.2 Notepad++ 是一款非常有特色的编辑器,是开源软件,可以免费使用.支持的语言: C, C++ ...

  6. 安装KVM及虚拟机

      创建lvm       安装kvm相关的包     需要安装的包                                                                 安 ...

  7. 测试EntityFramework,Z.EntityFramework.Extensions,原生语句在不同的查询中的表现。原来池化与非池化设定是有巨大的影响的。

    Insert测试,只测试1000条的情况,多了在实际的项目中应该就要另行处理了. using System; using System.Collections.Generic; using Syste ...

  8. 从一道面试题来认识java类加载时机与过程

    说明:本文的内容是看了<深入理解Java虚拟机:JVM高级特性与最佳实践>后为加印象和理解,便记录了重要的内容. 1  开门见山 以前曾经看到过一个java的面试题,当时觉得此题很简单,可 ...

  9. js入门学习~ 运动应用小例

    要实现的效果如下: 鼠标移入各个小方块,实现对应的效果(变宽,变高,移入透明,移出恢复)~~ (且各运动相互之前不干扰)  主要是练习多个物体的运动框架~~ --------------------- ...

  10. Java程序设计求出岁数

    题目:我年龄的立方是个4位数.我年龄的4次方是个6位数.这10个数字正好包含了从0到9这10个数字,每个都恰好出现1次,求出我今年几岁. 直接拷贝运行就可以了. public class Age { ...