Headers that are too long use javascript to capture strings in bytes

As a front-end developer in the web display often encountered, the title is too long, the need to intercept strings, with CSS implementation of various compatibility problems, various pits.

Let the background program cut, and a variety of excuses, let the background by the byte cut is the same as to the background, the last may only be the length of the characters to give you a cut, the last not good looking, on the uneven, or back whole CSS, tune compatibility;

Have above the front end of the feeling of the students silently click like it.

Recently, I came into contact with a project. The background only provides the interface (json), and the data rendering of all the pages and data binding are handed over to the front end. Finally, do not consider SEO, page all the initiative to even the hands of the hands, inadvertently encountered the old problem of byte interception.

There's a simple way for Javascript to get bytes around the web:

 
String.prototype.Blength = function(){//Returns the length of the string in bytes
return this.replace(/([^x00-xFF])/g, "aa").length; 
}; 

It's really simple, all characters that are bigger than ASCII are two bytes, which is not strictly correct, but we use it to help show the effect, so it's not good to be strict,

However, I always feel that it is not good to use regular, which is time-consuming, for the sake of a little opportunism. In fact, it only saves two lines of code, so I decided to use the normal way to calculate:

 
function getBlength(str){ 
for(var i=str.length;i--;){ 
n += str.charCodeAt(i) > 255 ? 2 : 1; 
} 
return n; 
} 

I did not extend the method to the prototype of the String pair, or because of the efficiency problem, the following is the test code:

 
//Extend to String's 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; 
} 
//Add a method to the String pair
String.getBlength = function (str) { 
for (var i = str.length, n = 0; i--; ) { 
n += str.charCodeAt(i) > 255 ? 2 : 1; 
} 
return n; 
} 
//First, construct a long string with a mixture of English and Chinese
var str = "javascript  Efficient method of intercepting strings in bytes  getBlengthjavascript  Efficient method of intercepting strings in bytes  getBlength"; 
str = str.replace(/./g, str).replace(/./g, str); 
console.log(" The length of the created string is: ",str.length) 
console.log("------------- Beginning of the test --------------") 
console.log("str.Blength() >> ",str.Blength()) 
console.log("String.getBlength(str) >> ",String.getBlength(str)) 
console.log("-- Start of efficiency test --") 

var time1 = new Date() 
for(var i=0;i<100;i++){ 
str.Blength() 
} 
console.log("Blength Time: ",new Date() - time1); 

var time2 = new Date() 
for(var i=0;i<100;i++){ 
String.getBlength(str) 
} 
console.log("getBlength Time: ",new Date() - time2); 

The result is not any less efficient. As for the reason that the time may have been spent on the retrieval of the prototype chain, I didn't delve into it. If you know, please leave a message to tell me:

The length of the created string is 314432
-- the beginning of the test --

 
str.Blength() >> 425408 
String.getBlength(str) >> 425408 
-- Start of efficiency test -- 
Blength Time:  1774 
getBlength Time:  95 

The basic function for intercepting a string is now in place, and since the character takes up the maximum length of 2 bytes in this case, it is best to use a dichotomy to find the appropriate location for intercepting.

To give an efficiency should be a good interception function:

 
//Simply calculate the byte length
String.getBlength = function (str) { 
for (var i = str.length, n = 0; i--; ) { 
n += str.charCodeAt(i) > 255 ? 2 : 1; 
} 
return n; 
} 
//Intercepts a string in the specified byte
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)} //Used in binary search
if(!(str+"").length || !len || len<=0){return "";} 
if(this.getBlength(str) <= len){return str;} //One of the most time-consuming judgments in the whole function, welcome optimization
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 
} 

Take the above string to test, should be loaded longer and more time-consuming, cut the length of 20W try:

 
console.log(" The length of the created string is: ",str.length,"  The length of bytes is: ",String.getBlength(str)) 
console.log("------------- Beginning of the test --------------") 
console.log("String.cutByte('1 start 1',6,'...') >> ",String.cutByte('1 start 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("-- Start of efficiency test --") 
var time1 = new Date() 
for(var i=0;i<100;i++){ 
String.cutByte(str,200000,'...') 
} 
console.log(" Time: ",new Date() - time1); 

Output results:

The length of the created string is: 314432 bytes and the length is: 425408
-- the beginning of the test --

 
String.cutByte('1 start 1',6,'...') >> 1 start 1 
String.cutByte(str,12,'...') >> javascrip... 
String.cutByte(str,13,'..') >> javascript .. 
String.cutByte(str,14,'.') >> javascript  high . 
String.cutByte(str,15,'') >> javascript  high  

-- efficiency test begins --
Time: 155

In fact, the time to change the intercept length to 30W 40W is not much difference, in terms of dichotomy, this is the same level

Compared with the previous time to calculate the length of bytes, the binary search method was used to intercept the recording time which only consumed less than twice the length of bytes.

Finally, students, to challenge the efficiency!