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,每日关注开发动态。)