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(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
微信小程序实现图片滚动效果示例
Dec 05 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
js代码实现轮播图
May 04 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实现登陆验证码(类似条行码状)
2006/10/09 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
JS实现li标签的删除
2019/04/12 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
Python编写屏幕截图程序方法
2015/02/18 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
用Eclipse写python程序
2018/02/10 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
应届毕业生求职自荐书
2014/01/03 职场文书
幼儿园师德演讲稿
2014/05/06 职场文书
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android
Python编写冷笑话生成器
2022/04/20 Python
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis