JS字符串长度判断,超出进行自动截取的实例(支持中文)


Posted in Javascript onMarch 06, 2017

今天一个小弟问我的问题,在文本框中输入字符,如果超出指定长度,就把它截取,要求中文等于两个字符的长度,我找一下资料,把这个功能实现了,

下面是JS代码:

<html>
<script src="http://3water.com/script/jquery.js" type="text/javascript"></script>

<body>
  <input type="text" name="username" />
</body>
<script type="text/ecmascript">

  
  var GetLength = function (str) {
    ///<summary>获得字符串实际长度,中文2,英文1</summary>
    ///<param name="str">要获得长度的字符串</param>
    var realLength = 0, len = str.length, charCode = -1;
    for (var i = 0; i < len; i++) {
      charCode = str.charCodeAt(i);
      if (charCode >= 0 && charCode <= 128) realLength += 1;
      else realLength += 2;
    }
    return realLength;
  };

  //js截取字符串,中英文都能用 
  //如果给定的字符串大于指定长度,截取指定长度返回,否者返回源字符串。 
  //字符串,长度 

  /** 
   * js截取字符串,中英文都能用 
   * @param str:需要截取的字符串 
   * @param len: 需要截取的长度 
   */
  function cutstr(str, len) {
    var str_length = 0;
    var str_len = 0;
    str_cut = new String();
    str_len = str.length;
    for (var i = 0; i < str_len; i++) {
      a = str.charAt(i);
      str_length++;
      if (escape(a).length > 4) {
        //中文字符的长度经编码之后大于4 
        str_length++;
      }
      str_cut = str_cut.concat(a);
      if (str_length >= len) {
        str_cut = str_cut.concat("...");
        return str_cut;
      }
    }
    //如果给定字符串小于指定长度,则返回源字符串; 
    if (str_length < len) {
      return str;
    }
  }$(function () { 
   $("input[name=username]").bind('keyup', function () {
   if (GetLength($(this).val()) > 10) { 
    $(this).val(cutstr($(this).val(), 10)); 
    return; 
   } 
 }); 
}); 
</script> 
</html>

效果如图:

JS字符串长度判断,超出进行自动截取的实例(支持中文)

以上这篇JS字符串长度判断,超出进行自动截取的实例(支持中文)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
jquery ajax请求实例深入解析
Nov 26 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
详解javascript实现瀑布流列式布局
Jan 29 Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
element-ui 本地化使用教程详解
Oct 28 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 Javascript
Bootstrap导航简单实现代码
Mar 06 #Javascript
Bootstrap栅格系统简单实现代码
Mar 06 #Javascript
javascript DOM的详解及实例代码
Mar 06 #Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 #Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 #Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 #Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 #Javascript
You might like
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
Sea.JS知识总结
2016/05/05 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
简单的js表格操作
2016/09/24 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
python实现多线程网页下载器
2018/04/15 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
python判断链表是否有环的实例代码
2020/01/31 Python
python实现横向拼接图片
2020/03/23 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
电子狗项圈:eDog Australia
2019/12/04 全球购物
优秀的应届生自荐信
2014/05/23 职场文书
要账委托书范本
2014/09/15 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript