2010年1月

【2010.01.21 更新】
前天发布的 Firebug 1.5 已经修复了这个 Bug。
本文将停止更新。
(实际上自发布后也没更新过 =_,=)

【2009.07.06 发布】
题目很拗口,
事实上想用一句话清楚地描述这个问题并不容易,
那么还是看图说话吧:

请打开淘宝网首页,
Firebug 查看“公告栏”区域的圆角区域(如下图),

淘宝网“公告栏”圆角

圆角的右上部分是用一个无子节点的 SPAN 标签实现的(如下图):

a blank non-self-closing tag issue of firebug - source viewing

那么问题出现了:
由于它是无子节点的,
因此它被 Firebug “误认为”是一个自闭合标签。

a blank non-self-closing tag issue of firebug - source editing

在实时编辑代码时问题亦然(如上图)。
而事实上 Firebug 遵循的 XML 标准,
这样处理是完全没有问题的。

无子节点的 SPAN 标签是否存在“语义问题”将不是本次讨论的重点,
毕竟我们还处于比较落后的兼容时代,
平时难免会遇到类似的麻烦。
特别是前端工程师将 Demo 页面完成交付开发工程师来拼装模板时,
如果开发工程师使用 Firebug 来复制代码,
那么在 IE 下将由于“SPAN 标签未被闭合”而发生错位(如下图):

- 阅读剩余部分 -

PHP 有一个名为 parse_url 的函数,
其方便之处我就不多置喙了,
总之,
使用它可以将一个形如

http://user:pass@quchao.com:80/about-me/?t=100102#hash

的 URL 分解并返回这样一个数组:

Array [scheme] => http [host] => quchao.com [user] => user [pass] => pass [path] => /about-me [query] => t=100102 [fragment] => hash )

而当 F2E 们越来越多地编写与异步、分页和浏览历史等功能相关脚本时,
频繁地操作 URL 就成了一件恼人的事情。
于是不才模仿 parse_url 编写了一段正则来完成这个功能:

^(?[^:]+):\/\/(?:(?[^:@]+):?(?[^@]*)@)?(?:(?[^/?#:]+):?(?\d*))(?[^?#]*)(?:\?(?[^#]+)?)?(?:#(?.+)?)?$

令人惋惜的是 Javascript 的正则引擎还不支持自定义分组名,
也不支持大多数的非捕获分组,
因此在 JS 里使用需要“精简”成这样

'http://user:pass@quchao.com:80/about-me/?t=091226#test' .match(/^([^:]+):\/\/(?:([^:@]+):?([^@]*)@)?(?:([^/?#:]+):?(\d*))([^?#]*)(?:\?([^#]+)?)?(?:#(.+)?)?$/);

当然,
分解出来的各部分顺序与原函数还不尽相同,
必要时大家可以另外封装一层来使用。

最后照例上图:
(虾米,这玩意儿也有图?!)

Parse a URL and return its components with regex

p.s. 我记得有个可以图形化显示正则匹配过程的网站,
相当地有趣,
敬请各位留言告知。
已经找到,
地址是:http://osteele.com/tools/reanimator/
可惜功能还不是很强……