在网页展示中经常会碰到，标题过长，需要截取，用CSS的实现的话各种兼容问题，下面为大家介绍下如何按字节截取字符串

做为一个前端开发人员在网页展示中经常会碰到，标题过长，需要 ，用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;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("--效率测试开始--") 

www.jbxue.com

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; 

} www.jbxue.com

//

按指定字节截取字符串 

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的耗时也差不了多少,在二分法面前,这都是一个级别的。

对比之前的计算字节长度的耗时，用二分法查找截取只消耗了不到两次字节长度的记算的时间。