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 相关文章推荐
Jquery 基础学习笔记
May 29 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
jquery 获取标签名(tagName)示例代码
Jul 11 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
bootstrap select下拉搜索插件使用方法详解
Nov 23 Javascript
使用百度地图实现地图网格的示例
Feb 06 Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 Javascript
js prototype深入理解及应用实例分析
Nov 25 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中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
php动态绑定变量的用法
2015/06/16 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
Javascript var变量隐式声明方法
2009/10/19 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
nodejs中安装ghost出错的原因及解决方法
2017/10/23 NodeJs
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
Python中如何定义一个函数
2016/09/06 面试题
工程学毕业生自荐信
2014/06/14 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
单位政审意见范文
2015/06/04 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers