As a front-end developer, you often encounter various compatibility issues and pitfalls when displaying web pages. The title is too long and requires intercepting strings.
Let the background program be cut off, and then various refusals. Let the background cut off by bytes is the same as killing the backend. In the end, it may only be able to install the character length for you. In the end, it is not good-looking, and it is not correct, so it is better to turn around and adjust the CSS and adjust it compatible;
Fore-end students who have the above feelings will give me a thumbs up silently.
Recently, I came into contact with a project where the background only provides interfaces (json), and all page data rendering and data binding are handed over to the front-end. Finally, without considering SEO, all the initiative of the page was in my hands, and I accidentally encountered the old problem of byte interception.
A Javascript method to simply obtain byte length is circulated on the Internet:
= function(){//Return the string byte length
return (/([^\x00-\xFF])/g, "aa").length;
};
It's really simple. Characters larger than ASCII code are counted as two bytes. Although they are strictly incorrect, we use them to assist in the display effect. If it is really strict, it will be bad.
But I always feel that it is not good to use regular things like this for a little bit of opportunity, so I actually saved two lines of code, so I decided to calculate it in the normal way:
function getBlength(str){
for(var i=;i--;){
n += (i) > 255 ? 2 : 1;
}
return n;
}
I haven't extended the method to the prototype of the String object, but because of efficiency issues, the following is the test code:
//Extend to String's prototype
= function () {
var str = this,
n = 0;
for (var i = ; i--; ) {
n += (i) > 255 ? 2 : 1;
}
return n;
}
//Add a method to String object
= function (str) {
for (var i = , n = 0; i--; ) {
n += (i) > 255 ? 2 : 1;
}
return n;
}
//First construct a long string mixed with Chinese and English
var str = "javascript efficiently intercept string by byte getBlengthjavascript efficiently intercept string by byte getBlength";
str = (/./g, str).replace(/./g, str);
("The created string length is:",)
("-----------------------------------------------------------------------------------------------------------------------------
("() >> ",())
("(str) >> ",(str))
("--Efficiency Test Begins--")
var time1 = new Date()
for(var i=0;i<100;i++){
()
}
("Blength time-consuming:",new Date() - time1);
var time2 = new Date()
for(var i=0;i<100;i++){
(str)
}
("getBlength time-consuming:",new Date() - time2);
The result is not a little bit of poor efficiency. As for the reason, time may be spent on retrieving the prototype chain. I did not go into it in depth. If you know, you can leave a message to tell me:
The created string length is: 314432
--------------------------------------------------------------------------------------------------------------------------------
() >> 425408
(str) >> 425408
--Efficiency test begins-
Blength time-consuming: 1774
getBlength time-consuming: 95
Now there is a basic function to intercept strings, because in this case the characters occupy a maximum byte length of 2, so it is better to use dichotomy to find the appropriate intercept position.
Given an intercept function that should be considered good in efficiency:
//Simple calculation of byte length
= function (str) {
for (var i = , n = 0; i--; ) {
n += (i) > 255 ? 2 : 1;
}
return n;
}
//Seave the string by the specified byte
= function(str,len,endstr){
var len = +len
,endstr = typeof(endstr) == 'undefined' ? "..." : ();
function n2(a){ var n = a / 2 | 0; return (n > 0 ? n : 1)} // Used for dichotomous search
if(!(str+"").length || !len || len<=0){return "";}
if((str) <= len){return str;} //The most time-consuming judgment in the entire function, please welcome optimization
var lenS = len - (endstr)
,_lenS = 0
, _strl = 0
while (_strl <= lenS){
var _lenS1 = n2(lenS -_strl)
_strl += ((_lenS,_lenS1))
_lenS += _lenS1
}
return (0,_lenS-1) + endstr
}
Take the string above to test it. It should be that the longer it loads, the more time it takes. Try to cut a length of 20W:
("The created string length is: ",," byte length is: ",(str)))
("-----------------------------------------------------------------------------------------------------------------------------
("('1 starts 1',6,'...') >> ",('1 starts 1',6,'...'))
("(str,12,'...') >> ",(str,12,'...'))
("(str,13,'..') >> ",(str,13,'..'))
("(str,14,'.') >> ",(str,14,'.'))
("(str,15,'') >> ",(str,15,''))
("--Efficiency Test Begins--")
var time1 = new Date()
for(var i=0;i<100;i++){
(str,200000,'...')
}
("Time-consuming:",new Date() - time1);
Output result:
The created string length is: 314432 The byte length is: 425408
--------------------------------------------------------------------------------------------------------------------------------
('1 start 1',6,'...') >> 1 start 1
(str,12,'...') >> javascrip...
(str,13,'..') >> javascript ..
(str,14,'.') >> javascript high.
(str,15,'') >> javascript high
--Efficiency test begins-
Time-consuming: 155
In fact, it takes not much time to change the intercepted character length to 30W and 40W. In the face of dichotomy, this is all at the same level.
Comparing the previous time to calculate byte length, using dichotomy method to find and intercept the time to calculate byte length by less than two times.
Finally, students, let’s challenge the efficiency!
Let the background program be cut off, and then various refusals. Let the background cut off by bytes is the same as killing the backend. In the end, it may only be able to install the character length for you. In the end, it is not good-looking, and it is not correct, so it is better to turn around and adjust the CSS and adjust it compatible;
Fore-end students who have the above feelings will give me a thumbs up silently.
Recently, I came into contact with a project where the background only provides interfaces (json), and all page data rendering and data binding are handed over to the front-end. Finally, without considering SEO, all the initiative of the page was in my hands, and I accidentally encountered the old problem of byte interception.
A Javascript method to simply obtain byte length is circulated on the Internet:
Copy the codeThe code is as follows:
= function(){//Return the string byte length
return (/([^\x00-\xFF])/g, "aa").length;
};
It's really simple. Characters larger than ASCII code are counted as two bytes. Although they are strictly incorrect, we use them to assist in the display effect. If it is really strict, it will be bad.
But I always feel that it is not good to use regular things like this for a little bit of opportunity, so I actually saved two lines of code, so I decided to calculate it in the normal way:
Copy the codeThe code is as follows:
function getBlength(str){
for(var i=;i--;){
n += (i) > 255 ? 2 : 1;
}
return n;
}
I haven't extended the method to the prototype of the String object, but because of efficiency issues, the following is the test code:
Copy the codeThe code is as follows:
//Extend to String's prototype
= function () {
var str = this,
n = 0;
for (var i = ; i--; ) {
n += (i) > 255 ? 2 : 1;
}
return n;
}
//Add a method to String object
= function (str) {
for (var i = , n = 0; i--; ) {
n += (i) > 255 ? 2 : 1;
}
return n;
}
//First construct a long string mixed with Chinese and English
var str = "javascript efficiently intercept string by byte getBlengthjavascript efficiently intercept string by byte getBlength";
str = (/./g, str).replace(/./g, str);
("The created string length is:",)
("-----------------------------------------------------------------------------------------------------------------------------
("() >> ",())
("(str) >> ",(str))
("--Efficiency Test Begins--")
var time1 = new Date()
for(var i=0;i<100;i++){
()
}
("Blength time-consuming:",new Date() - time1);
var time2 = new Date()
for(var i=0;i<100;i++){
(str)
}
("getBlength time-consuming:",new Date() - time2);
The result is not a little bit of poor efficiency. As for the reason, time may be spent on retrieving the prototype chain. I did not go into it in depth. If you know, you can leave a message to tell me:
The created string length is: 314432
--------------------------------------------------------------------------------------------------------------------------------
Copy the codeThe code is as follows:
() >> 425408
(str) >> 425408
--Efficiency test begins-
Blength time-consuming: 1774
getBlength time-consuming: 95
Now there is a basic function to intercept strings, because in this case the characters occupy a maximum byte length of 2, so it is better to use dichotomy to find the appropriate intercept position.
Given an intercept function that should be considered good in efficiency:
Copy the codeThe code is as follows:
//Simple calculation of byte length
= function (str) {
for (var i = , n = 0; i--; ) {
n += (i) > 255 ? 2 : 1;
}
return n;
}
//Seave the string by the specified byte
= function(str,len,endstr){
var len = +len
,endstr = typeof(endstr) == 'undefined' ? "..." : ();
function n2(a){ var n = a / 2 | 0; return (n > 0 ? n : 1)} // Used for dichotomous search
if(!(str+"").length || !len || len<=0){return "";}
if((str) <= len){return str;} //The most time-consuming judgment in the entire function, please welcome optimization
var lenS = len - (endstr)
,_lenS = 0
, _strl = 0
while (_strl <= lenS){
var _lenS1 = n2(lenS -_strl)
_strl += ((_lenS,_lenS1))
_lenS += _lenS1
}
return (0,_lenS-1) + endstr
}
Take the string above to test it. It should be that the longer it loads, the more time it takes. Try to cut a length of 20W:
Copy the codeThe code is as follows:
("The created string length is: ",," byte length is: ",(str)))
("-----------------------------------------------------------------------------------------------------------------------------
("('1 starts 1',6,'...') >> ",('1 starts 1',6,'...'))
("(str,12,'...') >> ",(str,12,'...'))
("(str,13,'..') >> ",(str,13,'..'))
("(str,14,'.') >> ",(str,14,'.'))
("(str,15,'') >> ",(str,15,''))
("--Efficiency Test Begins--")
var time1 = new Date()
for(var i=0;i<100;i++){
(str,200000,'...')
}
("Time-consuming:",new Date() - time1);
Output result:
The created string length is: 314432 The byte length is: 425408
--------------------------------------------------------------------------------------------------------------------------------
Copy the codeThe code is as follows:
('1 start 1',6,'...') >> 1 start 1
(str,12,'...') >> javascrip...
(str,13,'..') >> javascript ..
(str,14,'.') >> javascript high.
(str,15,'') >> javascript high
--Efficiency test begins-
Time-consuming: 155
In fact, it takes not much time to change the intercepted character length to 30W and 40W. In the face of dichotomy, this is all at the same level.
Comparing the previous time to calculate byte length, using dichotomy method to find and intercept the time to calculate byte length by less than two times.
Finally, students, let’s challenge the efficiency!