易栈网-膘叔

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

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

基本思路：

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代码，因为那可能会影响页面布局。

看到一篇文章，是这样说的：

上面三种都可以转成int，但是math.round会四舍五入。

我看的这篇文章介绍的很少，只是一个简单的说明，在网页中，很多人把void当成了一个阻止默认事件发生的工具，因为他没有返回值，所以使用的时候可以肆无忌惮一点。

原文如下：

Javascript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值。

void 操作符用法格式如下：
1. javascript:void (expression)
2. javascript:void expression
注：expression 是一个要计算的 Javascript 标准的表达式，圆括号是可选的。

当使用 void 操作符指定的超链接时，表达式会被计算但是不会在当前文档处装入任何内容。

举例：

跳转的几种办法：

上述第二种就是所谓利用void来阻止默认链接事情的发生。
还有一种情况就是在href里加入"###"，即href="###"，为什么是3个而不是一个？这也有一个缘故，请查看：FORM不能跳转，当找不到相应的锚点时，页面才不会往上滚动，如果指定锚点，而锚点名称为空，页面会滚动到顶部。###,其实只是指定一个不存在的锚点而已（又写的乱了）

html5 越来越近了，HTML5可能给我们带来很大的改变，就象新的标签可以支持视频了。看看javascript的架构师能够做什么吧。原文来自http://www.cnbeta.com/articles/109538.htm

由于当前技术仍偏向功能强化为主要思维，指令码趋向庞杂的结果，容易产生更多安全漏洞，且失去快速因应攻击调整架构的灵活性。
身 为JavaScript网路技术重要推手的雅虎（Yahoo!）架构设计师Douglas Crockford表示，现行网页开发技术思维仍偏重多媒体功能或浏览效能的提升，未来应以安全为第一优先。 Crockford 现为Yahoo!资深JavaScript架构师，负责YUI（Yahoo! User Interface）的架构设计，并且担任ECMA JavaScript 2.0技术委员会成员，为JavaScript开发社群大师级人物，此次受邀来台参加OSDC（Open Source Developer's Conference Taiwan）进行专题演讲，向国内开发者介绍ECMA JavaScript的发展。

Crockford向媒体阐述网络技术发展时指出，当前的网络技术仍然不脱过去的思维，网页开发技术仍以功能强化、浏览网页效能提升为主，虽然强 化了网络开发的丰富性，但未将网络安全列为开发优先考虑因素的结果，致使网络安全事件层出不穷。

延续过去网络开发思维的结果，现今网络技 术强调强大的互动、多媒体功能，但也让一些攻击手法兴起，以XSS（Cross-Site Scripting）为例，由于内嵌多个不同来源的脚本，容易让黑客借指令集趁虚而入，窃取用户端计算机的数据。

虽然也有新的技术，如 Google推动的Caja，用以防范XSS跨站攻击手法，但整体技术发展方向仍是朝功能、效能提升前进。

以HTML 5技术为例，Crockford表示，虽然HTML5增加了许多功能，但让整个脚本变得更为庞大且复杂，容易产生漏洞遭到攻击；另外，支持存取使用者电 脑、手机的终端数据，将数据被窃的安全风险扩大至手机上，而过于庞大复杂的结果，不容易因应日新月异的攻击手法改变，长期而言易形成安全风险。

对 于当前浏览器业者形成速度竞赛，纷纷强化JavaScript引擎加速网页浏览速度，号称最快的浏览速度，他认为，浏览器加速网页浏览速度虽是好事，但这 样改善方式有限，只在5至10%的终端浏览器部份加速，若能同时改善服务器端，加速的效果更大。

对于制定中的新标准ECMA Script 5，他乐观预期未来将成为主要的网络开发标准，虽然Apple、Chrome还不明确，但包括IE、FireFox、Opera都倾向ECMA Script 5，今年应会看到新的浏览器应用。
--EOF--
HTML5已经被越来越多的浏览器所支持，IE还能挺多久？是否又会创造出什么新标准？从IE4开始，多少网页设计师为了兼容所有的浏览器而痛苦？以后又会怎么样？IE6还有这么多用户，怎么办？这一些都让人迷惘啊。HTML5来了，对于前端工程师的压力就要更大一点了。代码没写好，很可能就直接被人利用了。以前的XSS漏洞可能会被更加扩大、放大。还是需要多学一点安全了

原文：http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/

在非IE浏览器中实现“灰阶化[1]”

这个问题看似简单，实际上要付出很大的努力[2]。要的结果很简单：在所有非IE浏览器中模拟Internet Explorer浏览器的grayscale（灰度）滤镜。然而，它的解决方法并非你想得那么简单，这也让我着实大大地吃了一惊。

在 IE中，grayscale滤镜可以应用到任意一个元素中，它会很直观地将元素转变为灰度。可以使用下面 这行复杂且专有的CSS来实现grayscale滤镜。

如上所示，在IE中实现这种效果简单是小菜一碟；然而，在其他的浏览器中，需要引起很大的关注。

