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

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 = ":/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::/GoodsBasic/Operate/?q#simen
scheme:http
slash://
host:
port:
path:GoodsBasic/Operate/
query:q
hash:simen
*/
我们先来看看结果：
代码中result数组的集合是[':81/GoodsBasic/Operate/12678?q#simen','http', '//', '', '81', 'GoodsBasic/Operate/12678', 'q',
'simen']
现在我们尝试把从第2个到最后⼀个的结果⼀个⼀个链接起来，得到的结果为："http // 81 GoodsBasic/Operate/12678 q simen" 和原来的url相⽐，缺少了":?#"等链接符。

这个是为何？说到这，我们就要引出正则表达式的⼀个概念为正则表达式的分组。

正则表达式有4种分组，分别是：捕获型、飞捕获型、向前正向匹配、向前负向匹配。

此处我重点介绍前⾯两种，后⾯两种⼤家可以⾃⾏补脑。

其中⾮捕获型的就不会在结果的数组中出现，（）括起来的为⼀个组，即会占⽤结果数组的⼀个位置。

同样如果在你的正则表达式中，没有⽤括号括起来，那么所匹配到的字符将不会出现在exec()⽅法所返回的数组中。

正则的分组是使⽤（）括起来的称为⼀个分组。

1、捕获型分组：(...)
2、⾮捕获型分组：(?: .....)
3、向前正向匹配：(?=........)
4、向前负向匹配：(?!.........)
接下来我们来分解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]+):
捕获型分组，由⼀个或多个数字，“.”，”\-“(转义成”-“)，字母A到Z和字母a到z组成
(?::(\d+))?：81
前置：放在⾮捕获型分组中将不会出现在返回数组中，\d表⽰匹配数字。

整个因⼦就是匹配前置为：后⾯跟随⼀个或多个数字。

此分组因⼦为可选的
(?:\/([^?#]*))?：GoodsBasic/Operate/12678
该分组由/开始，^在此处表⽰⾮的意思，即除?#之外的所有字符最后⼀个？表⽰此正则因⼦分组可选
(?:\?([^#]*))? ：q
该分组表⽰包含0个或多个⾮#字符
(?:#(.*))?：simen
该分组以#开始，(.)将匹配除结束符以外的所有字符。

$表⽰这个字符串结束。

到此就已经分析完url的所有分组。

接下来⼤家可以写写电话号码的正则表达式：既能匹配固定电话有能匹配⼿机号（这个会⽤到新的字符：|）字符含意
\做为转意，即通常在"\"后⾯的字符不按原来意义解释，如/b/匹配字符"b"，当b前⾯加了反斜杆后/\b/，转意为匹配⼀个单词的边界。

-或- 对正则表达式功能字符的还原，如"*"匹配它前⾯元字符0次或多次，/a*/将匹配a,aa,aaa，加了"\"后，/a\*/将只匹配"a*"。

^匹配⼀个输⼊或⼀⾏的开头，/^a/匹配"an A"，⽽不匹配"An a"
$匹配⼀个输⼊或⼀⾏的结尾，/a$/匹配"An a"，⽽不匹配"an A"
*匹配前⾯元字符0次或多次，/ba*/将匹配b,ba,baa,baaa
+匹配前⾯元字符1次或多次，/ba*/将匹配ba,baa,baaa
匹配前⾯元字符0次或1次，/ba*/将匹配b,ba
(x)匹配x保存x在名为$1...$9的变量中
x|y匹配x或y
{n}精确匹配n次
{n,}匹配n次以上
{n,m}匹配n-m次
[xyz]字符集(character set)，匹配这个集合中的任⼀⼀个字符(或元字符)
[^xyz]不匹配这个集合中的任何⼀个字符
[\b]匹配⼀个退格符
\b匹配⼀个单词的边界
\B匹配⼀个单词的⾮边界
\cX这⼉，X是⼀个控制符，/\cM/匹配Ctrl-M
\d匹配⼀个字数字符，/\d/ = /[0-9]/
\D匹配⼀个⾮字数字符，/\D/ = /[^0-9]/
\n匹配⼀个换⾏符
\r匹配⼀个回车符
\s匹配⼀个空⽩字符，包括\n,\r,\f,\t,\v等
\S匹配⼀个⾮空⽩字符，等于/[^\n\f\r\t\v]/
\t匹配⼀个制表符
\v匹配⼀个重直制表符
\w匹配⼀个可以组成单词的字符(alphanumeric，这是我的意译，含数字)，包括下划线，如[\w]匹配"$5.98"中的5，等于[a-zA-Z0-9]
\W匹配⼀个不可以组成单词的字符，如[\W]匹配"$5.98"中的$，等于[^a-zA-Z0-9]。

⽤re = new RegExp("pattern",["flags"]) 的⽅式⽐较好 pattern : 正则表达式 flags: g （全⽂查找出现的所有 pattern） i （忽略⼤⼩写） m （多⾏查找）
vaScript动态正则表达式问题
请问正则表达式可以动态⽣成吗? 例如JavaScript中: var str = "strTemp"; 要⽣成: var re = /strTemp/; 如果是字符连接: var re = "/" + str + "/"即可
但是要⽣成表达式,可以实现吗?怎样实现?。