jquery实战--定宽
大家有没有遇到过一个问题,就是一个列表,或是一段文字过多时,截取多余的部分用省略号,好吧,证明你实力的时候到了,我下面先分解一下方法,再用插件写出来,首先我们说的是,用到的第一个方法,就是判断一个字符串 多少个字节。
function lengthB(str){ var num=0,len =str.length; if(len){ for(i =0; i<len;i++){ if(str.charCodeAt(i)>255){ num+=2; }else{ num+=1; } } }else{ return 0; } return num; }
lengthB,这个方法,是返回str的字节数,charCodeAt(i),返回字符的ascii码值,>255,为中文,就是2个字节,否则,为英文一个字节。
测试看看
var num =lengthB("test多少个字节"); alert(num);
第二个重点来了,传入参数,str(被截取的字符串),length(定宽的宽度),最后返回截取的截取的字符串。
function substringB(str , length){ var temp="",num=0; _len = lengthB(str); if(_len){ if(_len<length){ return str; }else{ for(var i =0; i<length; i++){ if(num>=length){ break; } if(str.charCodeAt(i)>255){ num+=2; temp+=str.charAt(i); }else{ num+=1; temp+=str.charAt(i); } } return temp; } }else{ return null; } }
第三步:终极方法,相比第二个方法,多了第三个参数,默认是“...”
function fixedWidth(str,length,char){ var str = str.toString(); if(!char){var char ="..."} var num = length - lengthB(str); if(num<0){ str = substringB(str,length-lengthB(char))+char; } return str; }
注意,返回的str,要把char的字节数减掉哦。
下面来封装一下插件哦,这里我做的是全局的,(大家试下jquery对象打方法封装插件。下节我再公布)
(function($){ $.extend($,{ fixedWidth :function(str,length,char){ var str = str.toString(); if(!char){var char ="..."} var num = length - lengthB(str); if(num<0){ str = substringB(str,length-lengthB(char))+char; } return str; function lengthB(str){ var num=0,len =str.length; if(len){ for(i =0; i<len;i++){ if(str.charCodeAt(i)>255){ num+=2; }else{ num+=1; } } }else{ return 0; } return num; } function substringB(str , length){ var temp="",num=0; _len = lengthB(str); if(_len){ if(_len<length){ return str; }else{ for(var i =0; i<length; i++){ if(num>=length){ break; } if(str.charCodeAt(i)>255){ num+=2; temp+=str.charAt(i); }else{ num+=1; temp+=str.charAt(i); } } return temp; } }else{ return null; } } } }); })(jQuery);
调用:
$(function(){ var str1 = jQuery.fixedWidth("ddddddfagfa",7); alert(str1); });