ThinkSNS(簡稱TS),一款全平臺綜合性社交系統,目前最新版本爲ThinkSNS+、ThinkSNS V4 ThinkSNS【簡】。html
今天咱們來聊一下可能不少人都會頭疼的東西:顯示長度。前端
需求是這樣的,在字符的顯示上,兩個英文單詞才佔一箇中文或者其餘語言的顯示長度。以下:webpack
上面排的是兩個英文字母,一個漢字,一個Emoji。你會發現,在顯示上佔的寬度是一致的。一些設計上爲了好看也要求有這樣的處理。git
例如,咱們的用戶名需求是最多12個非單字節字符或者24個單字節字符的需求也能夠混合排的需求,咱們寫後端不得不處理這樣的驗證了。github
需求規則是 /^[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*$/web
在ThinkSNS+中,爲了能把這部分驗證公用,因此選擇使用自定義驗證規則。咱們先說下計算的實現思路吧!後端
首先,就算是mb_strlen也無法準確的獲取多字節字符和單子節字符混合在一塊兒的長度,網上有個說法,漢字佔三個字節,英文數組半角符號佔一個字節,因此:數組
用這個方法能夠獲得單字節佔0.5多字節佔1的計算。可是以中文爲例,只有兩萬個漢字纔是這種狀況,還有六萬多漢字是四個,其次,emoji也是四個字節。根本沒法準確的計算。函數
好在在無心間發現一個奇怪的東西str_word_count 這個函數計算非英文單詞外是除了符號例如中文就是按照漢字個數算的,emoji也是同理。優化
發現這個之後,我們就好辦了。咱們吧用戶名中的 [a-aA-Z0-9_] 剔除掉,單獨計算不就是咱們要的驗證長度了嗎?
因此,首先咱們用:
方式單獨計算出單字節字符的顯示長度,再用:
方式計算出多字節的長度,最後:
就得出了顯示長度,實現了,最後封裝成驗證規則:
代碼是原型代碼,尚未進行優化,以後咱們只要按照下面的方式用:
如今就很好的解決了這個需求。
咱們很樂意,將基於 Laravel 的 ThinkSNS+ 產品開發中的技術解決方案分享給你們,也但願喜歡的朋友能給國內開源產品一點點的支持。
往期研發日記回顧:
《ThinkSNS+基於 Laravel master 分支【研發日記一】》
《ThinkSNS+研發中前端的抉擇(webpack/Vue)踩坑日記【研發日記二】》
《基於 Laravel Route 的 ThinkSNS+ Component【研發日記三】》
《如何作到 Laravel 配置能夠網站後臺配置【研發日記四】》
開源代碼倉庫:
GitHub:https://github.com/zhiyicx/thinksns-plus(點擊star,每日關注開發動態。)