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 全角转换实现代码
Jul 17 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
jquery获得当前html页面源码的方法
Jul 14 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
微信小程序实现流程进度的图样式功能
Jan 16 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
Node 搭建一个静态资源服务器的实现
May 20 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
Wordpress php 分页代码
2009/10/21 PHP
PHP Session机制简介及用法
2014/08/19 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
jQuery 使用手册(四)
2009/09/23 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
JavaScript常用数组算法小结
2016/02/13 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
django在开发中取消外键约束的实现
2020/05/20 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
母亲节感恩寄语
2014/02/21 职场文书
综合内勤岗位职责
2014/04/14 职场文书
青年文明号口号
2014/06/17 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
我的中国梦主题班会
2015/08/14 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
MySQL基于索引的压力测试的实现
2021/11/07 MySQL
python playwright 自动等待和断言详解
2021/11/27 Python