动手写了这个“区别中英文截取固定字符”的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