javascript 文章截取部分无损html显示实现代码


Posted in Javascript onMay 04, 2010

因为是html格式的内容,直接截取内容的前多少字符显然不合适了。而如果直接去掉所有html格式然后再截取又无法达到想要的效果,再网上搜了一通之后,写下如下代码应该可以满足基本的要求了。(js写的,因为容易调试)

var br = {}; 
br.spTags = ["img","br","hr"];/*不需要成对出现的标记*/ 
br.contain = function(arr,it){ 
for(var i=0,len=arr.length;i<len;i++){ 
if(arr[i]==it){ 
return true; 
} 
} 
return false; 
} 
br.subArtc = function(article,worldNum){ 
var result = []; 
/*首先截取需要的字串*/ 
var wcount = 0; 
var startTags = [],endTags = []; 
var isInTag = false; 
for(var i=0,len=article.length;i<len;i++){ 
var w = article[i]; 
result.push(w); 
if(w=="<"){ 
isInTag = true; 
} 
if(!isInTag){ 
wcount++; 
if(wcount==worldNum){ 
break; 
} 
} 
if(w==">"){ 
isInTag = false; 
} 
} 
/*对字串进行处理*/ 
var j=0; 
isInTag = false; 
var isStartTag = true; 
var tagTemp = ""; 
while(j<i){ 
w = result[j]; 
if(isInTag){ 
if(w==">" || w==" " || w=="/"){ 
isInTag = false; 
if(isStartTag){ 
startTags.push(tagTemp); 
}else{ 
endTags.push(tagTemp); 
} 
tagTemp = ""; 
} 
if(isInTag){ 
tagTemp+=w; 
} 
} 
if(w=="<"){ 
isInTag = true; 
if(result[j+1]=="/"){ 
isStartTag = false; 
j++; 
}else{ 
isStartTag = true; 
} 
} 
j++; 
} 
/*剔除img,br等不需要成对出现的标记*/ 
var newStartTags = []; 
for(var x=0,len=startTags.length;x<len;x++){ 
if(!br.contain(br.spTags,startTags[x])){ 
newStartTags.push(startTags[x]); 
} 
} 
/*添加没有的结束标记*/ 
var unEndTagsCount = newStartTags.length - endTags.length; 
while(unEndTagsCount>0){ 
result.push("<"); 
result.push("/") 
result.push(newStartTags[unEndTagsCount-1]); 
result.push(">"); 
unEndTagsCount--; 
} 
return result.join(""); 
};

基本思路:

1.绕过标记,取得实际内容字数 ,如需要显示内容前100个字,绕过标记检索,得到第一百个字实际的索引。然后截取此索引前面的字串。

2.根据一得到的字串,得到这个字串中存在的开始标记和结束标记。注:此处的开始标记标识以"<"开通,且下一个字符不为"/"。

3.剔除2中 得到的开始标记中的不需要成对出现的标记。如br,img,hr等。

4.对比经过3处理的开始标记和2中得到的结束标记,没有配成对的在合适的位置为其配对。

此功能没有经过严格的测试,大家若有兴趣可以可以帮忙测试,有更好的想法的也可以回帖讨论。

作者:cnblogs bravfing

Javascript 相关文章推荐
jquery.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
JavaScript中数组对象的那些自带方法介绍
Mar 12 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
任意Json转成无序列表的方法示例
Dec 09 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
JS数组的高级使用方法示例小结
Mar 14 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 #Javascript
div+css布局的图片连续滚动js实现代码
May 04 #Javascript
javascript面向对象之Javascript 继承
May 04 #Javascript
Javascript 面向对象之重载
May 04 #Javascript
JavaScript 面向对象的之私有成员和公开成员
May 04 #Javascript
javascript 面向对象的JavaScript类
May 04 #Javascript
JavaScript 面向对象之命名空间
May 04 #Javascript
You might like
一个PHP操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python urlopen 使用小示例
2008/09/06 Python
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
python中使用enumerate函数遍历元素实例
2014/06/16 Python
python使用KNN算法手写体识别
2018/02/01 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
Python类中self参数用法详解
2020/02/13 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
美国家居装饰店:Pier 1
2019/09/04 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
公司经理任命书
2014/06/05 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
生产车间主任岗位职责
2015/04/08 职场文书