手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:html

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

很多做站的朋友都会有一个问题,在显示摘要的时候,如果摘要前有很多图片,那么显示出来的页面是不太正常的。比如,摘要显示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, 页面布局

RTF文件批量转成HTML文件

rtf是一种富文本格式,根据RFC的规范,可以将其转为各种文件,如doc,wps等,但如果真的要根据RFC规范一点点的写程序,那就真的太累了。所以。。。我用wps转换了。
以前写过wps生成文档的程序,就是这篇闲着无聊,用WPS生成文档,现在,这个RTF转换到HTML也可以用PHP来完成

PHP代码
  1. <?php  
  2. $wps = new COM('WPS.Application');  
  3. $wps->Visible = false;  //不显示wps界面
  4. $filename = realpath('./RTF_to_HTML_Converter.rtf');  
  5. $stime = microtime(1);  
  6. for ( $ii = 0; $ii < 1000; $ii++ ){  
  7.     $savedfile = "c:\\convert\\{$ii}_test.html";  
  8.     $doc = $wps->Documents->Open($filename);  
  9.     $doc->SaveAs($savedfile, 8);  //参考Document.SaveFormat 属性  
  10.     $doc->Close();  
  11. }  
  12. $wps->Quit();    
  13. echo( sprintf( "%0.6f" , (microtime(1)-$stime) ) );  
  14. unset( $doc , $wps );    

测试了一下,生成1000个文件,花了257秒,4分多种,可以接受这个时间,只是在转换的时候,CPU超过50%,而且是在命令行下的。如果是在网页界面肯定是没有这么快的了。
PS:转换后,中文编码实体化了,&#30475;&#30475;&#20013;&#25991;&#24590;&#20040;&#36716;,变成这样的格式,它是什么内容呢?它们就是:【看看中文怎么转】<-- 可以看一下源码,就知道这7个字是什么样的了

Tags: rtf, html, wps

避免在 HTML 头部使用注解

这个问题我从来没有遇到过,所以感觉很新鲜。
希望遇到这个问题的朋友看到后能够有恍然大悟的感觉。当然事实上很多情况是,不会有人在头部加注释。。

原文:http://blog.linym.net/archives/474(全部翻译成简体了。。原文是繁体)
前几天学弟问我一个问题,说他CSS排版的网页在大部分浏览器都正常,唯独IE怪怪的,网页中的DIV元素怎么样都无法居中,困扰了他许久,他的原始代码内容大致如下:

<!-- Head area -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<style type="text/css">
<!--
#content {
margin: 0 auto;
width: 500px;
}
-->
</style>
</head>

<body>
<!-- Content Begin -->
<div id="content">Content</div>
<!-- Content End -->
</body>
</html>
嗯。看起来不应该会有什么问题,那是什么原因让IE无法将DIV居中呢?突然注意到他网页头问那一行注释,因为自己写网页到现在从未在头部使用过注释

果然,拿掉以后就一切正常了。IE,还真是搞不懂你啊!
(注:全系列 IE 都有此现象)

Tags: html

HTML重构

HTML重构,以前是一个新鲜的东西,我也没有理解,博客园上有人在介绍,还写了三篇。。。

我这里只简单的复制点东西,还是以链接为重吧。(战略篇全文如下)

Refactoring HTML: Improving the Design of Existing Web Applications》是一本精彩的HTML重构指南,作者给出了HTML重构的实践路线和方法。本文是《Refactoring HTML》的读书笔记,按照我的理解将全书的分为:战略篇,战术篇,工具篇。

本文是战略篇:全局方略的角度介绍重构的内涵,原因,时机,目标

嗯哼,我们开始:

 

         进行重构就像打一场仗,而战争的发起是要慎重考虑的,《孙子兵法》里面讲“兵者,国之大事,死生之地,存亡之道,不可不察也。”所以动手重构之前首先要回答下面几个问题:

  • 什么是重构?
  • 为什么进行HTML重构?
  • 什么时候进行HTML重构?
  • HTML重构的目标是什么?
  • 面对质疑:还要重构么?

 

什么是重构 Refactoring?

        本书侧重实战,没有《UML Distilled》那样高屋建瓴的抽象,即使有抽象,抽象层面牵扯的细节过多(这一点在后续的阅读中也可以发现)。这一部分内容我援引了《Refactoring: Improving the Design of Existing Code》对重构的定义:

Refactoring (noun): a change made to the internal structure of software to make it easier to understand and cheaper to modify without changing its observable behavior.

Refactor (verb): to restructure software by applying a series of refactorings without changing its observable behavior.

 

为什么进行HTML重构?

抽象地讲,HTML重构的可以让代码更能适应变化,应对系统和领域需求为新功能的开发提供更优秀的基础。

具体地讲,HTML重构可以:

  • 让代码更具有可读性,更容易理解
  • 重构过程中往往有意外的收获:发现隐藏的系统Bug
  • 增强页面可用性, 关注点从设计者开发者转移到使用者
  • 缩短提高页面的呈现时间(Slow pages -Rendering Times)
  • 解决页面浏览器不兼容问题
  • 搜索引擎优化Search Engine Optimization

 

