JavaScript爬取emoji网页表格信息,适用于做聊天等场景的表情管理

141 阅读1分钟

爬取Full Emoji List, v15.0所有表情

网址:unicode.org/emoji/chart…

方式:控制板打印

分析

image.png

  1. 可以看出,uniCode都存在一张大的表格里,所以我们直接获取其DOM结构的内容:

image.png

  1. 如上所示,我们获取它的tr,观察其tr结构

image.png

  1. 一共有2133行,从网页中看到他又许多类目,如:face-smilingface-affection

image.png
image.png
我们将考虑一步步把它渲染成我们想要的数组,如:分几大类,每一大类有这些所属表情。正如表格结构所示,但这恰恰需要我们手动操作。

  1. 将所有tr保存为一个变量,但因为没有map方法难以便利,我们想把它变为数组

image.png

  1. 接着,我们要获取所有类目了
  • 我们要获取的是每一项的序列1,因为这一个才是我们想要获得的uniCode编码
  • 我们打印出每一项的序列0,发现:class为‘mediumhead、rchars’的th标签是表头,所以我们要筛选出他们

image.png
image.png

  • 这样的结构,我们就清晰明了了image.png
  • 接着我们创建一个result,result第一项放类目,第二项放存着unicode编码的数据

image.png

  1. 打印查看数据获取正确

image.png
image.png

  1. 到这里,我们的数据基本获取完成,但例如'U+1F600'肯定是不行的。

image.png
image.png
注意:U => u、添加 ’\‘、超过四位要用‘{}’包裹起来

数据处理

正则
匹配前:‘U+1F600’
匹配后: '\u{1F600}'
方法: U+([0-9a-f]{4,5})
替换为:\u{$1}