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 指南/入门基础
Nov 30 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
Javascript基础教程之变量
Jan 18 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
layui动态渲染生成select的option值方法
Sep 23 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 Javascript
js利用拖放实现添加删除
Aug 27 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
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
PHP页面间传递参数实例代码
2008/06/05 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
JS 常用校验函数
2009/03/26 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
详解Python中with语句的用法
2015/04/15 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
python中pyplot基础图标函数整理
2020/11/10 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
自荐信如何“自荐”
2013/10/24 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
模范家庭事迹材料
2014/02/10 职场文书
减负增效提质方案
2014/05/23 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
评先进个人材料
2014/12/29 职场文书
欢迎词怎么写
2015/01/23 职场文书
国庆节主题班会
2015/08/15 职场文书
Python采集壁纸并实现炫轮播
2022/04/30 Python