专栏首页Mintimate's Blog如何使用JavaScript,纯前端实现字符、字数统计?
原创

如何使用JavaScript,纯前端实现字符、字数统计?

作者:Mintimate

博客:https://www.mintimate.cn

Mintimate's Blog,只为与你分享

封面

统计字数/字符

平时,在写一些报告时,需要统计字数;亦或者,我们在填写一些信息,有字数要求。这个时候,大部分人会打开Word,进行字数统计。这样效率过低,且无法模块化移植。(而且macOS启动Microsoft Word挺慢的😪……)

本次给大家介绍,如何使用JavaScrip前端统计输入内容所包含的字符和字数。稍微美化一下,放到服务器里,以后统计文字字数就不用等Word加载了🤔。

实现效果

在线演示🖥

为了让大家更方便理解,什么是统计字数。我做了一个在线统计字数的网站。原理就是本篇文章:

Mintimate-纯粹在线工具:https://www.flyinbug.cn

实现逻辑🤖

首先,我们把段落才分成一个一个的字节,HTML里我们打一个ID:content,之后用JS用来获取用户输入的段落(标签我们使用textarea标签)。对于Javascript部分,我们引用jQuery:

// 获取段落内容
Words = $('#content').val();

对于拆分段落内容为字符,我们使用charAT方法即可将字符串转为字符数组,配合循环遍历即可完成统计:

// 标点和中文
var sTotal = 0;
// 中文字判断
var iTotal = 0;
// 英文字母
var eTotal = 0;
// 数字判断
var inum = 0;
for (i = 0; i < Words.length; i++) {
    var c = Words.charAt(i);
    if (c.match(***)) {
    //判断
    }
}

最后的判断,也是个难题,如何判断?主要有两个要点:

  • 正则表达式
  • Unicode编码判断

判断规则⚖️

正则表达式

可以看到,我们前面逻辑判断语句:

var c = Words.charAt(i);
    if (c.match(***)) {
    //判断
    }

其中的match方法可能很多人平时没用,该方法是:可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。

而正则表达式,是出自Unix,这注定正则表达式的泛用。使用正则表达式可以快速匹配目标内容。举个例子,如果你要匹配一段字符串,是否包含字符abc,只需要用正则表达式:/[abc]/即可。

Unicode编码

常用的编码,一般为UTF-8、UTF-16等。至于什么是编码,其实就是我们使用的文字对应一个机械代码:

# helloworld
\u0068\u0065\u006c\u006c\u006f\u0077\u006f\u0072\u006c\u0064

而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编码段,所以使用正则表达式,匹配每个字是否为中文:

for (i = 0; i < Words.length; i++) {
     var c = Words.charAt(i);
     //基本汉字
     if (c.match(/[\u4e00-\u9fa5]/)) {
         iTotal++;
         }
     //基本汉字补充
    else if (c.match(/[\u9FA6-\u9fcb]/)){
        iTotal++;
        }
}

所以:

中文字数=iTotal

统计英文和数字

for (i = 0; i < Words.length; i++) {
    var c = Words.charAt(i);
    if (c.match(/[^\x00-\xff]/)) {
        sTotal++;
    }
    else {
         eTotal++;
    }
    if (c.match(/[0-9]/)) {
        inum++;
    }
}

这边解释一下:

  • /[^\x00-\xff]/:匹配所有非双字节的字符。
  • /[0-9]/:匹配数字0到9

理论上,sTotal包含:中文字中文全角字符(如:?。、,等)。所以:

中文全角标点=iTotal-sTotal 数字=inum

字数=inum + iTotal

标点=sTotal - iTotal

字母=eTotal - inum

字符=iTotal * 2 + (sTotal - iTotal)* 2 + eTotal

换成JS+JQ代码:

    //汉字
    $('#hanzi').text(iTotal);
    //字数
    $('#zishu').text(inum + iTotal);
    //标点
    $('#biaodian').text(sTotal - iTotal);
    //字母
    $('#zimu').text(eTotal - inum);
    //数字
    $('#shuzi').text(inum);
    //字符
    $("#zifu").text(iTotal * 2 + (sTotal - iTotal) * 2 + eTotal);
绑定的元素

总结📝

使用JavaScript,轻松前端进行字符和字数的统计。减轻后端压力。并且,本方法使用正则表达和Unicode字符判断,理论上可以一直到任何平台

原创声明,本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

登录 后参与评论
0 条评论

