初级字典树查找在 Emoji、关键字检索上的运用 Part-3

 

系列索引

  1. Unicode 与 Emoji
  2. 字典树 TrieTree 与性能测试
  3. 生产实践

生产实践

我们最终要解决 Emoji 在浏览器和打印物上的显示一致。

进行了多番对比,,在显示效果和精度上,macOS 和 Unicode 标准的风格相近,最终决定使用 Unicode 提供的图片作为跨平台显示。

浏览器和渲染程序在渲染文本前,将内容交由后端进行 Emoji 检索。

提交请求示例如下:

{   "sections":[     "颠簸了三小时飞机✈️➕两小时公交地铁🚇➕四小时大巴➕一小时🚢 终于到了我们的目的地像面粉一样的沙滩和碧绿的大海 这就是我们第一次旅行的地方in沙美岛🏖"      ] }

后端使用了 MongoDB 存储了所有 Emoji 的 base64 表示,检索到 Emoji 字符后输出替换内容。

{   "sections": [     "颠簸了三小时飞机[chuye-emoji://1835]️[chuye-emoji://2263]两小时公交地铁[chuye-emoji://1792][chuye-emoji://2263]四小时大巴[chuye-emoji://2263]一小时[chuye-emoji://1834] 终于到了我们的目的地像面粉一样的沙滩和碧绿的大海 这就是我们第一次旅行的地方in沙美岛[chuye-emoji://1734]"   ],   "regExp": "\\[chuye\\-emoji:\\/\\/(\\d+)\\]""images": {     "1734": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAMAAADQmBKKAAAABGdBTUEAALGPC...""1792": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAMAAADQmBKKAAAABGdBTUEAALGPC...""1834": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAMAAADQmBKKAAAABGdBTUEAALGPC...""1835": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAMAAADQmBKKAAAABGdBTUEAALGPC...""2263": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABEBAMAAADQAW4PAAAABGdBTUEAALGPC..."   },   "emojis": {     "1734": "🏖""1792": "🚇""1834": "🚢""1835": "✈""2263": "➕"   } }

移除了 base64 后面的更多内容,只起示例作用。

返回内容包含以下字段

字段 类型  
sections 字符串数组 替换 Emoji 后的字符串输出
regExp 字符串 辅助定位 Emoji表达式 的正则表达式
images 字典/对象 所有Emoji 表达式 的base64 编码表示

示例请求包含了5个 emoji 字符,后端将它们一一替换成了所谓的emoji 表达式,依次为 [chuye-emoji://1734], [chuye-emoji://1792], [chuye-emoji://1834], [chuye-emoji://1835], [chuye-emoji://2263]

Emoji 表达式:作者自己的定义,表示一段 emoji ,固定格式形如 [chuye-emoji://1734],尾部的数字是序号。整个表达式可以用响应携带的正则表达式 regExp 字段匹配

浏览器在拿到响应后, 使用正则定位该表达式, 再替换其为 <img class="emoji" /> 标签并应用响应中的 base64 资源,最后将文本当作 HTML 输出即可。演示代码:

let req      = {
                        
关键字:
50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信