javascript按字節截取標題中字符串 在網頁展示中經常會碰到，標題過長，需要截取字符串，用CSS的實現的話各種兼容問題，下面為大家介紹下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;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的耗時也差不了多少,在二分法面前,這都是一個級別的。對比之前的計算字節長度的耗時，用二分法查找截取只消耗了不到兩次字節長度的記算的時間。? posted on 2014-04-25 05:33 snowfly123 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/linuxnotes/p/3687822.html

總結

以上是生活随笔為你收集整理的javascript按字节截取标题中字符串的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。