进行HTML重构的时机?

  • 每一次进行重新设计之前;新功能将构建在一个更稳固的基础之上
  • Refactor When You Need to Fix a Bug
  • Refactor As You Do a Code Review
  • 一个原则:勿以善小而不为;重构的过程往往是断断续续的,很少有一个连续的时间给我们进行重构。所以我们只要有机会进行重构,就动手去做吧

 

HTML重构的目标(What  Refactor To ?

  • XHTML
    理由:XHTML更加严格,浏览器不再解析乱作一团的标签而是格式规范的页内容,这时负担从浏览器转移到页面开发者。内容聚合,搜索引擎优化,样式表都可以更好的应用基础。开发者能够更容易调试和解决问题,因为问题更容易定位了。XHTML不能完全解决浏览器兼容问题,但是它能够消除大部分的浏览器不兼容问题已经居功甚伟。主流HTML编辑器都提供对XHTML的支持。XHTML是未来Web应用提供坚实的基础,如:MathXML MusicXML SVG
  •  CSS

理由:将展现层从内容中分离出来。为不同的阅读者提供高可读性。减少代码重复,节省带宽。

  • REST

REST(Representational State Transfer表述性状态转移)是一种针对网络应用的设计和开发方式,可以降低开发的复杂性,提高系统的可伸缩性。REST提出了一些设计概念和准则:

1.网络上的所有事物都被抽象为资源(resource);

2.每个资源对应一个唯一的资源标识(resource identifier);

3.通过通用的连接器接口(generic connector interface)对资源进行操作;

4.对资源的各种操作不会改变资源标识;

5.所有的操作都是无状态的(stateless)。

 

REST之所以能够提高系统的可伸缩性,是因为它强制所有操作都是stateless的,这样就没有context的约束,如果要做分布式、做集群,就不需要考虑context的问题了。同时,它令系统可以有效地使用poolREST对性能的另一个提升来自其对clientserver任务的分配:server只负责提供resource以及操作resource的服务,而client要根据resource中的datarepresentation自己做render。这就减少了服务器的开销。

 

重构的目标不是金科玉律,你没有必要逐一进行实践。你可以按照XHTML->CSS-->Rest的顺序按部就班步步为营,也可以根据实际情况调整重构目标和计划。但是只要你做了,你就可以从重构过程中得到好处。

 

面对质疑:还要重构么?

重构的本质决定了它不是生产性的,重构的完成并没有新功能的产生。所以重构往往面临来自各方面的质疑:

  • 重构就是在浪费时间,我们还是开发新功能吧

 

面对质疑我们给出这样的答案:

  • HTML重构从长远来看为后续开发提供了一个良好的基础,实际上是节省了时间。因为系统更容易添加新功能,更容易维护。重构的过程能让开发者对以前的工作有一个思考,对新人是一个熟悉系统的机会。
  • HTML重构本身并不会占用太多的时间,因为我们有很多自动化的工具可用。
  • HTML重构不需要一个连续的时间,断断续续的时间未尝不可,对于开发者来说,进行重构就像日行一善。

 

HTML重构:战略篇


HTML重构:战术篇

 

HTML重构:工具篇

Tags: html, 重构

基于HTTP长连接的推技术:COMET

之所以再写一次,是因为看到了IBM上的一篇文章,时间也比较早,我在以前也写过一篇简单的文章来进行介绍,不过这篇IBM的写的比较全,而且我以前的写的也仅仅是评论,并没有就COMET的技术进行详细的介绍。

IBM上是这样说的,这只是简单的摘录一段,详细的还是到该页面去看吧,因为IBM的页面说明了有版权限制,而如果要申请复制文章的话,又比较复杂和繁琐,因此,只能这样了:

http://www.ibm.com/developerworks/cn/web/wa-lo-comet/
  1. 传统模式的 Web 系统以客户端发出请求、服务器端响应的方式工作。这种方式并不能满足很多现实应用的需求,譬如:  
  2.   
  3.     * 监控系统:后台硬件热插拔、LED、温度、电压发生变化;  
  4.     * 即时通信系统:其它用户登录、发送信息;  
  5.     * 即时报价系统:后台数据库内容发生变化;  
  6.   
  7. 这些应用都需要服务器能实时地将更新的信息传送到客户端,而无须客户端发出请求。“服务器推”技术在现实应用中有一些解决方案,本文将这些解决方案分为两类:一类需要在浏览器端安装插件,基于套接口传送信息,或是使用 RMI、CORBA 进行远程调用;而另一类则无须浏览器安装任何插件、基于 HTTP 长连接。  
  8.   
  9. 将“服务器推”应用在 Web 程序中,首先考虑的是如何在功能有限的浏览器端接收、处理信息:  
  10.   
  11.    1. 客户端如何接收、处理信息,是否需要使用套接口或是使用远程调用。客户端呈现给用户的是 HTML 页面还是 Java applet 或 Flash 窗口。如果使用套接口和远程调用,怎么和 JavaScript 结合修改 HTML 的显示。  
  12.    2. 客户与服务器端通信的信息格式,采取怎样的出错处理机制。  
  13.    3. 客户端是否需要支持不同类型的浏览器如 IE、Firefox,是否需要同时支持 Windows 和 Linux 平台。  

Tags: comet, html, push

Records:12123