js中根据字数截取字符串,不能截断url


Posted in Javascript onJanuary 12, 2012

今天收到个需求:
1,给一个文字,对输出的文字进行截取,保留400个字符
2,截取内容最后如果是url,保留完整url地址
3,添加省略号......
----
其中对url的保留比较麻烦,尤其是有两个相同url时不能采用indexOf获取其字符位置。
处理结果:

js中根据字数截取字符串,不能截断url

相关代码:
String.prototype.sizeAt = function(){ 
var nLen = 0; 
for(var i = 0, end = this.length; i<end; i++){ 
nLen += this.charCodeAt(i)>128?2:1; 
} 
return nLen; 
}; 
String.prototype.cutStr = function(n, sCut){ 
if(this.sizeAt() <= n){ 
return this; 
} 
sCut = sCut || ""; 
var max = n-sCut.sizeAt(); 
var nLen = 0; 
var s = this; 
for(var i =0,end = this.length;i<end;i++){ 
nLen += this.charCodeAt(i)>128?2:1; 
if(nLen>max){ 
s = this.slice(0,i); 
s += sCut; 
break; 
} 
} 
return s.toString(); 
}; 
String.prototype.cutStrButUrl = function(n, sCut){ 
if(this.sizeAt() <=n){ 
return this.toString(); 
} 
sCut = sCut || ""; 
var max = n-sCut.sizeAt(); 
var s = this; 
//查找所有包含的url 
var aUrl = s.match(/https?:\/\/[a-zA-Z0-9]+(\.[a-zA-Z0-9]+)+([-_A-Z0-9a-z\$\.\+\!\*\/,:;@&=\?\~\#\%]*)*/gi); 
//当第max个字符刚好在url之间时,bCut会被设置为flase; 
var bCut = true; 
if(aUrl){ 
//对每个url进行判断 
for(var i=0, endI = aUrl.length;i<endI;i++){ 
var sUrl = aUrl[i]; 
//可能出现两个相同url的情况 
var aP = s.split(sUrl); 
var nCurr = 0; 
var nLenURL = sUrl.sizeAt(); 
var sResult = ""; 
for(j = 0, endJ = aP.length; j<endJ; j++){ 
nCurr +=aP[j].sizeAt(); 
sResult +=aP[j]; 
sResult += sUrl; 
//当前字数相加少于max但添加url超过max:即会截到url 
if(nCurr < max && nCurr + nLenURL>max){ 
s = sResult + sCut; 
bCut = false; 
break; 
} 
nCurr += nLenURL; 
} 
if(bCut === false){ 
break; 
} 
}; 
} 
if(bCut){ 
s = s.cutStr(n, sCut); 
} 
return s.toString(); 
}; 
console.log('正常截取20个字符'.cutStrButUrl(20,'......')); 
console.log('正常截取20个字符,但我超了'.cutStrButUrl(20,'......')); 
console.log('有url的字符串http://www.baidu.com你能截取到吗?'.cutStrButUrl(20,'......')); 
console.log('http://www.baidu.com有两个相同url的字符串http://www.baidu.com好吗?'.cutStrButUrl(51, '......'));
Javascript 相关文章推荐
JS中getYear()和getFullYear()区别分析
Jul 04 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
javascript中JSON.parse()与eval()解析json的区别
May 19 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
socket.io学习教程之基本应用(二)
Apr 29 Javascript
React手稿之 React-Saga的详解
Nov 12 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 Javascript
记一次vue跨域的解决
Oct 21 Javascript
js 实现css风格选择器(压缩后2KB)
Jan 12 #Javascript
js日历功能对象
Jan 12 #Javascript
关于 文本框默认值 的操作js代码
Jan 12 #Javascript
新发现一个骗链接的方法(js读取cookies)
Jan 11 #Javascript
JS读取cookies信息(记录用户名)
Jan 10 #Javascript
判断对象是否Window的实现代码
Jan 10 #Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 #Javascript
You might like
php基础教程 php内置函数实例教程
2012/08/21 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
javascript常用功能汇总
2015/07/05 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
2017/03/23 jQuery
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
详解Django通用视图中的函数包装
2015/07/21 Python
python判断输入日期为第几天的实例
2018/11/13 Python
Python中常用的内置方法
2019/01/28 Python
Python Flask框架扩展操作示例
2019/05/03 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
软件测试英文面试题
2012/10/14 面试题
法律专业推荐信范文
2013/11/29 职场文书
市场部管理制度
2014/02/02 职场文书
运动会开幕式主持词
2014/03/28 职场文书
实验室的标语
2014/06/20 职场文书
实名检举信范文
2015/03/02 职场文书
离职信范本
2015/06/23 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书
apache基于端口创建虚拟主机的示例
2021/04/22 Servers
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js