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 相关文章推荐
短信提示使用 特效
Jan 19 Javascript
JavaScript基础知识之数据类型
Aug 06 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 Javascript
vue实现可拖拽的dialog弹框
May 13 Vue.js
详解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页面间传递参数实例代码
2008/06/05 PHP
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
有趣的javascript数组定义方法
2010/09/10 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
JavaScript中的闭包
2016/02/24 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
Python greenlet实现原理和使用示例
2014/09/24 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
python求质数的3种方法
2018/09/28 Python
int在python中的含义以及用法
2019/06/27 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
医院护士的求职信
2014/01/03 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis