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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
Vue实现选择城市功能
May 27 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 11 Javascript
vue全屏事件开发详解
Jun 17 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 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从二维数组得到N层分类树的实现代码
2016/10/11 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
javascript EXCEL 操作类代码
2009/07/30 Javascript
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
Python selenium如何设置等待时间
2016/09/15 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
Python如何在bool函数中取值
2020/09/21 Python
python如何写个俄罗斯方块
2020/11/06 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
Linux文件系统类型
2012/09/16 面试题
银行服务感言
2014/03/01 职场文书
售后客服工作职责
2014/06/16 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
中学总务处工作总结
2015/08/12 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书