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 相关文章推荐
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
javascript生成随机数的方法
May 16 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
详解js的六大数据类型
Dec 27 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 Javascript
vue prop属性传值与传引用示例
Nov 13 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 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
在数据量大(超过10万)的情况下
2007/01/15 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
laravel自定义分页效果
2017/07/23 PHP
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
简单的js分页脚本
2009/05/21 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
jQuery标签替换函数replaceWith()的使用例子
2014/08/28 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
详解elementUI中input框无法输入的问题
2020/04/27 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
django 中QuerySet特性功能详解
2019/07/25 Python
基于Python实现扑克牌面试题
2019/12/11 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
高中生学习的自我评价
2013/12/14 职场文书
电子商务专业自荐信
2014/06/02 职场文书
高效课堂标语
2014/06/26 职场文书
ktv好的活动方案
2014/08/17 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
公司与个人合作协议书
2016/03/19 职场文书
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
Spring中bean集合注入的方法详解
2022/07/07 Java/Android