新年新气象

2008-12-31 23:02:32 1条评论»

新年，新气象！

感谢2008！迎接2009！

2008

2008-12-29 12:06:58 2条评论»

又一年，让我仔细回想一下～···

去年的这个时候已经到了广州，有了第一份正式的工作，然后年后辞职，然后换了新的工作。3月到5月在捣鼓ajax和php，为毕业设计瞎忙活。5月开始做毕业设计，然后在月底带着没有完成的毕业设计和一个字没动的毕业论文回了学校，6月，糜烂～每天活在酒肉堆里，两次毕业答辩后，毕业了。7月到8月，回来继续上班，然后迎接一拨又一拨的兄弟，8月初回去给爸过了第一次生日，用啤酒把一长辈喝晕了。那两个月，我成了月光族。9月到10月，原以为可以按自己的计划做些事情，但是总有些“没事的人”来干扰你，同时在10月买了小黑。11月去深圳喝了某个朋友的喜酒，进一步感觉——老了。12月，很闲～···

这一年其实只有一件大事——毕业了～···一切自然而然，一切都很平静。毕业过后，在一个城市的同学还是很多，还是经常在一起吃喝～我自己觉得其实我是一个比较没心没肺的人，我也只是偶尔大家坐着看电视，或者吃饭的时候才会聊起在学校的一些FB事迹；然后偶尔会在晚上躺在床上入睡前的那一分钟，脑中闪现几个学校生活的片段。

这一年学习上进步甚少，还是在玩弄着最基础的东西；工作也只是一份工作，还没有成为一份事业～···

展望2009，要有希望，要坚持！

中文按钮完美显示方案

2008-12-20 14:17:30 发表评论»

先看这段代码在不同浏览器中的表现。

代码：

<input type="submit" value="提交" /> <input type="submit" value="按钮左右左右内边距会随文本自动增加" /> <input type="reset" value="重置" />

在各浏览器中的表现：

可以明显观察到在默认样式下IE6/7中文按钮显示主要存在两个问题：

文本无法正常垂直居中
按钮中文本与左右边框的间距会随文本长度变化，而不是一个固定值

那么一个按钮正常的默认样式是怎么样的？我们可以通过Firebug观察button的“盒模型”，如下图：

Firefox中按钮默认有2px的边框，6px的左右内边距。

注意：以上测试都是在windows经典主题下完成，而不同主题下的按钮的样式是有所差别的。比如我最初使用的MCE 2005主题下按钮的边框宽度为3px。

在上面的测试中似乎IE8 beta2已经比较完美了，其实不然。我们对按钮的高度做一些改变，你就会发现IE8还没有想象中的完美，如下图：

可以看到，事实上IE8(b2)中，按钮中的文本（包括英文文本）是固定在距按钮上边框4px的位置，看起来情况比IE6/7还要糟糕！当然IE8(b2)已经解决了左右内边距随文本变化的问题，而且IE8也还是beta版本，希望能在正式版中修复这些问题。

而对于IE6/7（更低版本没测试）中按钮文本与左右边框的间距随文本长度变化的问题就不仅限于中文文本的按钮，所以似乎早在05年就有人提出了解决办法：http://jehiah.cz/archive/button-width-in-ie

具体方法即是重置padding：

.button{
    overflow:visible; /* for ie6/7 */
    padding:0 6px;
}

该方法存在一个明显的缺点：IE6/8中按钮的高度会增加1px。

（更新说明：经过进一步测试发现IE6/7中文本与左右边框的间距并不是附加在按钮上的左右内边距，而是附加在文本上的某种边距。个人认为overflow:visible;在此正是用于清除该边距。）

而对于中文文本无法正确居中对齐的问题，在我和TZ讨论一天后似乎也没找到一个比较满意的解决方案。暂时只能通过line-height来解决，而且还得使用hack来解决重置padding后增加的1px高度问题。

line-height的具体取值就去这里看看吧：http://fedcn.org/?p=3

substr()

2008-12-18 12:51:44 2条评论»

写了个获取最新评论的函数，用substr截取，后面总会莫名其妙地多个乱码，原来，substr() 函数只能正确截取单字节字符串，所以针对双字节或多字节编码的字符就得自己动手了～···

function sysSubStr($String,$Length,$Append=false){
	if (strlen($String) <= $Length ){
		return $String;
	}
	else{
		$I = 0;
		while ($I < $Length){
			$StringTMP = substr($String,$I,1);
			if ( ord($StringTMP) >=224 ){
				$StringTMP = substr($String,$I,3);
				$I = $I + 3;
			}
			elseif( ord($StringTMP) >=192 ){
				$StringTMP = substr($String,$I,2);
				$I = $I + 2;
			}else{
				$I = $I + 1;
			}
			$StringLast[] = $StringTMP;
		}
		$StringLast = implode("",$StringLast);
		if($Append){
			$StringLast .= "...";
		}
		return $StringLast;
	}
}

javascript之正则表达式（二）

2008-12-14 21:19:58 发表评论»

子表达式

