前言
公司項(xiàng)目中的聊天模塊有表情鍵盤，其中包含一系列的 Emoji 表情，方便用戶在文字中插入 Emoji。
最近產(chǎn)品希望重新排列 Emoji 列表的順序，將用戶常用的放到前面。需求文檔類似下圖。
文檔是包含一系列 Emoji 字符的文本，而項(xiàng)目代碼中定義的 Emoji 列表，列表每項(xiàng)是 Emoji 字符對(duì)應(yīng)的 Unicode 編碼。所以直接復(fù)制粘貼是不行的，為了實(shí)現(xiàn)需求，還需要轉(zhuǎn)換處理。
原理解析
文檔中的文本，是 UTF-8 編碼的字符串，其中包含了多個(gè) Emoji 字符。
一個(gè) Emoji 字符，會(huì)對(duì)應(yīng) UTF-8 編碼的多個(gè)字節(jié)，比較常見(jiàn)的為4個(gè)字節(jié)。
在 Java 的字符串中，以 surrogate pair 的形式展示多字節(jié)的 Unicode 字符。比如復(fù)制 ?? 到 String，結(jié)果是"\uD83D\uDE03"。
方案1：純 Java 實(shí)現(xiàn)
0.大概過(guò)程：文本 -> String(Java) -> Unicode list
??
方案2：借助工具
0.整體過(guò)程：文本 -> Unicode(HTML表格) -> Unicode list
1.文本解析：文本 -> Unicode(HTML表格)
網(wǎng)頁(yè)工具Unicode character inspector，可以解析一段文本，以表格的形式詳細(xì)展示文本中出現(xiàn)的每一個(gè)字符，相同字符只顯示一個(gè)，效果如圖。其中 Code 即是 Unicode code
將需求文檔中的 Emoji 字符全部輸入后，就可以得到每個(gè) Emoji 的 Unicode code 了。但是至此得到的是一個(gè)網(wǎng)頁(yè)表格，總不能挨個(gè)復(fù)制 code 吧？當(dāng)然不能，程序員的基本修養(yǎng)，能用代碼實(shí)現(xiàn)的事兒，咱就絕不手工來(lái)。下一步咱們就來(lái)解析網(wǎng)頁(yè)，取得我們需要的數(shù)據(jù)。
2.網(wǎng)頁(yè)解析：Unicode(HTML表格) -> Unicode list
使用Chrome的開(kāi)發(fā)者工具查看網(wǎng)頁(yè)源碼，在左側(cè)網(wǎng)頁(yè)中鼠標(biāo)指向目標(biāo)數(shù)據(jù)，右側(cè)Elements中會(huì)自動(dòng)定位到對(duì)應(yīng)源碼，如下圖：
可以看到，網(wǎng)頁(yè)表格中的數(shù)據(jù)，在源碼中是很有規(guī)律的。可以通過(guò)正則表達(dá)式，捕獲網(wǎng)頁(yè)中每個(gè) Emoji 對(duì)應(yīng)的 Unicode code，存入列表。
正則的編寫(xiě)與調(diào)試借助了網(wǎng)頁(yè) regex101，可視化調(diào)試正則。
基本思路，先定位目標(biāo)字符塊<code class=\"hex\">(\S*?)</code>，然后增加更多特征防止匹配錯(cuò)誤，這里判斷了 Code 之前的 Symbola 列<td class=\"text symbola\">
腳本編寫(xiě)使用 Python 2.7，代碼如下：
import re
content = open("emoji.html", 'r').read()
matches = re.findall('<td class=\"text symbola\">[\s\S]*?<code class=\"hex\">(\S*?)</code>', content)
results = []
for match in matches:
results.append(int(match, 16))
print results
3.網(wǎng)頁(yè)解析改進(jìn)：使用HTML解析器
碰巧有同事分享了自己解析網(wǎng)頁(yè)的經(jīng)驗(yàn)，用的HTML解析器，這可比枯燥的正則要強(qiáng)多了，可讀性提高n個(gè)次方，修改也更容易。于是咱也鳥(niǎo)槍換炮，來(lái)試試專業(yè)工具。
HTML解析器使用 BeautifulSoup，安裝與使用可參考官方文檔。
基本思路，先找到 table，然后遍歷每一行，再查找每一行中的 code。
最終代碼如下：
import bs4
soup = bs4.BeautifulSoup(open("emoji.html"), "html.parser")
table = soup.find("table", "table table-bordered table-striped").find("tbody").contents
results = []
for tab in table:
if isinstance(tab, bs4.element.Tag):
result = int(tab.find("code", "hex").string, 16)
results.append(result)
print results
可以看到，相比之前的正則表達(dá)式，雖然代碼增加了，但是可讀性卻好很多，基本就是將剛剛的思路逐行翻譯成代碼。
代碼的可讀性對(duì)于維護(hù)至關(guān)重要，比如之前的正則表達(dá)式，可能一個(gè)月之后我自己也不知道是什么意思了。如果那時(shí)需要修改邏輯，那么基本相當(dāng)于重寫(xiě)。
