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实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
详解vue中this.$emit()的返回值是什么
Apr 07 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 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中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
PHP进程同步代码实例
2015/02/12 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
JS实现炫酷轮播图
2020/11/15 Javascript
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
python实现socket客户端和服务端简单示例
2014/02/24 Python
python出现&quot;IndentationError: unexpected indent&quot;错误解决办法
2017/10/15 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
儿科护士自我鉴定
2013/10/14 职场文书
草船借箭教学反思
2014/02/03 职场文书
党建工作先进材料
2014/05/02 职场文书
自主招生学校推荐信
2014/09/26 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
生死抉择观后感
2015/06/09 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
解决golang 关于全局变量的坑
2021/05/06 Golang
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技