javascript按字節(jié)截取標(biāo)題中字符串 在網(wǎng)頁(yè)展示中經(jīng)常會(huì)碰到，標(biāo)題過(guò)長(zhǎng)，需要截取字符串，用CSS的實(shí)現(xiàn)的話各種兼容問(wèn)題，下面為大家介紹下javascript如何按字節(jié)截取字符串做為一個(gè)前端開(kāi)發(fā)人員在網(wǎng)頁(yè)展示中經(jīng)常會(huì)碰到，標(biāo)題過(guò)長(zhǎng)，需要截取字符串，用CSS的實(shí)現(xiàn)的話各種兼容問(wèn)題，各種坑。?讓后臺(tái)程序截一下，又各種推托，讓后臺(tái)按字節(jié)截一下更是和要了后臺(tái)老命一樣，最后可能只會(huì)安字符長(zhǎng)度給你截一下，最后不好看，對(duì)不齊，還是回頭整CSS、調(diào)兼容；?有以上有感觸的前端同學(xué)默默點(diǎn)個(gè)贊吧。?最近接觸一個(gè)項(xiàng)目，后臺(tái)只提供接口（json），所有頁(yè)面的數(shù)據(jù)渲染，數(shù)據(jù)綁定都都交給了前端。終于，不考慮SEO，頁(yè)面所有的主動(dòng)權(quán)到偶的手中了，不經(jīng)意間就碰到字節(jié)截取老問(wèn)題了。?一個(gè)Javascript簡(jiǎn)單獲取字節(jié)長(zhǎng)度的方法：?String.prototype.Blength?=?function(){//返回字符串字節(jié)長(zhǎng)度?
return?this.replace(/([^\x00-\xFF])/g,?"aa").length;?
};?確實(shí)很簡(jiǎn)單，大于ASCII碼的字符都算做兩個(gè)字節(jié)，雖然嚴(yán)格來(lái)說(shuō)不正確，但我們是用來(lái)輔助展示效果的，真嚴(yán)格起來(lái)反而不好了，?但總感覺(jué)為了一點(diǎn)投機(jī)取巧，而用正則這種較耗時(shí)東西不太好，其實(shí)也就節(jié)省了兩行代碼，所以我決定還是用正常方式計(jì)算：?function?getBlength(str){?
for(var?i=str.length;i--;){?
n?+=?str.charCodeAt(i)?>?255???2?:?1;?
}?
return?n;?
}?我并沒(méi)有把方法擴(kuò)展到String對(duì)像的原型上去，還是因?yàn)樾蕟?wèn)題,以下是測(cè)試代碼：?//擴(kuò)展到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對(duì)像增加一個(gè)方法?
String.getBlength?=?function?(str)?{?
for?(var?i?=?str.length,?n?=?0;?i--;?)?{?
n?+=?str.charCodeAt(i)?>?255???2?:?1;?
}?
return?n;?
}?
//先構(gòu)造一個(gè)中英混合的長(zhǎng)字符串?
var?str?=?"javascript?高效按字節(jié)截取字符串方法?getBlengthjavascript?高效按字節(jié)截取字符串方法?getBlength";?
str?=?str.replace(/./g,?str).replace(/./g,?str);?
console.log("創(chuàng)造的字符串長(zhǎng)度為：",str.length)?
console.log("-------------測(cè)試開(kāi)始--------------")?
console.log("str.Blength()?>>?",str.Blength())?
console.log("String.getBlength(str)?>>?",String.getBlength(str))?
console.log("--效率測(cè)試開(kāi)始--")?
www.jbxue.com
var?time1?=?new?Date()?
for(var?i=0;i<100;i++){?
str.Blength()?
}?
console.log("Blength耗時(shí)：",new?Date()?-?time1);?

var?time2?=?new?Date()?
for(var?i=0;i<100;i++){?
String.getBlength(str)?
}?
console.log("getBlength耗時(shí)：",new?Date()?-?time2);?結(jié)果效率差的不是一點(diǎn)半點(diǎn)，至于原因可能時(shí)間花費(fèi)在了原型鏈的檢索上了，我沒(méi)有深究，知道的可以留言告訴我：?創(chuàng)造的字符串長(zhǎng)度為： 314432?-------------測(cè)試開(kāi)始--------------?
str.Blength()?>>?425408?
String.getBlength(str)?>>?425408?
--效率測(cè)試開(kāi)始--?
Blength耗時(shí)：?1774?
getBlength耗時(shí)：?95?現(xiàn)在要截取字符串的基礎(chǔ)函數(shù)有了，因?yàn)樵谶@種情況下字符占的字節(jié)長(zhǎng)度最長(zhǎng)為2，所以用二分法來(lái)找到合適截取位置是再好不過(guò)了。?給一個(gè)效率應(yīng)該算不錯(cuò)的截取函數(shù)：?//簡(jiǎn)單計(jì)算字節(jié)長(zhǎng)度?
String.getBlength?=?function?(str)?{?
for?(var?i?=?str.length,?n?=?0;?i--;?)?{?
n?+=?str.charCodeAt(i)?>?255???2?:?1;?
}?
return?n;?
}?www.jbxue.com
//按指定字節(jié)截取字符串?
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;}?//整個(gè)函數(shù)中最耗時(shí)的一個(gè)判斷,歡迎優(yōu)化?
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?
}?拿上面的字符串來(lái)測(cè)試一下,應(yīng)該是載得越長(zhǎng)越耗時(shí),截個(gè)20W的長(zhǎng)度試試：?console.log("創(chuàng)造的字符串長(zhǎng)度為：",str.length,"?字節(jié)長(zhǎng)度為：",String.getBlength(str))?
console.log("-------------測(cè)試開(kāi)始--------------")?
console.log("String.cutByte('1開(kāi)始1',6,'...')?>>?",String.cutByte('1開(kāi)始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("--效率測(cè)試開(kāi)始--")?
var?time1?=?new?Date()?
for(var?i=0;i<100;i++){?
String.cutByte(str,200000,'...')?
}?
console.log("耗時(shí)：",new?Date()?-?time1);?輸出結(jié)果:?創(chuàng)造的字符串長(zhǎng)度為：?314432?字節(jié)長(zhǎng)度為：?425408?-------------測(cè)試開(kāi)始--------------?
String.cutByte('1開(kāi)始1',6,'...')?>>?1開(kāi)始1?
String.cutByte(str,12,'...')?>>?javascrip...?
String.cutByte(str,13,'..')?>>?javascript?..?
String.cutByte(str,14,'.')?>>?javascript?高.?
String.cutByte(str,15,'')?>>?javascript?高?

--效率測(cè)試開(kāi)始--?
耗時(shí)：?155其實(shí)把截取字符長(zhǎng)度改到30W 40W的耗時(shí)也差不了多少,在二分法面前,這都是一個(gè)級(jí)別的。對(duì)比之前的計(jì)算字節(jié)長(zhǎng)度的耗時(shí)，用二分法查找截取只消耗了不到兩次字節(jié)長(zhǎng)度的記算的時(shí)間。? posted on 2014-04-25 05:33 snowfly123 閱讀(...) 評(píng)論(...) 編輯 收藏

轉(zhuǎn)載于:https://www.cnblogs.com/linuxnotes/p/3687822.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。