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

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

上面排的是两个英文字母,一个汉字,一个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. css 样式 设置图片成为圆形

    <div style="float: left;border-radius:70%; height: 80px; overflow:hidden;"> <img ...

  2. angularLoad(用以异步加载js文件)

    angularLoad(用以异步加载js文件) 使用方法: 1.执行命令 下载 lib npm install angular-load --save 2.index.html引用js <scr ...

  3. js 实现图片压缩并转换成base64(data:image/jpeg;base64)格式

    <!DOCTYPE html> <html> <head> <!--by 0o晓月メ http://www.cnblogs.com/final-elysion ...

  4. 【Socket】Java Socket基础编程

    Socket是Java网络编程的基础,了解还是有好处的, 这篇文章主要讲解Socket的基础编程.Socket用在哪呢,主要用在进程间,网络间通信.本篇比较长,特别做了个目录: 一.Socket通信基 ...

  5. js实现图片旋转、模板文件查看图片大图之记录篇[二]

    一个小小的前端需求送给大家,使用js实现图片旋转,并且点击图片能够实现规定格式的大图. 主要使用的是jQuery的delegate()方法实现图片旋转,该方法主要的功能就是给某个组件绑定一个或一组事件 ...

  6. web.xml is missing and <failOnMissingWebXml> is se

    摘要 maven模块化 在学习maven模块化构建项目的时候遇到了如下报错信息: web.xml is missing and <failOnMissingWebXml> is set t ...

  7. zlib报“LNK2001:无法解析的外部符号”错误

    这个错误一般是由使用导出dll时未加载对应的lib文件导致的,但是工程在正确配置了lib文件的情况下仍然报这个错误,经查,是由于dll导入工程和dll导出工程的函数调用约定不一致导致的. 一.函数调用 ...

  8. visual studio错误中断处理

    点击将错误黏贴到剪贴板,复制到文本文件中.具体错误原因即可查出.

  9. Linux查看内存占用情况

    输入:top PID 进程的ID USER 进程所有者 PR 进程的优先级别,越小越优先被执行 Ninice 值 VIRT 进程占用的虚拟内存 RES 进程占用的物理内存 SHR 进程使用的共享内存 ...

  10. 初学 Python(十四)——生成器

    初学 Python(十四)--生成器 初学 Python,主要整理一些学习到的知识点,这次是生成器. # -*- coding:utf-8 -*- ''''' 生成式的作用: 减少内存占有,不用一次性 ...