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 代码也可以变得优美的实现方法
Jun 22 Javascript
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
js实现Select下拉框具有输入功能的方法
Feb 06 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
js用类封装pop弹窗组件
Oct 08 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 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
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
php调用shell的方法
2014/11/05 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
测试你的JS的掌握程度的代码
2009/12/09 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
前端vue+elementUI如何实现记住密码功能
2020/09/20 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
python中pygame模块用法实例
2014/10/09 Python
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
python简单判断序列是否为空的方法
2015/06/30 Python
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
flask开启多线程的具体方法
2020/08/02 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
运动会四百米广播稿
2014/01/19 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
茶花女读书笔记
2015/06/29 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js