编程 Javascript

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测试后运行结果如下：

- Author -

前端爱我

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js apply/call/caller/callee/bind使用方法与区别分析

Oct 28 Javascript

JS动态添加与删除select中的Option对象(示例代码)

Dec 25 Javascript

JS解决iframe之间通信和自适应高度的问题

Aug 24 Javascript

基于canvas的二维码邀请函生成插件

Feb 14 Javascript

浅析Javascript中双等号(==)隐性转换机制

Oct 27 Javascript

layui中table表头样式修改方法

Aug 15 Javascript

jquery获取img的src值实例介绍

Jan 16 jQuery

原生js实现碰撞检测

Mar 12 Javascript

vue npm install 安装某个指定的版本操作

Aug 11 Javascript

Vue实现简单的拖拽效果

Aug 25 Javascript

原生js+css实现tab切换功能

Sep 17 Javascript

vue-cli4.0多环境配置变量与模式详解

Dec 30 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