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实现Windows任务管理器的代码
Mar 27 Javascript
html中的input标签的checked属性jquery判断代码
Sep 19 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
浅谈javascript面向对象程序设计
Jan 21 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
微信小程序之购物车功能
Sep 23 Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
Node.js 中判断一个文件是否存在
Aug 24 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
跨浏览器的 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手册及PHP编程标准
2006/12/17 PHP
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
PHP中extract()函数的定义和用法
2012/08/17 PHP
php_pdo 预处理语句详解
2016/11/21 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
Python操作CouchDB数据库简单示例
2015/03/10 Python
利用python代码写的12306订票代码
2015/12/20 Python
Python遍历pandas数据方法总结
2018/02/09 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
Django操作session 的方法
2020/03/09 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
德国网上药房:Apotal
2017/04/04 全球购物
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
女娲补天教学反思
2014/02/05 职场文书
函授药学自我鉴定
2014/02/07 职场文书
党校学习自我鉴定
2014/02/24 职场文书
报关报检委托书
2014/04/08 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
党员教师一句话承诺
2014/05/30 职场文书
汇报材料怎么写
2014/12/30 职场文书
小学生暑假安全公约
2015/07/14 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
800字作文之大雪
2019/12/04 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
JavaScript 定时器详情
2021/11/11 Javascript
使用refresh_token实现无感刷新页面
2022/04/26 Javascript