JavaScript正则表达式解析URL的技巧

正则表达式与URL解析概述

正则表达式本质上是用于描述字符模式的一个对象。

本文并非直接提供现成的URL正则表达式及其使用方法，因为网络上此类资源已十分丰富。文章的核心目的是引导读者理解URL正则表达式的构成原理，从而掌握正则表达式的逻辑，以便在未来工作中能够编写出相对简洁的正则表达式。

var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;

var parse_url = /^(?:([A-Za-z]+):)?(\/{,})([-.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;
 var url = "http://qiji.kerlai.net:/GoodsBasic/Operate/?q#simen";
 var result = parse_url.exec(url);
 var names = ["url","scheme","slash","host","port","path","query","hash"];
 for(var i=; i <names.length;i++){
  console.log(names[i]+":"+result[i]);
 }
 //输出结果
 /*
 url:http://qiji.kerlai.net:/GoodsBasic/Operate/?q#simen
 scheme:http
 slash://
 host:qiji.kerlai.net
 port:
 path:GoodsBasic/Operate/
 query:q
 hash:simen
 */ 

首先观察以下示例的运行结果：

url:http://qiji123.kerlai.net:81/GoodsBasic/Operate/12678?q#simen scheme:http slash:// host:qiji123.kerlai.net port:81 path:GoodsBasic/Operate/12678 query:q hash:simen

在代码中，result数组包含的元素为['http://qiji123.kerlai.net:81/GoodsBasic/Operate/12678?q#simen','http', '//', 'qiji123.kerlai.net', '81', 'GoodsBasic/Operate/12678', 'q', 'simen']。

正则表达式的分组机制

若尝试将result数组中从第二个元素到最后一个元素依次拼接，得到的字符串为"http // qiji123.kerlai.net 81 GoodsBasic/Operate/12678 q simen"。与原URL相比，该字符串缺失了":?#"等连接符。造成这一现象的原因在于正则表达式中的分组概念。正则表达式包含四种分组类型：捕获型、非捕获型、向前正向匹配和向前负向匹配。此处重点介绍前两种，后两种建议读者自行查阅资料。非捕获型分组的内容不会出现在结果数组中，而由括号()包围的部分构成一个组，会占用结果数组的一个位置。反之，若正则表达式中未使用括号包裹，则匹配到的字符不会出现在exec()方法返回的数组中。正则表达式的分组即通过()括起来的部分。

1、捕获型分组：(...)

2、非捕获型分组：(?: .......)

3、向前正向匹配：(?=........)

4、向前负向匹配：(?!.........)

parse_url正则表达式详解

接下来对parse_url正则表达式进行分解，首先分析第一个分组。

1、^符号表示字符串的开始位置。

整个正则因子用于匹配协议名称，例如http。

2、(?: )表示一个非捕获型分组：即在该括号内但不在其子括号内匹配到的字符，不会放入结果数组中。

3、()表示一个捕获型分组，此括号内匹配到的字符将放入结果数组中，对应URL中的:http字符。

4、[]表示正则表达式类，代表符合中括号内任一一个字符。

7、A-Za-z表示字母A到Z以及a到z的范围。[A-Za-z]表示匹配符合字母A到Z或a到z的任一一个字符。

5、+表示匹配1次或多次。

6、?表示此组为可选匹配条件。

第二个正则因子：(\/{0,3})://

这是一个捕获型分组，\/表示需要匹配的/字符，{0,3}表示\/将被匹配0次或者1到3次之间。

([0-9.\-A-Za-z]+):qiji123.kerlai.net

这是一个捕获型分组，由一个或多个数字、"."、"\-"（转义为"-"）、字母A到Z和a到z组成。

(?::(\d+))?：81

前置部分放在非捕获型分组中将不会出现在返回数组中，\d表示匹配数字。整个因子用于匹配前置为:后面跟随一个或多个数字的情况。此分组因子为可选的。

(?:\/([^?#]*))?：GoodsBasic/Operate/12678

该分组以/开始，^在此处表示非的意思，即除?#之外的所有字符，最后一个？表示此正则因子分组可选。

(?:\?([^#]*))? ：q

该分组表示包含0个或多个非#字符。

(?:#(.*))?：simen

该分组以#开始，(.)将匹配除结束符以外的所有字符。

$表示这个字符串结束。

至此，URL的所有分组分析完毕。接下来大家可以尝试编写电话号码的正则表达式：既能匹配固定电话又能匹配手机号（这个会用到新的字符：|）。