相关文章

  • 如何在纯 JavaScript 中使用 GraphQL

    除了 REST 以外,很多 API 都开始支持 GraphQL,甚至完全支持它了。但是,如果你需要使用一个 GraphQL API,你很自然就会想到自己需要使用...

    深度学习与Python
  • 使用 LetterAvatar 实现纯前端生成字母头像

    偶然发现码云上有个非常人性化的细节:会自动给没头像的用户生成一个昵称首字符的彩色头像,关键是打开控制台一看,发现这头像居然还是在前端实时生成的 这就很有意思了!

    王图思睿
  • 前端: 轻松教你使用纯css实现水波动画

    css3给我们前端开发带来了很多便利, 我们可以使用css3 的新特性实现各种形状和动效, 接下来笔者就来带大家介绍如何用css3实现 H5-Dooring编辑...

    徐小夕
  • 前端面试 【JavaScript】— JS如何实现继承?

    这样写的时候子类虽然能够拿到父类的属性值,但是问题是父类原型对象中一旦存在方法那么子类无法继承。

    越陌度阡
  • 使用 FFmpeg 与 WebAssembly 实现纯前端视频截帧

    | 导语  随着短视频兴起,音视频技术已经越来越火热,或许你之前有了解过如何在前端处理音视频,但随着视频文件的逐渐增大、用户体验要求的不断提高,纯前端处理音视频...

    用户1097444
  • 如何使用WijmoJS 纯前端设计器,快速生成 Angular 应用

    除了WijmoJS 的可视化在线设计器之外(在这里阅读基于Web的WijmoJS Designer),我们刚刚发布了针对Angular开发的Visual Stu...

    葡萄城控件
  • 如何使用SAP CRM WebClient UI实现一个类似新浪微博的字数统计器

    In the blog we talk about the social media integration into CRM Interaction cent...

    Jerry Wang
  • 如何使用纯前端控件集 WijmoJS 中的可视化在线设计器

    WijmoJS Designer,一种全新的在线Web托管工具,为WijmoJS纯前端控件集提供了可视化设计图面和 Java代码生成器。 WijmoJS Des...

    葡萄城控件
  • Javascript中如何实现对象的深拷贝 (前端高频面试题)

    最近参加百度前端训练营有节课讲到了JS对象的深拷贝,于是上网搜了一下相关文章,发现这是面试高频考题,于是乎写篇文章总结一下。

    henu_Newxc03
  • 教程 | 如何使用JavaScript实现GPU加速神经网络

    选自Towards Data Science 作者:Sebastian Kwiatkowski 机器之心编译 参与:Nurhachu Null、路雪 本文作者 ...

    机器之心
  • 不使用任何框架,手写纯 JavaScript 实现上传本地文件到 ABAP 服务器

    采用 SAP UI5 sap.ui.unified.FileUploader 控件,结合 Gateway 框架,实现本地文件上传到 ABAP 服务器,不是一件困...

    Jerry Wang
  • 教程 | 如何使用纯NumPy代码从头实现简单的卷积神经网络

    在某些情况下,使用 ML/DL 库中已经存在的模型可能会很便捷。但为了更好地控制和理解模型,你应该自己去实现它们。本文展示了如何仅使用 NumPy 库来实现 C...

    IT派
  • 《前端5分钟》之使用纯css实现网站换肤和焦点图切换动画

    今天我们来继续复盘一些工作中常用的css技巧和知识,以便我们可以更加优雅的用css实现富有动感的网站.

    徐小夕
  • 教程 | 如何使用纯NumPy代码从头实现简单的卷积神经网络

    机器之心
  • 如何使用JavaScript实现前端导入和导出excel文件(H5编辑器实战复盘)

    最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Do...

    徐小夕
  • 如何在Ubuntu 14.04上使用Bower管理前端JavaScript和CSS依赖项

    Bower是前端模块的包管理器,通常由JavaScript和/或CSS组成。它使我们可以轻松搜索,安装,更新或删除这些前端依赖项。

    SQL GM
  • 【前端自动化】如何使用Node.js实现热重载页面

    前不久我结合browser-sync+gulp+gulp-nodemon实现了一款生产环境热更新(我之前理解有点偏差,应该定义为热更新,不是热重载)的项目脚手架...

    Vam的金豆之路
  • 前端面试 【JavaScript】— 0.1+0.2为什么不等于0.3?如何实现等于0.3?

    计算机中用二进制来存储小数,大部分小数转成二进制之后都是无限循环的值,因此存在取舍问题,也就是精度丢失。

    越陌度阡

扫码关注腾讯云开发者

领取腾讯云代金券