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/
可惜功能还不是很强……

标签: JavaScript, Regex

已有 8 条评论

  1. 多动症 多动症

    你好!我第一来贵站,特来学习!我会持续关注贵站,定期回访!希望交个朋友,一起交流!如果可以的话建个友链哦!我的小站 www.duodongz.com www.nba56.com 恭候您的回访哦!

  2. 游目网 游目网

    Cool,正好需要,感谢分享,收藏了。

  3. 51biger 51biger

    picasa 图片不好用

    1. Chao QU Chao QU

      @51biger
      因为现在被 ban 了。
      支持外链还是相当不错的。

  4. eddie eddie

    你是说这个吗?
    http://gethifi.com/regexp/

    1. Chao QU Chao QU

      @eddie
      你这个也不错,
      我已经找到并更新正文了。

  5. 明城 明城

    解析 URL 还可以用另外比较猥琐的方法 http://js4.me/archives/2873/

    PS:爷的,外链图片竟然用 picasa 的,害得爷还得找靠谱的 hosts

    1. Chao QU Chao QU

      @明城
      picasa 死得太惨了……

添加新评论