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:地址栏载入脚本代码
Oct 13 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
turn.js异步加载实现翻书效果
Jul 25 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
javascript 易错知识点实例小结
Apr 25 Javascript
js实现简单扫雷
Nov 27 Javascript
vue实现tab栏点击高亮效果
Aug 19 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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
如何正确理解PHP的错误信息
2006/10/09 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
wxPython学习之主框架实例
2014/09/28 Python
Python实现堆排序的方法详解
2016/05/03 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
python使用mysql的两种使用方式
2018/03/07 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
python列表推导式入门学习解析
2019/12/02 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
Python多线程正确用法实例解析
2020/05/30 Python
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
儿科主治医生个人求职信
2013/09/23 职场文书
高中毕业自我鉴定
2013/12/22 职场文书
运动会跳远广播稿
2014/02/04 职场文书
小学新学期寄语
2014/04/02 职场文书
会员卡清退活动总结
2014/08/27 职场文书
大学生村官个人总结
2015/02/15 职场文书
考研英语辞职信
2015/05/13 职场文书
田径运动会广播稿
2015/08/19 职场文书
浅谈克隆 JavaScript
2021/11/02 Javascript
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers