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 相关文章推荐
Javascript 面向对象(三)接口代码
May 23 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 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中的路径问题与set_include_path使用介绍
2014/02/11 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
JSON 入门指南 想了解json的朋友可以看下
2009/08/26 Javascript
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
2013/06/25 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
[03:08]Ti4观战指南上
2014/07/07 DOTA
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
Python写的贪吃蛇游戏例子
2014/06/16 Python
Python、Javascript中的闭包比较
2015/02/04 Python
Python找出9个连续的空闲端口
2016/02/01 Python
Python读写Json涉及到中文的处理方法
2016/09/12 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
Python日期时间Time模块实例详解
2019/04/15 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
Python logging模块原理解析及应用
2020/08/13 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
温馨提示标语
2014/06/26 职场文书
Python 如何实现文件自动去重
2021/06/02 Python
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js