如何实现字符/中文字数统计?JS代码实现详解
本文最后更新于 2023年9月17日 上午
统计字数/字符
平时,在写一些报告时,需要统计字数;亦或者,我们在填写一些信息,有字数要求。这个时候,大部分人会打开Word,进行字数统计。这样效率过低,且无法模块化移植。(而且macOS启动Microsoft Word挺慢的😪……)
本次给大家介绍,如何使用JavaScrip前端统计输入内容所包含的字符和字数。稍微美化一下,放到服务器里,以后统计文字字数就不用等Word加载了🤔。
在线演示🖥
为了让大家更方便理解,什么是统计字数。我做了一个在线统计字数的网站。原理就是本篇文章:
本文章同步发布于:
- 腾讯云社区:如何使用JavaScript,纯前端实现字符、字数统计?
- Mintimate的知乎:如何使用JavaScript,纯前端实现字符、字数统计?
- CSDN:如何使用JavaScript,纯前端实现字符、字数统计?
实现逻辑🤖
首先,我们把段落才分成一个一个的字节,HTML
里我们打一个ID:content
,之后用JS用来获取用户输入的段落(标签我们使用textarea
标签)。对于Javascript部分,我们引用jQuery
:
1 |
|
对于拆分段落内容为字符,我们使用charAT
方法即可将字符串转为字符数组,配合循环遍历即可完成统计:
1 |
|
最后的判断,也是个难题,如何判断?主要有两个要点:
- 正则表达式
- Unicode编码判断
判断规则⚖️
正则表达式
可以看到,我们前面逻辑判断语句:
1 |
|
其中的match
方法可能很多人平时没用,该方法是:可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。
而正则表达式,是出自Unix,这注定正则表达式的泛用。使用正则表达式可以快速匹配目标内容。举个例子,如果你要匹配一段字符串,是否包含字符abc,只需要用正则表达式:/[abc]/
即可。
Unicode编码
常用的编码,一般为UTF-8、UTF-16等。至于什么是编码,其实就是我们使用的文字对应一个机械代码:
1 |
|
而Unicode上,不同国家的字集是分区块的,我们需要用到的:
字符集 | 字数 | Unicode 编码 |
---|---|---|
基本汉字 | 20902字 | 4E00-9FA5 |
基本汉字补充 | 38字 | 9FA6-9FCB |
扩展A | 6582字 | 3400-4DB5 |
扩展B | 42711字 | 20000-2A6D6 |
扩展C | 4149字 | 2A700-2B734 |
扩展D | 222字 | 2B740-2B81D |
康熙部首 | 214字 | 2F00-2FD5 |
部首扩展 | 115字 | 2E80-2EF3 |
兼容汉字 | 477字 | F900-FAD9 |
兼容扩展 | 542字 | 2F800-2FA1D |
PUA(GBK)部件 | 81字 | E815-E86F |
部件扩展 | 452字 | E400-E5E8 |
PUA增补 | 207字 | E600-E6CF |
汉字笔画 | 36字 | 31C0-31E3 |
汉字结构 | 12字 | 2FF0-2FFB |
汉语注音 | 22字 | 3105-3120 |
注音扩展 | 22字 | 31A0-31BA |
〇 | 1字 | 3007 |
数字0-9 | 10字 | 30-39 |
小写英文字母 | 26字 | 61-7a |
大写英文字母 | 26字 | 41-5a |
而汉字的Unicode范围为\u4E00-\u9FA5
。这意味着:如果你要判断字是否为汉字,那么最基本只需要判断是否在这个区间即可。
代码实现✌️
最后,终于讲到大家期待的代码实现部分了。不过,相信大家看了上诉分析,应该都用思路了~~
统计中文
按刚刚所说,我们使用Unicode编码配合正则表达式进行中文字节统计:
\u4E00-\u9FA5
为中文Unicode编码段,所以使用正则表达式,匹配每个字是否为中文:
1 |
|
所以:
中文字数=
iTotal
统计英文和数字
1 |
|
这边解释一下:
/[^\x00-\xff]/
:匹配所有非双字节的字符。/[0-9]/
:匹配数字0到9
理论上,sTotal
包含:中文字
、中文全角字符(如:?。、,等)
。所以:
中文全角标点=
iTotal
-sTotal
数字=inum
字数=inum
+ iTotal
标点=sTotal
- iTotal
字母=eTotal
- inum
字符=iTotal
* 2 + (sTotal - iTotal)
* 2 + eTotal
换成JS+JQ代码:
1 |
|
总结📝
使用JavaScript,轻松前端进行字符和字数的统计。减轻后端压力。并且,本方法使用正则表达和Unicode字符判断,理论上可以一直到任何平台。
作者:Mintimate
Mintimate’s Blog,只为与你分享