標(biāo)題過長使用javascript按字節(jié)截取字符串
更新時(shí)間:2014年04月24日 16:16:52 作者:
在網(wǎng)頁展示中經(jīng)常會(huì)碰到,標(biāo)題過長,需要截取字符串,用CSS的實(shí)現(xiàn)的話各種兼容問題,下面為大家介紹下javascript如何按字節(jié)截取字符串
做為一個(gè)前端開發(fā)人員在網(wǎng)頁展示中經(jīng)常會(huì)碰到,標(biāo)題過長,需要截取字符串,用CSS的實(shí)現(xiàn)的話各種兼容問題,各種坑。
讓后臺(tái)程序截一下,又各種推托,讓后臺(tái)按字節(jié)截一下更是和要了后臺(tái)老命一樣,最后可能只會(huì)安字符長度給你截一下,最后不好看,對不齊,還是回頭整CSS、調(diào)兼容;
有以上有感觸的前端同學(xué)默默點(diǎn)個(gè)贊吧。
最近接觸一個(gè)項(xiàng)目,后臺(tái)只提供接口(json),所有頁面的數(shù)據(jù)渲染,數(shù)據(jù)綁定都都交給了前端。終于,不考慮SEO,頁面所有的主動(dòng)權(quán)到偶的手中了,不經(jīng)意間就碰到字節(jié)截取老問題了。
網(wǎng)絡(luò)上流傳一個(gè)Javascript簡單獲取字節(jié)長度的方法:
String.prototype.Blength = function(){//返回字符串字節(jié)長度
return this.replace(/([^\x00-\xFF])/g, "aa").length;
};
確實(shí)很簡單,大于ASCII碼的字符都算做兩個(gè)字節(jié),雖然嚴(yán)格來說不正確,但我們是用來輔助展示效果的,真嚴(yán)格起來反而不好了,
但總感覺為了一點(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;
}
我并沒有把方法擴(kuò)展到String對像的原型上去,還是因?yàn)樾蕟栴},以下是測試代碼:
//擴(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對像增加一個(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è)中英混合的長字符串
var str = "javascript 高效按字節(jié)截取字符串方法 getBlengthjavascript 高效按字節(jié)截取字符串方法 getBlength";
str = str.replace(/./g, str).replace(/./g, str);
console.log("創(chuàng)造的字符串長度為:",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耗時(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)在了原型鏈的檢索上了,我沒有深究,知道的可以留言告訴我:
創(chuàng)造的字符串長度為: 314432
-------------測試開始--------------
str.Blength() >> 425408
String.getBlength(str) >> 425408
--效率測試開始--
Blength耗時(shí): 1774
getBlength耗時(shí): 95
現(xiàn)在要截取字符串的基礎(chǔ)函數(shù)有了,因?yàn)樵谶@種情況下字符占的字節(jié)長度最長為2,所以用二分法來找到合適截取位置是再好不過了。
給一個(gè)效率應(yīng)該算不錯(cuò)的截取函數(shù):
//簡單計(jì)算字節(jié)長度
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
}
拿上面的字符串來測試一下,應(yīng)該是載得越長越耗時(shí),截個(gè)20W的長度試試:
console.log("創(chuàng)造的字符串長度為:",str.length," 字節(jié)長度為:",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("耗時(shí):",new Date() - time1);
輸出結(jié)果:
創(chuàng)造的字符串長度為: 314432 字節(jié)長度為: 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 高
--效率測試開始--
耗時(shí): 155
其實(shí)把截取字符長度改到30W 40W的耗時(shí)也差不了多少,在二分法面前,這都是一個(gè)級(jí)別的
對比之前的計(jì)算字節(jié)長度的耗時(shí),用二分法查找截取只消耗了不到兩次字節(jié)長度的記算的時(shí)間.
最后,同學(xué)們,來挑戰(zhàn)一下效率吧!
讓后臺(tái)程序截一下,又各種推托,讓后臺(tái)按字節(jié)截一下更是和要了后臺(tái)老命一樣,最后可能只會(huì)安字符長度給你截一下,最后不好看,對不齊,還是回頭整CSS、調(diào)兼容;
有以上有感觸的前端同學(xué)默默點(diǎn)個(gè)贊吧。
最近接觸一個(gè)項(xiàng)目,后臺(tái)只提供接口(json),所有頁面的數(shù)據(jù)渲染,數(shù)據(jù)綁定都都交給了前端。終于,不考慮SEO,頁面所有的主動(dòng)權(quán)到偶的手中了,不經(jīng)意間就碰到字節(jié)截取老問題了。
網(wǎng)絡(luò)上流傳一個(gè)Javascript簡單獲取字節(jié)長度的方法:
復(fù)制代碼 代碼如下:
String.prototype.Blength = function(){//返回字符串字節(jié)長度
return this.replace(/([^\x00-\xFF])/g, "aa").length;
};
確實(shí)很簡單,大于ASCII碼的字符都算做兩個(gè)字節(jié),雖然嚴(yán)格來說不正確,但我們是用來輔助展示效果的,真嚴(yán)格起來反而不好了,
但總感覺為了一點(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;
}
我并沒有把方法擴(kuò)展到String對像的原型上去,還是因?yàn)樾蕟栴},以下是測試代碼:
復(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對像增加一個(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è)中英混合的長字符串
var str = "javascript 高效按字節(jié)截取字符串方法 getBlengthjavascript 高效按字節(jié)截取字符串方法 getBlength";
str = str.replace(/./g, str).replace(/./g, str);
console.log("創(chuàng)造的字符串長度為:",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耗時(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)在了原型鏈的檢索上了,我沒有深究,知道的可以留言告訴我:
創(chuàng)造的字符串長度為: 314432
-------------測試開始--------------
復(fù)制代碼 代碼如下:
str.Blength() >> 425408
String.getBlength(str) >> 425408
--效率測試開始--
Blength耗時(shí): 1774
getBlength耗時(shí): 95
現(xiàn)在要截取字符串的基礎(chǔ)函數(shù)有了,因?yàn)樵谶@種情況下字符占的字節(jié)長度最長為2,所以用二分法來找到合適截取位置是再好不過了。
給一個(gè)效率應(yīng)該算不錯(cuò)的截取函數(shù):
復(fù)制代碼 代碼如下:
//簡單計(jì)算字節(jié)長度
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
}
拿上面的字符串來測試一下,應(yīng)該是載得越長越耗時(shí),截個(gè)20W的長度試試:
復(fù)制代碼 代碼如下:
console.log("創(chuàng)造的字符串長度為:",str.length," 字節(jié)長度為:",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("耗時(shí):",new Date() - time1);
輸出結(jié)果:
創(chuàng)造的字符串長度為: 314432 字節(jié)長度為: 425408
-------------測試開始--------------
復(fù)制代碼 代碼如下:
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 高
--效率測試開始--
耗時(shí): 155
其實(shí)把截取字符長度改到30W 40W的耗時(shí)也差不了多少,在二分法面前,這都是一個(gè)級(jí)別的
對比之前的計(jì)算字節(jié)長度的耗時(shí),用二分法查找截取只消耗了不到兩次字節(jié)長度的記算的時(shí)間.
最后,同學(xué)們,來挑戰(zhàn)一下效率吧!
您可能感興趣的文章:
- JavaScript在瀏覽器標(biāo)題欄上顯示當(dāng)前日期和時(shí)間的方法
- JavaScript修改瀏覽器tab標(biāo)題小技巧
- 拖動(dòng)table標(biāo)題實(shí)現(xiàn)改變td的大小(css+js代碼)
- JS實(shí)現(xiàn)網(wǎng)頁標(biāo)題隨機(jī)顯示名人名言的方法
- JS實(shí)現(xiàn)網(wǎng)頁標(biāo)題欄顯示當(dāng)前時(shí)間和日期的完整代碼
- JavaScript實(shí)現(xiàn)標(biāo)題欄文字輪播效果代碼
- JavaScript實(shí)現(xiàn)帶標(biāo)題的圖片輪播特效
- JavaScript獲取當(dāng)前網(wǎng)頁標(biāo)題(title)的方法
- Jquery修改頁面標(biāo)題title其它JS失效的解決方法
- js實(shí)現(xiàn)的標(biāo)題欄新消息閃爍提示效果
- javascript 獲取網(wǎng)頁標(biāo)題代碼實(shí)例
- JS動(dòng)態(tài)改變?yōu)g覽器標(biāo)題的方法
相關(guān)文章
JavaScript運(yùn)動(dòng)原理基礎(chǔ)知識(shí)詳解
這篇文章主要介紹了JavaScript運(yùn)動(dòng)原理基礎(chǔ)知識(shí)詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04JavaScript正則表達(dá)式和級(jí)聯(lián)效果
正則表達(dá)式(regular expression)是一種字符串匹配的模式,用來檢查一個(gè)字符串中是否包含指定模式的字符串。下面通過本文給大家分享JavaScript_正則表達(dá)式和級(jí)聯(lián)效果,感興趣的朋友一起看看吧2017-09-09JS 使用 window對象的print方法實(shí)現(xiàn)分頁打印功能
這篇文章主要介紹了JS 使用 window對象的print方法實(shí)現(xiàn)分頁打印功能,這種方法兼容性比較好,在ie和火狐瀏覽器下都可以正常使用,感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05JS選中checkbox后獲取table內(nèi)一行TD所有數(shù)據(jù)的方法
這篇文章主要介紹了JS選中checkbox后獲取table內(nèi)一行TD所有數(shù)據(jù)的方法,涉及javascript針對table元素遍歷與獲取的技巧,需要的朋友可以參考下2015-07-07