需要有两件情况值得考虑：图片元素和非图片元素。“非图片”类元素实现十分简单：在当前文档中遍历每个元素，寻找类似“backgroundColor”和 “color”的色彩属性，将它的RGB颜色值转换为灰度值。有不少方法可以实现；注意我们这里不是说降低图片的饱和度；“灰阶化”很明显跟它不一样。

 
JavaScript代码
// Desaturate:降低饱和度  
function RGBtoDesat(r,g,b) {  
var average = (r + g + b) / 3;  
return {  
  r: average,  
  g: average,  
  b: average  
};  
}  
   
// Grayscale:灰阶化  
function RGBtoGrayscale(r,g,b) {  
var mono = parseInt( (0.2125 * r) + (0.7154 * g) + (0.0721 * b), 10 );  
return {  
  r: mono,  
  g: mono,  
  b: mono  
};  
}  

因此，每个带颜色属性的元素要使用它来转为灰阶；初始颜色用来重置属性值。

我们的图片能否转为灰阶取决于两个因素；一是浏览器必须要支持HTML5 canvas元素和它getImageData方法，二是主机上的所有图片必须位于同一域名下；除此外，主机上的图片不能脱离getImageData方法而不管它是否支持[3]。Google Chrome浏览器和Safari（4以下版本）由于不支持getImageData，先不作讨论。其他的浏览器支持canvas元素，完全可以做到“灰阶化”图片。

实现这种方式是要“手工”遍历图片中的每一像素，并应用我们用来设置CSS 颜色属性的RGBtoGrayscale函数。真要这样做的话，浏览器绝对吃不消；除非有极其快速的Javascript引擎来承受大图片处理的压力。

鉴于上面提到的原因，因此在任一个元素需要“灰阶化”前，添加一个“预置”函数去运行显得尤为必要，这个函数可以使用零超时递归技术[4]来避免耗死浏览器。如果仅仅是小图片需要转换的话，不必使用“预置”函数，可以直接使用这种暴力转换。

为什么呢，这是为什么呢？

你肯定想知道在“灰阶化”会有哪些应用。那么，比如说：降低色彩以减少用户的视觉焦点，以此来减少用户对你网站上五颜六色东西的关注；比如说，光箱特效。像 vBulletin的论坛系统就使用了这种效果，它会你点击离开时，将页面变灰；然后会弹出确认框，这个确认框非很容易识别，因为它是页面中惟一的带色彩的东西。

“灰阶化”困扰我的真实原因是因为我很想知道是否有可能做到这个目的。我已经知道在IE浏览器里有这个滤镜，我还想看看在其他浏览器中能否模拟实现这种方便的特效。我也知道这种特效可能被认为已经过时了，但这并不重要；我仅仅是对实现它很感兴趣。 

示例

我做了一个示例页面，上面有几个格斗士[5]的图片，功能已经在这篇文章中说过了。注意，在Safari（小于4）或才 Chrome（还有可能在Firefox老版本（V.2以前））不起作用；不要忘了它仅仅是一个试验。
http://james.padolsey.com/demos/grayscale/

使用方法

要对一个元素实现“灰阶化”需要调用 grayscale()函数，并将元素作为参数传递，比如：
 
JavaScript代码
var el = document.getElementById( 'myEl' );  
grayscale( el );  
// 也可以传递一个DOM集合  
// (这样所有的元素都会得到“灰度效果”)  
grayscale( document.getElementsByTagName('div') );  
 //也可以在jQuery对象集合中使用  
grayscale( $('div') );  

若要重置元素（返回到原来的颜色状态）必须调用grayscale.reset()，并将需要重置的元素作为参数传递：
JavaScript代码
grayscale.reset( el );  
// reset()同样可以接受DOM对象或jQuery对象集合参数  
grayscale.reset( $('div') );  
其中的prepare函数，上面已经讲过了，在有大图片要处理的情况下需要使用到，或者即使只是几个小图片。注意大图片需要有一会儿的时间去处理（一张 300×300的PNG格式图片在“预置”方式下需要耗费3秒钟的时间）。
JavaScript代码
grayscale.prepare( document.getElementById('myEl') );  
// 同样可以接受DOM对象或jQuery对象集合参数  
grayscale.prepare( $('.gall_img') );  

[完]

注：

[1]:灰阶化：原文grayscaling，意为“采取灰度标准”，即灰阶化，将图片由彩色转为灰度；
[2]原文为”This started out as a little experiment and eventually turned into quite an endeavor.“，可能存在翻译问题；
[3]原文为“externally hosted images cannot be passed into ‘getImageData’ regardless of whether it’s supported.”，翻译存疑；
[4]零超时递归技术：原文zero-timeout recursion technique，应为zero-time recursive technique；参见http://en.wikipedia.org/wiki/Recursion_(computer_science)；
[5]格斗士：原文blood-thirsty hunters，嗜血的猎人

--EOF--
灰阶化可以用在414或者512，值得用用喽。。。