快捷導(dǎo)航

標(biāo)題過(guò)長(zhǎng)使用javascript按字節(jié)截取字符串

更新時(shí)間：2014年04月24日 16:16:52 作者：

在網(wǎng)頁(yè)展示中經(jīng)常會(huì)碰到，標(biāo)題過(guò)長(zhǎng)，需要截取字符串，用CSS的實(shí)現(xiàn)的話(huà)各種兼容問(wèn)題，下面為大家介紹下javascript如何按字節(jié)截取字符串

做為一個(gè)前端開(kāi)發(fā)人員在網(wǎng)頁(yè)展示中經(jīng)常會(huì)碰到，標(biāo)題過(guò)長(zhǎng)，需要截取字符串，用CSS的實(shí)現(xiàn)的話(huà)各種兼容問(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)題了。

網(wǎng)絡(luò)上流傳一個(gè)Javascript簡(jiǎn)單獲取字節(jié)長(zhǎng)度的方法：

復(fù)制代碼代碼如下:

 
String.prototype.Blength = function(){//返回字符串字節(jié)長(zhǎng)度 
return this.replace(/([^\x00-\xFF])/g, "aa").length; 
}; 

確實(shí)很簡(jiǎn)單，大于A(yíng)SCII碼的字符都算做兩個(gè)字節(jié)，雖然嚴(yán)格來(lái)說(shuō)不正確，但我們是用來(lái)輔助展示效果的，真嚴(yán)格起來(lái)反而不好了，

但總感覺(jué)為了一點(diǎn)投機(jī)取巧，而用正則這種較耗時(shí)東西不太好，其實(shí)也就節(jié)省了兩行代碼，所以我決定還是用正常方式計(jì)算：

復(fù)制代碼代碼如下:

 
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è)試代碼：

復(fù)制代碼代碼如下:

 
//擴(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)始--") 

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)始--------------

復(fù)制代碼代碼如下:

 
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ù)：

復(fù)制代碼代碼如下:

 
//簡(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; 
} 
//按指定字節(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)度試試：

復(fù)制代碼代碼如下:

 
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)始--------------

復(fù)制代碼代碼如下:

 
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í)間.

最后,同學(xué)們,來(lái)挑戰(zhàn)一下效率吧!

您可能感興趣的文章: