用 Javascript 解析链接(URL)是一个常见的需求,本文介绍了一个非常健全的用 Javascript 写的链接(URL)解析类,他可以准确获取一个完整的 URL 中每个部分的内容,包括协议、URL中包含的用户名和密码、主机名、端口、路径名、参数、锚点(Fragment Anchor)等信息。
其实他的方法就是常见的正则匹配,但是整个实现写的很精巧,非常值得 javascript 新手研究。
一个非常健全的 Javascript 链接(URL)解析类 – 示例
<script type="text/javascript"> // 说明:一个非常健全的 Javascript 链接(URL)解析类 // 整理:http://www.CodeBit.cn /** * @projectDescription Poly9's polyvalent URLParser class * * @author Denis Laprise - denis@poly9.com - http://poly9.com * @version 0.1 * @namespace Poly9 * * See the unit test file for more examples. * URLParser is freely distributable under the terms of an MIT-style license. */ if (typeof Poly9 == 'undefined') { var Poly9 = {}; } /** * Creates an URLParser instance * * @classDescription Creates an URLParser instance * @return {Object} return an URLParser object * @param {String} url The url to parse * @constructor * @exception {String} Throws an exception if the specified url is invalid */ Poly9.URLParser = function(url) { this._fields = { 'Username' : 4, 'Password' : 5, 'Port' : 7, 'Protocol' : 2, 'Host' : 6, 'Pathname' : 8, 'URL' : 0, 'Querystring' : 9, 'Fragment' : 10 }; this._values = {}; this._regex = null; this.version = 0.1; this._regex = /^((w+)://)?((w+):?(w+)?@)?([^/?:]+):?(d+)?(/?[^?#]+)???([^#]+)?#?(w*)/; for(var f in this._fields) { this['get' + f] = this._makeGetter(f); } if (typeof url != 'undefined') { this._parse(url); } } /** * @method * @param {String} url The url to parse * @exception {String} Throws an exception if the specified url is invalid */ Poly9.URLParser.prototype.setURL = function(url) { this._parse(url); } Poly9.URLParser.prototype._initValues = function() { for(var f in this._fields) { this._values[f] = ''; } } Poly9.URLParser.prototype._parse = function(url) { this._initValues(); var r = this._regex.exec(url); if (!r) throw "DPURLParser::_parse -> Invalid URL"; for(var f in this._fields) if (typeof r[this._fields[f]] != 'undefined') { this._values[f] = r[this._fields[f]]; } } Poly9.URLParser.prototype._makeGetter = function(field) { return function() { return this._values[field]; } } </script>
示例代码:
<script type="text/javascript"> var url = 'http://user:password@www.codebit.cn:9901/pub/article.php?offset=10&perpage=10#fragment'; var p = new Poly9.URLParser(url); document.write("<strong>URL:</strong> " + url + "<br /><br />"); document.write("解析结果如下:<br /><br />"); document.write("<strong>Protocol:</strong> " + p.getProtocol() + "<br />"); document.write("<strong>Username:</strong> " + p.getUsername() + "<br />"); document.write("<strong>Password:</strong> " + p.getPassword() + "<br />"); document.write("<strong>Host:</strong> " + p.getHost() + "<br />"); document.write("<strong>Port:</strong> " + p.getPort() + "<br />"); document.write("<strong>Pathname:</strong> " + p.getPathname() + "<br />"); document.write("<strong>Query String:</strong> " + p.getQuerystring() + "<br />"); document.write("<strong>Fragment:</strong> " + p.getFragment() + "<br />"); </script>