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实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
JQuery Tips相关(1)----关于$.Ready()
Aug 14 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
layui实现文件或图片上传记录
Aug 28 Javascript
vue中的适配px2rem示例代码
Nov 19 Javascript
简单通过settimeout看javascript的运行机制
May 10 Javascript
javascript 使用sleep函数的常见方法详解
Apr 26 Javascript
JavaScript中的几种继承方法示例
Dec 06 Javascript
vue路由实现登录拦截
Mar 24 Vue.js
跨浏览器的 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 feof用来识别文件末尾字符的方法
2010/08/01 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
javascript call方法使用说明
2010/01/11 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
Nodejs模块载入运行原理
2018/02/23 NodeJs
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
python实现求最长回文子串长度
2018/01/22 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
python下载库的步骤方法
2019/10/12 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
如何理解python对象
2020/06/21 Python
Sentry错误日志监控使用方法解析
2020/11/12 Python
python实现代码审查自动回复消息
2021/02/01 Python
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
网站出售协议书范文
2014/10/10 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
离婚财产分割协议书
2015/08/11 职场文书