手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆

JS:截取文章一部分显示(无损html)

首页 > Javascript >

很多做站的朋友都会有一个问题,在显示摘要的时候,如果摘要前有很多图片,那么显示出来的页面是不太正常的。比如,摘要显示100个字符,可是如果前面有很多图片,去掉图片代码后,100个字符已经几乎用完了。怎么办?
我个人是这样处理的。在PHP中,先用strip_tags去除内容中的标签,然后trim一下,再进行截取。这样的话就几乎没有什么问题了。
而这篇文章就有点意思,用作者的话来说,是无损html。来吧看看他写的内容。

最近在做一些内容搜索的工作,搜索出来的内容为html格式,列表部分需要显示每项内容的一部分。因为是html格式的内容,直接截取内容的前多少字符显 然不合适了。而如果直接去掉所有html格式然后再截取又无法达到想要的效果,再网上搜了一通之后,写下如下代码应该可以满足基本的要求了。(js写的, 因为容易调试)

JavaScript代码
  1. var br = {};  
  2. br.spTags = ["img","br","hr"];/*不需要成对出现的标记*/  
  3. br.contain = function(arr,it){  
  4.     for(var i=0,len=arr.length;i<len;i++){  
  5.         if(arr[i]==it){  
  6.             return true;      
  7.         }  
  8.     }  
  9.     return false;  
  10. }  
  11. br.subArtc = function(article,worldNum){  
  12.     var result = [];  
  13.     /*首先截取需要的字串*/  
  14.     var wcount = 0;  
  15.     var startTags = [],endTags = [];  
  16.     var isInTag = false;  
  17.     for(var i=0,len=article.length;i<len;i++){  
  18.         var w = article[i];  
  19.         result.push(w);  
  20.         if(w=="<"){  
  21.             isInTag = true;      
  22.         }  
  23.         if(!isInTag){  
  24.             wcount++;  
  25.             if(wcount==worldNum){  
  26.                 break;      
  27.             }  
  28.         }  
  29.         if(w==">"){  
  30.             isInTag = false;      
  31.         }  
  32.     }  
  33.     /*对字串进行处理*/  
  34.     var j=0;  
  35.     isInTag = false;  
  36.     var isStartTag = true;  
  37.     var tagTemp = "";  
  38.     while(j<i){  
  39.         w = result[j];  
  40.         if(isInTag){  
  41.             if(w==">" || w==" " || w=="/"){  
  42.                 isInTag = false;  
  43.                 if(isStartTag){  
  44.                     startTags.push(tagTemp);      
  45.                 }else{  
  46.                     endTags.push(tagTemp);      
  47.                 }  
  48.                 tagTemp = "";  
  49.             }  
  50.             if(isInTag){  
  51.                 tagTemp+=w;      
  52.             }  
  53.         }  
  54.         if(w=="<"){  
  55.             isInTag = true;  
  56.             if(result[j+1]=="/"){  
  57.                 isStartTag = false;  
  58.                 j++;  
  59.             }else{  
  60.                 isStartTag = true;      
  61.             }  
  62.         }  
  63.         j++;  
  64.     }  
  65.     /*剔除img,br等不需要成对出现的标记*/  
  66.     var newStartTags = [];  
  67.     for(var x=0,len=startTags.length;x<len;x++){  
  68.         if(!br.contain(br.spTags,startTags[x])){  
  69.             newStartTags.push(startTags[x]);  
  70.         }  
  71.     }  
  72.     /*添加没有的结束标记*/  
  73.     var unEndTagsCount = newStartTags.length - endTags.length;  
  74.     while(unEndTagsCount>0){  
  75.         result.push("<");  
  76.         result.push("/")  
  77.         result.push(newStartTags[unEndTagsCount-1]);  
  78.         result.push(">");  
  79.         unEndTagsCount--;  
  80.     }  
  81.     return result.join("");  
  82. };  

基本思路:

1.绕过标记,取得实际内容字数 ,如需要显示内容前100个字,绕过标记检索,得到第一百个字实际的索引。然后截取此索引前面的字串。
2.根据一得到的字串,得到这个字串中存在的开始标记和结束标记。注:此处的开始标记标识以"<"开通,且下一个字符不为"/"。
3.剔除2中 得到的开始标记中的不需要成对出现的标记。如br,img,hr等。
4.对比经过3处理的开始标记和2中得到的结束标记,没有配成对的在合适的位置为其配对。

此功能没有经过严格的测试,大家若有兴趣可以可以帮忙测试,有更好的想法的也可以回帖讨论。 

--EOF--http://www.cnblogs.com/bravfing/archive/2010/05/02/1725924.html

我没有用PHP的试过,因为在PHP中本身对多字节的支持就不是特别的好不象js,认为中文就是一个字符。不过思路可以考虑一下,但真正要显示摘要的话,当然还是不要含 HTML代码,因为那可能会影响页面布局。

 




本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

Tags: substr, html, 页面布局

« 上一篇 | 下一篇 »

只显示10条记录相关文章

表单提交时submit按钮的值没有被提交 (浏览: 60613, 评论: 5)
jQuery的html()等方法介绍 (浏览: 42429, 评论: 1)
基于HTTP长连接的推技术:COMET (浏览: 20689, 评论: 0)
RTF文件批量转成HTML文件 (浏览: 18765, 评论: 1)
HTML重构 (浏览: 17069, 评论: 3)
HTML 5的五个激动人心的特性 (浏览: 16439, 评论: 0)
避免在 HTML 头部使用注解 (浏览: 15067, 评论: 1)
写HTML和CSS的新方法 (浏览: 14468, 评论: 1)
部分转:卡片、页与卷轴 (浏览: 13330, 评论: 0)
学习HTML中的意外发现:xmp,plaintext (浏览: 13248, 评论: 0)

3条记录访客评论

very good

Post by 华宇物流公司 on 2010, May 25, 2:57 PM 引用此文发表评论 #1

刚刚需要用到,搜索到这里了,谢谢

Post by 皙.肤.泉 on 2010, May 9, 1:05 AM 引用此文发表评论 #2

<script>alert('test');
</script>

Post by gouki on 2010, May 6, 12:12 AM 引用此文发表评论 #3


发表评论

评论内容 (必填):