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 相关文章推荐
浅谈关于JavaScript的语言特性分析
Apr 11 Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
纯JavaScript实现实时反馈系统时间
Oct 26 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 判断变量类型实现代码
2009/10/23 PHP
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
javascript 运算数的求值顺序
2011/08/23 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
python文件的md5加密方法
2016/04/06 Python
Python获取linux主机ip的简单实现方法
2016/04/18 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
Python中pass的作用与使用教程
2020/11/13 Python
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
六道php面试题附答案
2014/06/05 面试题
Delphi软件工程师试题
2013/01/29 面试题
小学生个人先进事迹材料
2014/05/08 职场文书
员工年终自我评价
2014/09/14 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL