JS實現(xiàn)區(qū)分中英文并統(tǒng)計字符個數(shù)的方法示例

更新時間：2018年06月09日 13:41:36 作者：前端愛我

這篇文章主要介紹了JS實現(xiàn)區(qū)分中英文并統(tǒng)計字符個數(shù)的方法,涉及JavaScript事件響應、正則匹配及數(shù)值運算相關操作技巧,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)區(qū)分中英文并統(tǒng)計字符個數(shù)的方法。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>js區(qū)分中英文統(tǒng)計字符個數(shù)</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匹配空白字符，/^以……開頭，$以……結(jié)尾，/g全局匹配,/i忽略大小寫
    }
    return function(_str){
      _str=trim(_str);  //去除字符串的左右兩邊空格
      var strlength=_str.length;
      if(!strlength){  //如果字符串長度為零，返回零
        return 0;
      }
      var chinese=_str.match(/[\u4e00-\u9fa5]/g); //匹配中文，match返回包含中文的數(shù)組
      return strlength+(chinese?chinese.length:0); //計算字符個數(shù)
    }
  })();
  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.jb51.net/code/HtmlJsRun測試后運行結(jié)果如下：

PS：這里再為大家推薦兩款相關在線工具供大家參考：

字數(shù)統(tǒng)計工具：
http://tools.jb51.net/code/zishutongji

在線字符統(tǒng)計與編輯工具：
http://tools.jb51.net/code/char_tongji

更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題：《JavaScript數(shù)學運算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript事件相關操作與技巧大全》、《JavaScript操作DOM技巧總結(jié)》及《JavaScript字符與字符串操作技巧總結(jié)》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章:

JavaScript獲取DOM元素的11種方法總結(jié)
這篇文章主要介紹了JavaScript獲取DOM元素的11種方法總結(jié),本文用分4大類11個方法總結(jié)如何獲取DOM元素,需要的朋友可以參考下
2015-04-04
Javascript隨機標簽云代碼實例
這篇文章主要分享一個Javascript隨機標簽云代碼實例,需要的朋友可以參考下。
2016-06-06
JavaScript滑移效果代碼
這里說的滑移其實就是減速效果，能根據(jù)設定的坐標平面移動。
2008-09-09
前端圖片壓縮常見的一些解決辦法
這篇文章主要給大家介紹了關于前端圖片壓縮常見的一些解決辦法,圖片上傳是前端中常見的的業(yè)務場景,無論是前臺還是后臺,適當?shù)膶D片進行壓縮處理,可以顯著的提升用戶體驗,需要的朋友可以參考下
2023-11-11
淺析為什么a="abc" 不等于 a=new String("abc")
這篇文章主要介紹了為什么a="abc" 不等于 a=new String("abc"),需要的朋友可以參考下
2017-10-10
解決微信小程序中的滾動穿透問題
這篇文章主要介紹了解決微信小程序中的滾動穿透問題,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-09-09
JS實現(xiàn)判斷碰撞的方法
這篇文章主要介紹了JS實現(xiàn)判斷碰撞的方法,實例分析了通過js判斷實體碰撞的技巧與相關應用,需要的朋友可以參考下
2015-02-02
微信小程序?qū)崿F(xiàn)限制用戶轉(zhuǎn)發(fā)功能的實例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)限制用戶轉(zhuǎn)發(fā)的實例代碼，通過截圖加實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2020-02-02
javascript實現(xiàn)動態(tài)導入js與css等靜態(tài)資源文件的方法
這篇文章主要介紹了javascript實現(xiàn)動態(tài)導入js與css等靜態(tài)資源文件的方法,基于回調(diào)函數(shù)實現(xiàn)該功能,具有一定參考借鑒價值,需要的朋友可以參考下
2015-07-07
JavaScript動態(tài)創(chuàng)建link標簽到head里的方法
這篇文章主要介紹了JavaScript動態(tài)創(chuàng)建link標簽到head里的方法,分別介紹了使用jQuery的方法、使用原生javascript方法與IE特有的createStyleSheet方法等,非常具有實用價值,需要的朋友可以參考下
2014-12-12