今天我们来聊一下可能很多人都会头疼的东西:显示长度。

需求是这样的,在字符的显示上,两个英文单词才占一个中文或者其他语言的显示长度。如下:

上面排的是两个英文字母,一个汉字,一个Emoji。你会发现,在显示上占的宽度是一致的。一些设计上为了好看也要求有这样的处理。

例如,我们的用户名需求是最多12个非单字节字符或者24个单字节字符的需求也可以混合排的需求,我们写后端不得不处理这样的验证了。

需求规则是 /^[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*$/

在ThinkSNS+中,为了能把这部分验证公用,所以选择使用自定义验证规则。我们先说下计算的实现思路吧!

首先,就算是mb_strlen也没法准确的获取多字节字符和单子节字符混合在一起的长度,网上有个说法,汉字占三个字节,英文数组半角符号占一个字节,所以:


用这个方法可以得到单字节占0.5多字节占1的计算。但是以中文为例,只有两万个汉字才是这种情况,还有六万多汉字是四个,其次,emoji也是四个字节。根本无法准确的计算。

好在在无意间发现一个奇怪的东西str_word_count 这个函数计算非英文单词外是除了符号例如中文就是按照汉字个数算的,emoji也是同理。

发现这个以后,咱们就好办了。我们吧用户名中的 [a-aA-Z0-9_] 剔除掉,单独计算不就是我们要的验证长度了吗?

所以,首先我们用:


方式单独计算出单字节字符的显示长度,再用:

方式计算出多字节的长度,最后:

就得出了显示长度,实现了,最后封装成验证规则:

代码是原型代码,还没有进行优化,之后我们只要按照下面的方式用:

现在就很好的解决了这个需求。

我们很乐意,将基于 Laravel 的 ThinkSNS+ 产品开发中的技术解决方案分享给大家,也希望喜欢的朋友能给国内开源产品一点点的支持。

【开源代码仓库】

GitHub:https://github.com/zhiyicx/thinksns-plus(点击star,每日关注开发动态。)

社交系统ThinkSNS官网:http://www.thinksns.com/

开源不易,为了争取开源,我们团队做了很多努力。把基于Laravel的作品展示在大家面前,之后专栏会持续不断的分享ThinkSNS +开发过程中的技术细节。

【社交系统研发日记五】ThinkSNS+如何计算字符显示长度?的更多相关文章

  1. ThinkSNS+ alpha.2 版本发布,功能抢先看!【社交系统研发日记六】

    今天的研发日记,我们不讲技术,我们来看看,社交系统TS+从今天开始全面内测开始,都发布了什么功能. 其实,alpha.1 早上打的 tag ,晚上因为增加了两个核心功能,所以又打了 alpha.2 t ...

  2. 【开源社交系统研发日记】利用 Docker 包 Laradock 服务器部署 Laravel & ThinkSNS+ 等程序实战(多项目)

    什么是ThinkSNS+ ThinkSNS(简称TS),一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案,目前最新版本为ThinkSNS+. 前段时间不知道抽上面疯 ...

  3. 【社交系统研发日记】如何在 Laravel 中 “规范” 的开发验证码发送功能

    顺便发个小通知:7月15日ThinkSNS+开源版发布,同时非开源的APP也走出内测阶段,体验二维码也全面发布体验. 什么是ThinkSNS ? ThinkSNS(简称TS),一款全平台综合性社交系统 ...

  4. 关于 Overtrue 的拼音库 overtrue/pinyin 为何 travis 为 error【社交系统研发日记十】

    什么是ThinkSNS ? ThinkSNS(简称TS),一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案,目前最新版本为ThinkSNS+(简称TS+).社交系统 ...

  5. ThinkSNS+ 是如何计算字符显示长度的

    什么是ThinkSNS+ ThinkSNS(简称TS),一款全平台综合性社交系统,目前最新版本为ThinkSNS+.ThinkSNS V4 ThinkSNS[简]. 今天我们来聊一下可能很多人都会头疼 ...

  6. 【社交系统ThinkSNS+研发日记三】基于 Laravel Route 的 ThinkSNS+ Component

    [社交系统ThinkSNS+研发日记系列] 一.<ThinkSNS+ 基于 Laravel master 分支,从 1 到 0,再到 0.1> 二.<基于 Laravel 开发 Th ...

  7. 如何做到 Laravel 配置可以网站后台配置【社交系统ThinkSNS+研发日记四】

    距离上一次分享差不多一周了,本文分享下利用 Laravel 的 Bootstrapping 达到网站后台设置 laravel 配置. 需求场景 首先,ThinkSNS+ 作为一个用户可以使用的「社交系 ...

  8. 开源社交系统ThinkSNS+ 0.7.3研发周报

    什么是ThinkSNS+ ThinkSNS(简称TS),一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案,目前最新版本为ThinkSNS+. 亲爱的粉丝,授权客户, ...

  9. 社交系统ThinkSNS+在研发过程中,如何做到 Laravel 配置可以网站后台配置

    什么是ThinkSNS+ ThinkSNS(简称TS),一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案. 本文分享下利用 Laravel 的 Bootstrapp ...

随机推荐

  1. java网络编程之socket(2)

    异步处理多客户端连接服务端 上篇讲到的是服务端接收一个客户端的请求之后就结束了,不能再接收其他客户端的请求了,实际情况上我们希望服务端能够处理来自不同用户的请求. 想到这里,或许我们可以用一个死循环, ...

  2. 打包可执行的jar

    #配置项目路径 *除程序文件以外,其他相关素材也可以打包进jar,但在内部访问时需以包名作为跟路径,如hello/xxx/yyy.zzz mkdir hello vi hello/HelloWorld ...

  3. [基础架构]PeopleSoft Application Server 重要文件说明

    我们都知道PeopleSoft是由几个不同的服务组成的,他们在PeopleSoft体系结构中扮演着自己的角色.这些服务具有不同的文件结构并包含重要的可执行文件和配置文件. 以下是Peoplesoft体 ...

  4. JAVA程序打包成exe小程序的过程

    编程软件:myeclipse2014 打包exe软件:exe4j 1:在myeclipse2014新建java项目编写程序 2:打包成jar,分两种情况(有无外部依赖包) 无外部依赖包:点击项目--- ...

  5. 只有第三方控件pas代码生成控件

    如果他人的VCl控件只有pas代码,如何生成控件? 步骤:1.new Pakage(bpl ) 2.在Contains中Add VCl***.pas 3.再Complie ,Install 即可 XE ...

  6. 关于单页应用(SPA)的经验之谈

    时下SPA单页应用如火如荼,对前端乃至后端开发都带来不小的冲击和变革.笔者整理了下笔记,决定写一下以前基于iframe做单页博客的一些经验方法. 对于单页应用,笔者没有找到最官方的定义.在笔者看来,在 ...

  7. Ambari架构原理

    不多说,直接上干货! Ambari 架构原理图 通过三张图来说明: 第一张架构图告诉我们:Ambari是Hortonworks贡献给社区的.完全开源的.Hadoop生态的集群管理.监控.部署的工具: ...

  8. 使用WordPress快速建站

    安装前的准备1.下载最新版的 WordPress (这里演示为WordPress 3.5 官方中文版),解压后,将WordPress文件夹里面的所有文件,上传到你的主机空间域名所绑定的根目录.2.新建 ...

  9. vue数据绑定原理

    一.定义 vue的数据双向绑定是基于Object.defineProperty方法,通过定义data属性的get和set函数来监听数据对象的变化,一旦变化,vue利用发布订阅模式,通知订阅者执行回调函 ...

  10. 解决win10注册错误 错误代码0x8002801c

    使用win10的过程中经常碰到各种注册错误,让人抓狂!!! 现在分享一个完美的解决方法(非原创): 最简洁的办法是:1.自行将msinet.ocx(win10系统64位)组件复制到C:\Windows ...