JS实现区分中英文并统计字符个数的方法示例


Posted in Javascript onJune 09, 2018

本文实例讲述了JS实现区分中英文并统计字符个数的方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>js区分中英文统计字符个数</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel=" rel="external nofollow" stylesheet">
</head>
<body>
  <input type="text" value="" id="str"><span id="showcontent"></span><!-- 此处原来使用的label标签,但是设置其innerHTML的值在ie8上报错,故换为span标签 -->
  <script type="text/javascript">
  var countnums=(function(){
    var trim=function(strings){
      return (strings||"").replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g,"");//+表示匹配一次或多次,|表示或者,\s和\u00A0匹配空白字符,/^以……开头,$以……结尾,/g全局匹配,/i忽略大小写
    }
    return function(_str){
      _str=trim(_str);  //去除字符串的左右两边空格
      var strlength=_str.length;
      if(!strlength){  //如果字符串长度为零,返回零
        return 0;
      }
      var chinese=_str.match(/[\u4e00-\u9fa5]/g); //匹配中文,match返回包含中文的数组
      return strlength+(chinese?chinese.length:0); //计算字符个数
    }
  })();
  function count(tThis){
    var charnum=countnums(tThis.value)
      var showid=document.getElementById("showcontent");
      showid.innerHTML="您总共输入了"+charnum+"个字符";
  }
  window.onload=function(){
    var str=document.getElementById("str");
    str.onkeypress=function(){
      count(this);
    }
    str.onkeyup=function(){
      count(this);
    }
  }
  </script>
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具 http://tools.3water.com/code/HtmlJsRun测试后运行结果如下:

JS实现区分中英文并统计字符个数的方法示例

Javascript 相关文章推荐
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
JavaScript执行效率与性能提升方案
Dec 21 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
angular的输入和输出的使用方法
Sep 22 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
vue组件化中slot的基本使用方法
May 01 Javascript
vue实现菜单切换功能
May 08 Javascript
el-table树形表格表单验证(列表生成序号)
May 31 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
详解angular脏检查原理及伪代码实现
Jun 08 #Javascript
解析vue路由异步组件和懒加载案例
Jun 08 #Javascript
node中modules.exports与exports导出的区别
Jun 08 #Javascript
Vue不能观察到数组length的变化
Jun 08 #Javascript
Node.js中的child_process模块详解
Jun 08 #Javascript
详解使用 Node.js 开发简单的脚手架工具
Jun 08 #Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 #Javascript
You might like
php懒人函数 自动添加数据
2011/06/28 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
laravel-admin的多级联动方法
2019/09/30 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
使用Python实现一个简单的项目监控
2015/03/31 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
python字典的值可以修改吗
2020/06/29 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
初中生三年学习生活的自我评价
2013/11/03 职场文书
服务员自我评价
2014/01/25 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
法人身份证明书
2015/06/18 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