欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

標(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é)長度的方法:
復(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)一下效率吧!

相關(guān)文章

  • 關(guān)于圖片的預(yù)加載過程中隱藏未知的

    關(guān)于圖片的預(yù)加載過程中隱藏未知的

    相信大家都看到過ie下的內(nèi)存泄漏模式的文章,其中有一個(gè)模式就是循環(huán)引用,而閉包就有保存外部運(yùn)行環(huán)境的能力(依賴于作用域鏈的實(shí)現(xiàn)),所以img.onload這個(gè)函數(shù)內(nèi)部又保存了對img的引用,這樣就形成了循環(huán)引用,導(dǎo)致內(nèi)存泄漏
    2012-12-12
  • 一個(gè)小時(shí)快速搭建微信小程序的方法步驟

    一個(gè)小時(shí)快速搭建微信小程序的方法步驟

    這篇文章主要介紹了一個(gè)小時(shí)快速搭建微信小程序的方法步驟,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-04-04
  • 有趣的bootstrap走動(dòng)進(jìn)度條

    有趣的bootstrap走動(dòng)進(jìn)度條

    這篇文章主要為大家詳細(xì)介紹了如何實(shí)現(xiàn)有趣的bootstrap走動(dòng)進(jìn)度條,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • JS庫之Waypoints的用法詳解

    JS庫之Waypoints的用法詳解

    waypoints的功能非常強(qiáng)大,一款用于捕獲各種滾動(dòng)事件的插件,下面跟隨腳本之家小編一起學(xué)習(xí)JS庫之Waypoints的用法吧
    2017-09-09
  • JavaScript運(yùn)動(dòng)原理基礎(chǔ)知識(shí)詳解

    JavaScript運(yùn)動(dòng)原理基礎(chǔ)知識(shí)詳解

    這篇文章主要介紹了JavaScript運(yùn)動(dòng)原理基礎(chǔ)知識(shí)詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-04-04
  • ES6新特性七:數(shù)組的擴(kuò)充詳解

    ES6新特性七:數(shù)組的擴(kuò)充詳解

    這篇文章主要介紹了ES6新特性之?dāng)?shù)組的擴(kuò)充,結(jié)合實(shí)例形式分析了ES6數(shù)組操作的常見方法與相關(guān)使用技巧,需要的朋友可以參考下
    2017-04-04
  • JavaScript正則表達(dá)式和級(jí)聯(lián)效果

    JavaScript正則表達(dá)式和級(jí)聯(lián)效果

    正則表達(dá)式(regular expression)是一種字符串匹配的模式,用來檢查一個(gè)字符串中是否包含指定模式的字符串。下面通過本文給大家分享JavaScript_正則表達(dá)式和級(jí)聯(lián)效果,感興趣的朋友一起看看吧
    2017-09-09
  • JS 使用 window對象的print方法實(shí)現(xiàn)分頁打印功能

    JS 使用 window對象的print方法實(shí)現(xiàn)分頁打印功能

    這篇文章主要介紹了JS 使用 window對象的print方法實(shí)現(xiàn)分頁打印功能,這種方法兼容性比較好,在ie和火狐瀏覽器下都可以正常使用,感興趣的朋友跟隨腳本之家小編一起看看吧
    2018-05-05
  • JS選中checkbox后獲取table內(nèi)一行TD所有數(shù)據(jù)的方法

    JS選中checkbox后獲取table內(nèi)一行TD所有數(shù)據(jù)的方法

    這篇文章主要介紹了JS選中checkbox后獲取table內(nèi)一行TD所有數(shù)據(jù)的方法,涉及javascript針對table元素遍歷與獲取的技巧,需要的朋友可以參考下
    2015-07-07
  • ES6中字符串string常用的新增方法小結(jié)

    ES6中字符串string常用的新增方法小結(jié)

    這篇文章主要介紹了ES6中字符串string常用的新增方法,結(jié)合實(shí)例形式總結(jié)分析了ES6中字符串string常用的新增方法功能與使用技巧,需要的朋友可以參考下
    2017-11-11

最新評論