JavaScript正则表达式解析URL的技巧讲义.doc

JavaScript正则表达式解析URL的技巧 正则表达式是一个描述字符模式的对象。 首先，此片文章并不是直接告诉你，url的正则表达式是什么，以及怎么使用这个正则表达式去解析一个URL地址，相信这种问题在网络上已经能找到很多。本文的宗旨在于教你如何理解URL的正则表达式，以达到理解正则表达式，以及能够在日后的工作中写出相对简单的正则。言归正传，先看看一下的例子： ? 1 var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/; ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 var parse_url = /^(?:([A-Za-z]+):)?(\/{,})([-.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/; var url = #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 */ 我们先来看看结果：scheme:httpslash://host:port:81path:GoodsBasic/Operate/12678query:qhash: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个或多个非#字符 (?:#(.*))?：sime