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 Select标记中options操作方法集合
Oct 22 Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
JQuery优缺点分析说明
Apr 10 Javascript
javascript arguments使用示例
Dec 16 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
js随机生成网页背景颜色的方法
Feb 26 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
Javascript中的this,bind和that使用实例
Dec 05 Javascript
详解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猴子选大王问题解决方法
2015/05/12 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
React实现全选功能
2020/08/25 Javascript
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
4s店总经理岗位职责
2013/12/31 职场文书
学子宴答谢词
2014/01/25 职场文书
音乐教育感言
2014/03/05 职场文书
红色故事演讲稿
2014/05/22 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
辞职信如何写
2015/02/27 职场文书
会议新闻稿
2015/07/17 职场文书
MySQL七大JOIN的具体使用
2022/02/28 MySQL
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js