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 相关文章推荐
JSON 学习之完全手册 图文
May 29 Javascript
javascript中的继承实例代码
Apr 27 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
node.js中的socket.io入门实例
Apr 26 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 Javascript
Javascript webpack动态import
Apr 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
PHP&amp;MYSQL服务器配置说明
2006/10/09 PHP
用PHP和ACCESS写聊天室(九)
2006/10/09 PHP
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
对numpy中的数组条件筛选功能详解
2018/07/02 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
基于Django实现日志记录报错信息
2019/12/17 Python
python批量处理txt文件的实例代码
2020/01/13 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
Python列表如何更新值
2020/05/27 Python
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
2013年学期结束动员演讲稿
2014/01/07 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
给校长的建议书100字
2014/05/16 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
民事和解协议书格式
2014/11/29 职场文书
婚礼答谢词
2015/01/04 职场文书
工作表扬信范文
2015/01/17 职场文书
请假条应该怎么写?
2019/06/24 职场文书