• 区别中英文截取字符


    动手写了这个“区别中英文截取固定字符”的jQuery插件,暂且命名为fixtext吧,相信前端的兄弟们,这种情况会经常遇到,但是一直找不到 太完美的解决办法,通常下用css截取,但是css有弊端,最令人不满意的是,限定宽度后有可能会截掉不完整的字符,相当的不雅,后台截取当然最好,但是 多数情况下PD不一定愿意干这个活。今天特意写了这个插件,基本能满足大家的工作需要了,包括中英文混排的文字,并且可以区分UTF-8,和 GB2312,这样大家应该清楚,中文的编码不一样占的字符也是不一样的,UTF-8占了三个字符,而GB2312占了两个字符,另外还包括一个非常实用 的功能——是否保留省略号,用起来还算方便吧。
    fixtext插件源码:
    [javascript]

    (function(){
    $.fn.fixtext=function(options){
    var defaults={
    ellipsis:true,
    maxLen:”15″
    }
    var options = $.extend(defaults, options);
    this.each(function(){
    var fixobj=$(this);
    //判断网页的编码方式,如果是UTF-8那么一个汉字就占3个字符,如果GB2312一个汉字占2个字符
    var webcode;
    webcode=(document.characterSet)?document.characterSet:document.charset;
    incre=(webcode.toUpperCase()==”GB2312″)?2:3;
    var currentStr=”";
    var text=$(fixobj).html();
    var textlen=text.length;
    //判断是否保留省略号
    options.maxLen=(options.ellipsis)?options.maxLen-2*incre:options.maxLen;
    for(var i=0,len=textlen;i<len; i++){
    currentStr+=text.charAt(i);
    if(getCharLength(currentStr,incre)>options.maxLen){
    //不保留里省略号的文字内容
    text2=text.substr(0,i);
    //保留里省略号的文字内容
    if(options.ellipsis){text2=text2+”……”}
    $(fixobj).html(text2);
    return;
    }
    else{
    $(fixobj).html(currentStr);
    }
    }
    //计算截取字符的长度
    function getCharLength(str,incre){
    var charLen=0;
    for (var i=0,len=str.length; i<len; i++){
    if(str.charCodeAt(i)>255){
    charLen+=incre;
    }
    else{
    charLen+=1
    }
    }
    return charLen;
    }
    })
    }
    })(jQuery)
    [/javascript]
    引用脚本
    [javascript]
    $(要截取的对象).fixtext({ellipsis:false,maxLen:”20″});
    [/javascript]
    这里面包括了两个参数ellipsis和maxLen,顾名思义,ellipsis它就是决定是否保留省略号的,当他的参数是“true”的时候,就保留 省略号,“false”时就不保留省略号,maxLen就是截取的字符长度,有一点提醒一下大家,maxLen包括省略号的长度,比如要截取20个字符, 并且保留省略号,如果页面编码是GB2312,那么截取的字符就是16个。插件的源代码就不解释了,注释已经很详细了。童鞋们使用过程中遇到了问题的话, 请给我留言!欢迎大家来交流!

    Demo : http://www.rainboys.cn/demo/fixtext.html

    插件下载地址:http://www.rainboys.cn/demo/js/fixtext.js

  • 相关阅读:
    前端Tips#3
    前端Tips#2
    图算法
    【Javascript】重新绑定默认事件
    【Yeoman】热部署web前端开发环境
    添加远程链接MySQL的权限
    background-clip 背景图片做适当的裁剪
    linux系统下将php和mysql命令加入到环境变量中的方法
    background-size 设置背景图片的大小
    multiple backgrounds 多重背景
  • 原文地址:https://www.cnblogs.com/shihao/p/2179361.html
Copyright © 2020-2023  润新知