javascript 高效按字节截取字符串
做为一个前端开发人员在网页展示中经常会碰到，标题过长，需要截取字符串，用CSS的实现的话各种兼容问题，各种坑。
让后台程序截一下，又各种推托，让后台按字节截一下更是和要了后台老命一样，最后可能只会安字符长度给你截一下，最后不好看，对不齐，还是回头整CSS、调兼容；
有以上有感触的前端同学默默点个赞吧。
最近接触一个项目，后台只提供接口（json），所有页面的数据渲染，数据绑定都都交给了前端。终于，不考虑SEO，页面所有的主动权到偶的手中了，不经意间就碰到字节截取老问题了。
网络上流传一个Javascript简单获取字节长度的方法：
String.prototype.Blength = function(){//返回字符串字节长度 return this.replace(/([^\x00-\xFF])/g, "aa").length; };
确实很简单，大于ASCII码的字符都算做两个字节，虽然严格来说不正确，但我们是用来辅助展示效果的，真严格起来反而不好了，
但总感觉为了一点投机取巧，而用正则这种较耗时东西不太好，其实也就节省了两行代码，所以我决定还是用正常方式计算：
function getBlength(str){ for(var i=str.length,n=0;i--;){ n += str.charCodeAt(i) > 255 ? 2 : 1; } return n; }
我并没有把方法扩展到String对像的原型上去，还是因为效率问题,以下是测试代码：
//扩展到String的prototype上 String.prototype.Blength = function () { var str = this, n = 0; for (var i = str.length; i--; ) { n += str.charCodeAt(i) > 255 ? 2 : 1; } return n; } //给String对像增加一个方法 String.getBlength = function (str) { for (var i = str.length, n = 0; i--; ) { n += str.charCodeAt(i) > 255 ? 2 : 1; } return n; } //先构造一个中英混合的长字符串 var str = "javascript 高效按字节截取字符串方法 getBlengthjavascript 高效按字节截取字符串方法 getBlength"; str = str.replace(/./g, str).replace(/./g, str); console.log("创造的字符串长度为：",str.length) console.log("-------------测试开始--------------") console.log("str.Blength() >> ",str.Blength()) console.log("String.getBlength(str) >> ",String.getBlength(str)) console.log("--效率测试开始--") var time1 = new Date() for(var i=0;i<100;i++){ str.Blength() } console.log("Blength耗时：",new Date() - time1); var time2 = new Date() for(var i=0;i<100;i++){ String.getBlength(str) } console.log("getBlength耗时：",new Date() - time2);
结果效率差的不是一点半点，至于原因可能时间花费在了原型链的检索上了，我没有深究，知道的可以留言告诉我：
创造的字符串长度为： 314432 -------------测试开始-------------- str.Blength() >> 425408 String.getBlength(str) >> 425408 --效率测试开始-- Blength耗时： 1774 getBlength耗时： 95
现在要截取字符串的基础函数有了，因为在这种情况下字符占的字节长度最长为2，所以用二分法来找到合适截取位置是再好不过了。
给一个效率应该算不错的截取函数：
//简单计算字节长度 String.getBlength = function (str) { for (var i = str.length, n = 0; i--; ) { n += str.charCodeAt(i) > 255 ? 2 : 1; } return n; } //按指定字节截取字符串 String.cutByte = function(str,len,endstr){ var len = +len ,endstr = typeof(endstr) == 'undefined' ? "..." : endstr.toString(); function n2(a){ var n = a / 2 | 0; return (n > 0 ? n : 1)} //用于二分法查找 if(!(str+"").length || !len || len<=0){return "";} if(this.getBlength(str) <= len){return str;} //整个函数中最耗时的一个判断,欢迎优化 var lenS = len - this.getBlength(endstr) ,_lenS = 0 , _strl = 0 while (_strl <= lenS){ var _lenS1 = n2(lenS -_strl) _strl += this.getBlength(str.substr(_lenS,_lenS1)) _lenS += _lenS1 } return str.substr(0,_lenS-1) + endstr }
拿上面的字符串来测试一下,应该是载得越长越耗时,截个20W的长度试试：
console.log("创造的字符串长度为：",str.length," 字节长度为：",String.getBlength(str))
console.log("-------------测试开始--------------")
console.log("String.cutByte('1开始1',6,'...') >> ",String.cutByte('1开始1',6,'...'))
console.log("String.cutByte(str,12,'...') >> ",String.cutByte(str,12,'...'))
console.log("String.cutByte(str,13,'..') >> ",String.cutByte(str,13,'..'))
console.log("String.cutByte(str,14,'.') >> ",String.cutByte(str,14,'.'))
console.log("String.cutByte(str,15,'') >> ",String.cutByte(str,15,''))
console.log("--效率测试开始--")
var time1 = new Date()
for(var i=0;i<100;i++){
String.cutByte(str,200000,'...')
}
console.log("耗时：",new Date() - time1);
输出结果:
创造的字符串长度为： 314432 字节长度为： 425408 -------------测试开始-------------- String.cutByte('1开始1',6,'...') >> 1开始1 String.cutByte(str,12,'...') >> javascrip... String.cutByte(str,13,'..') >> javascript .. String.cutByte(str,14,'.') >> javascript 高. String.cutByte(str,15,'') >> javascript 高 --效率测试开始-- 耗时： 155
其实把截取字符长度改到30W 40W的耗时也差不了多少,在二分法面前,这都是一个级别的
对比之前的计算字节长度的耗时,用二分法查找截取只消耗了不到两次字节长度的记算的时间.
最后,同学们,来挑战一下效率吧!
2014年4月24日补充：
因为一般来说，超长的占位符一般长度很小，所以把函数再改了一下，取消了一开始就比较 str的字节长 和 len的大小，而是等二分法查询完成之后，比较被截掉的字符串和站位符的长度。
这样，在多数情况下，特别是在处理大字符串的时候，效率会有质的提升。
String.cutByte = function (str, len, endstr) { var len = +len, endstr = typeof(endstr) == 'undefined' ? "..." : endstr.toString(), endstrBl = this.getBlength(endstr); function n2(a) {var n = a / 2 | 0; return (n > 0 ? n : 1)}//用于二分法查找 if (!(str + "").length || !len || len <= 0) { return ""; } if(len<endstrBl){ endstr = ""; endstrBl = 0; } var lenS = len - endstrBl, _lenS = 0, _strl = 0; while (_strl <= lenS) { var _lenS1 = n2(lenS - _strl), addn = this.getBlength(str.substr(_lenS, _lenS1)); if (addn == 0) {return str;} _strl += addn _lenS += _lenS1 } if(str.length - _lenS > endstrBl || this.getBlength(str.substring(_lenS-1))>endstrBl){ return str.substr(0, _lenS - 1) + endstr }else{ return str; } }
用上面的测试例子测试的结果如下：
创造的字符串长度为： 314432 字节长度为： 425408 -------------测试开始-------------- String.cutByte('1开始1',6,'...') >> 1开始1 String.cutByte(str,12,'...') >> javascrip... String.cutByte(str,13,'..') >> javascript .. String.cutByte(str,14,'.') >> javascript 高. String.cutByte(str,15,'') >> javascript 高 --效率测试开始-- 耗时： 72
转载请注明出处 http://www.cnblogs.com/whyoop，谢谢！