上一篇文章的最后部分中的var reUrl = /^(http):\/\/omiga\.(org)$/gi;已经涉及到子表达式了。用来指定重复次数的元字符只能作用于紧挨着它的字符或元字符，而在实际应用中我们需要进行重复匹配的字符往往不一定就只是一个字符或元字符，就如reUrl中所要匹配的“http”和“org”就是多个字符，这时候就可以使用（和）将多个字符括起来作为一个独立的元素来使用。

同样在上一篇文章中所构造的验证email地址的正则表达式var reMail = /\w+@\w+\.\w+/i;并不完善，一个有效的用户名除了可以是字母、数字、下划线外，还可以是点号，同时域名部分也不能保证是mail.com这行的形式，也完全有可能是mail.mymail.com这样的形式，所以一个更为完善的匹配有效email地址的正则表达式是这样的：

var reEmail = /(\w+\.)*\w+@(\w+\.)+\w+/i;

字表达式允许多重嵌套，而且这种嵌套在理论上是没有限制的，但在实际应用中还是应该根据实际情况适可而止。

回溯引用

在web开发中，我们经常需要去匹配HTML标签，大多数的HTML标签都有一个开始标记和结束标记如<h1></h1>,<div></div>，如果只需单纯的匹配H1和DIV我们可以很容易的构造出该正则表达式：

var reH1 = /<h1>.*?<\/h1>/gi;
var reDiv = /<div>.*?<\/div>/gi;

但是我们所要匹配的并不是某个或某几个HTML标签，事实上HTML具体是什么样的形式我们完全是未知的，比如XML的标记我们是完全无法预计的，所以分组匹配在这里完全排不上用场。幸运的是，在正则表达式中回溯引用允许正则表达式模式引用前面的匹配结果。具体应用可以参考下面匹配HTML标签的正则表达式。

var html = "<h1>omiga</h1>";
var reTag = /<(\w+\d?)>.*?<\/\1>/gi;
document.write(html.match(reTag)); //<h1>omiga</h1>

reTag最后部分的\1便是一个回溯引用，引用的前面的第一个子模式(\w+\d?)，当然如果前面还存在第二个子模式我们也可以使用\2引用、。注意：回溯引用只能引用前面已经匹配过的结果，而下面这样的写法就是错误的。

var reTag = /<\1>.*?<\/(\w+\d?)>/gi;

回溯引用在替换操作中有着十分广泛的应用。比如我们要将一段文本中的所有网址自动添加上其对应的超链接，即是将“http://omiga.org”的字符串替换成<a href=”http://omiga.org”>omiga</a>的形式。我们就可以这样处理：

var url = "http://omiga.org";
var reUrl = /(http[s]*:\/{2}(\w+\.)+\w+)/gi;
document.write(url.replace(reUrl,'<a href="$1">$1</a>')); //<a href="http://omiga.org">http://omiga.org</a>

$1引用了前面的子模式(http[s]*:\/{2}(\w+\.)+\w+)。注意：javascript中进行替换操作时回溯引用使用”$”而不是”\”。

前后查找

如果我们需要获取h1标签中的文本（包含在h1标签中的文本，不包括h1本身），这个正则表达式应该如何写？比如”<h1>front-end</h1>”，在所有介绍过的方法中，似乎都还没有提及过要匹配某个字符串，但却只返回某些字符前或后的字符串的情况，正则表达式中确实是存在这样的语法。

var fe = "<h1>front-end</h1>";
var reInnerText = /(?<=<h1>).*?(?=<\/h1>))/i;

在reInnerText和/<h1>.*?<\/h1>/i的匹配模式是相同的，唯一不同的返回结果，/<h1>.*?<\/h1>/i会返回整个fe字符串，而reInnerText只返回”front-end”，比较这两个正则表达式可以发现两处不同的写法：(?<=<h1>)，(?=<\/h1>)。(?<=<h1>)定义了一个向后查找模式，即匹配结果只包括”<h1>”后面的部分；(?=<\/h1>)则定义的是一个向前查找模式，匹配结果只返回”</h1>”前的结果；所以reInnerText的匹配结果只返回”<h1>”和”</h1>”之间的内容！前后查找的语法很简单，向前查找是一个以”?=”开头的字表达式，而向后查找确实一个以”?<=”开头的字表达式。

遗憾的javascript并不支持正则表达式的向后查找，所以事实上reInnerText的写法在javascript是有语法错误的。有条件可以使用其他支持前后查找的语言进行验证，比如PHP。

$title = '<h1>front-end</h1>';
if(preg_match('/(?<=<h1>).*?(?=<\/h1>)/i',$title,$rst)){
   echo $rst[0]; //front-end
}

条件查找

正则表达式还有一种功能强大但却不被经常用到的功能——嵌入条件查找。在回溯引用一节中所介绍的匹配HTML标签的正则表达式并没有考虑诸如<img src=”logo.gif” />这样的元素，而下面的reImg正式一个使用嵌入条件匹配img元素的正则表达式。

var reImg = /<(img)?\s+[^>]+(?(1)\/)>/i;

我兴高采烈的测试着～···奇迹发生了！javascript还是不支持正则条件查找～···囧～···那就不写了吧～···+_+