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中的隐式类型转换
Dec 05 Javascript
js的2种继承方式详解
Mar 04 Javascript
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
javascript限制文本框输入值类型的方法
May 07 Javascript
js获取图片宽高的方法
Nov 25 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
8个JS的reduce使用实例和reduce操作方式
Oct 05 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 has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
Laravel中使用Queue的最基本操作教程
2017/12/27 PHP
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
python根据url地址下载小文件的实例
2018/12/18 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
Python post请求实现代码实例
2020/02/28 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
大学自主招生自荐信
2013/12/16 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
代理人委托书
2014/09/16 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
感谢信模板大全
2015/01/23 职场文书
闪闪红星观后感
2015/06/08 职场文书
周一给客户的问候语
2015/11/10 职场文书