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 多行滚动代码(附详细解释)
Jun 17 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
Javascript数组与字典用法分析
Dec 13 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
vue实现在线学生录入系统
May 30 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之密码加密的几种方式
2015/07/29 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
2016/12/08 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
详解vuex状态管理模式
2018/11/01 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
pygame学习笔记(4):声音控制
2015/04/15 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
COS美国官网:知名服装品牌
2019/04/08 全球购物
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
行政监察建议书
2014/05/19 职场文书
医学求职信
2014/05/28 职场文书
环卫工人节活动总结
2014/08/29 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
交通事故被告答辩状
2015/05/22 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript
图文详解nginx日志切割的实现
2022/01/18 Servers
vue判断按钮是否可以点击
2022/04/09 Vue.js