Jul 26 2010
最近很忙，博客很久没有更新了，今天抽出了一点闲暇时间，动手写了这个“区别中英文截取固定字符”的jQuery插件，暂且命名为fixtext吧，相信前端的兄弟们，这种情况会经常遇到，但是一直找不到太完美的解决办法，通常下用css截取，但是css有弊端，最令人不满意的是，限定宽度后有可能会截掉不完整的字符，相当的不雅，后台截取当然最好，但是多数情况下PD不一定愿意干这个活。今天特意写了这个插件，基本能满足大家的工作需要了，包括中英文混排的文字，并且可以区分UTF-8,和GB2312，这样大家应该清楚，中文的编码不一样占的字符也是不一样的，UTF-8占了三个字符，而GB2312占了两个字符，另外还包括一个非常实用的功能——是否保留省略号，用起来还算方便吧。
fixtext插件源码：
/*
* fixtext 0.1
* Copyright (c) 2010 Rainboy http://www.rainboys.cn/
* Date: 2010-07-26
* 区别中英文截取字符
*/
(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)
引用脚本
$(要截取的对象).fixtext({ellipsis:false,maxLen:"20"});
这里面包括了两个参数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
3 Comments | Tags: fixtext, 中英文混排截字, 截字
