编程 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点击事件链接的问题解决

Apr 25 Javascript

javascript常用代码段搜集

Dec 04 Javascript

JS+CSS实现可以凹陷显示选中单元格的方法

Mar 02 Javascript

在JavaScript的jQuery库中操作AJAX的方法讲解

Aug 15 Javascript

基于OL2实现百度地图ABCD marker的效果

Oct 01 Javascript

深入理解JS addLoadEvent函数

May 20 Javascript

angular.js之路由的选择方法

Sep 24 Javascript

javascript中apply/call和bind的使用

Feb 15 Javascript

Vue.js 单页面多路由区域操作的实例详解

Jul 17 Javascript

JavaScript 自定义事件之我见

Sep 25 Javascript

vue使用swiper实现中间大两边小的轮播图效果

Nov 24 Javascript

js实现贪吃蛇小游戏（加墙）

Jul 31 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