javascript按字节截取标题中字符串

在网页展示中经常会碰到，标题过长，需要截取字符串，用CSS的实现的话各种兼容问题，下面为大家介绍下javascript如何按字节截取字符串

做为一个前端开发人员在网页展示中经常会碰到，标题过长，需要截取字符串，用CSS的实现的话各种兼容问题，各种坑。

让后台程序截一下，又各种推托，让后台按字节截一下更是和要了后台老命一样，最后可能只会安字符长度给你截一下，最后不好看，对不齐，还是回头整CSS、调兼容；

有以上有感触的前端同学默默点个赞吧。

最近接触一个项目，后台只提供接口（json），所有页面的数据渲染，数据绑定都都交给了前端。终于，不考虑SEO，页面所有的主动权到偶的手中了，不经意间就碰到字节截取老问题了。

一个Javascript简单获取字节长度的方法：

String.prototype.Blength = function(){//返回字符串字节长度
return this.replace(/([^\x00-\xFF])/g, "aa").length;
};

确实很简单，大于ASCII码的字符都算做两个字节，虽然严格来说不正确，但我们是用来辅助展示效果的，真严格起来反而不好了，

但总感觉为了一点投机取巧，而用正则这种较耗时东西不太好，其实也就节省了两行代码，所以我决定还是用正常方式计算：

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

我并没有把方法扩展到String对像的原型上去，还是因为效率问题,以下是测试代码：

//扩展到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对像增加一个方法
String.getBlength = function (str) {
for (var i = str.length, n = 0; i--; ) {
n += str.charCodeAt(i) > 255 ? 2 : 1;
}
return n;
}
//先构造一个中英混合的长字符串
var str = "javascript 高效按字节截取字符串方法 getBlengthjavascript 高效按字节截取字符串方法 getBlength";
str = str.replace(/./g, str).replace(/./g, str);
console.log("创造的字符串长度为：",str.length)
console.log("-------------测试开始--------------")
console.log("str.Blength() >> ",str.Blength())
console.log("String.getBlength(str) >> ",String.getBlength(str))
console.log("--效率测试开始--")
www.jbxue.com
var time1 = new Date()
for(var i=0;i<100;i++){
str.Blength()
}
console.log("Blength耗时：",new Date() - time1);

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

结果效率差的不是一点半点，至于原因可能时间花费在了原型链的检索上了，我没有深究，知道的可以留言告诉我：

创造的字符串长度为： 314432

-------------测试开始--------------
str.Blength() >> 425408
String.getBlength(str) >> 425408
--效率测试开始--
Blength耗时： 1774
getBlength耗时： 95

现在要截取字符串的基础函数有了，因为在这种情况下字符占的字节长度最长为2，所以用二分法来找到合适截取位置是再好不过了。

给一个效率应该算不错的截取函数：

//简单计算字节长度
String.getBlength = function (str) {
for (var i = str.length, n = 0; i--; ) {
n += str.charCodeAt(i) > 255 ? 2 : 1;
}
return n;
} www.jbxue.com
//按指定字节截取字符串
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;} //整个函数中最耗时的一个判断,欢迎优化
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
}

拿上面的字符串来测试一下,应该是载得越长越耗时,截个20W的长度试试：

console.log("创造的字符串长度为：",str.length," 字节长度为：",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("耗时：",new Date() - time1);

输出结果: 创造的字符串长度为： 314432 字节长度为： 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 高

--效率测试开始--
耗时： 155

其实把截取字符长度改到30W 40W的耗时也差不了多少,在二分法面前,这都是一个级别的。

对比之前的计算字节长度的耗时，用二分法查找截取只消耗了不到两次字节长度的记算的时间。

posted on 2014-04-25 05:33 snowfly123 阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/linuxnotes/p/3687822.html

javascript按字节截取标题中字符串相关推荐

mysql 搜索标题中字符串_如何在MySQL表中搜索特定字符串？
使用等于运算符进行完全匹配-select *from yourTableName where yourColumnName=yourValue; 让我们首先创建一个表-mysql> create ...
php+中午截取,PHP_php字符串截取中文截取2，单字节截取模式，//中文截取2，单字节截取模式 - phpStudy...
php字符串截取中文截取2,单字节截取模式 //中文截取2,单字节截取模式 function cn_substr($str,$slen,$startdd=0){ $restr = "&quo ...
java字节字符_java按字节截取带有汉字的字符串的解法(推荐)
由于接口使用的oracle字段长度为固定字节数,然后传进来的字符串估计比数据库字段的总字节数要大,那么截取小于数据库字节数的字符串. 自己参考网上的例子,整了个递归调用就可以了,因为截取的字符字节长度 ...
python中字符串切片取奇数_Python中的字符串切片（截取字符串）的详解
Python中的字符串切片(截取字符串)的详解字符串索引示意图字符串切片也就是截取字符串,取子串 Python中字符串切片方法字符串[开始索引:结束索引:步长] 切取字符串为开始索引到结束索引- ...
JAVA 中字符串的截取，要求不能截取半个汉字
http://www.360doc.com/content/12/1126/16/1542811_250345184.shtml 编写一个截取字符串的函数,输入为一个字符串和字节数,输出为按字节截取的 ...
java基础知识回顾之---java String final类普通方法的应用之“按照字节截取字符串”...
/* 需求:在java中,字符串"abcd"与字符串"ab你好"的长度是一样,都是四个字符. 但对应的字节数不同,一个汉字占两个字节. 定义一个方法,按照最大的 ...
java字符串如何按字符截取_JAVA如何按字节截取字符串
JAVA如何按字节截取字符串这篇文章主要介绍了JAVA如何按字节截取字符串,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 public class ...
编写一个截取字符串的函数，输入为一个字符串和字节数，输出为按字节截取的字符串。但是要保证汉字不被截半个。
题目: 编写一个截取字符串的函数,输入为一个字符串和字节数, 输出为按字节截取的字符串. 但是要保证汉字不被截半个,如"我ABC"4, 应该截为"我AB",输入 ...
java截取中文_按字节截取混有中文汉字的字符串中英文字符串截取
[java]代码库import java.io.UnsupportedEncodingException; public class CutString { /** * 判断是否是一个中文汉字 * * ...

javascript按字节截取标题中字符串

javascript按字节截取标题中字符串相关推荐

最新文章

热门文章