(转)jquery.url.js 插件的使用

jQuery插件之-jQuery URL Parser

 

jQuery插件Query URL Parser用于解析URLs字符串。通过它我们可以方便地获取协议、主机、端口、查询参数、文件名、路径等等。在一些静态页面需要根据参数来调整一些内容的时候这个插件还是挺有用的。

官方下载（托管在github）：http://github.com/allmarkedup/jQuery-URL-Parser

本地下载地址：jQuery-URL-Parser

插件可以返回的数据有下面几项：

1 、来源 – URL本身

2 、协议 – 例如 HTTP，HTTPS，文件等

3 、主机 – 如 blog.xiaoningmeng.com，localhost 等

4 、端口 – 例如 80

5 、查询 – 如果它存在的话是整个查询字符串，例如item=value&item2=value2

6 、单个查询字符串参数值

7 、文件 – 该文件名，例如 index.html的

8 、锚 – 哈希（锚）值

9 、路径 – 文件的路径（如/folder/dir/index.html）

10 、相对路径- 包括查询字符串的相对路径（如/folder/dir/index.html?item=value）

11 、目录 – 目录路径（如/folder/dir/）

12 、路径的个别部分

如果需要获取上面的 1、2、3、4、7、8、10、11 项的值可以通过使用 .attr() 方法来获取。

6项可以使用 .param() 方法。

12项可以使用 .segment() 方法。

使用DEMO:

1，使用当前页面的URL（假如地址是http://blog.xiaoningmeng.com/information/about/index.html?itemID=2&user=dave）

// get the protocol
jQuery.url.attr("protocol") // returns 'http'

// get the path
jQuery.url.attr("path") // returns '/information/about/index.html'

// get the host
jQuery.url.attr("host") // returns 'blog.xiaoningmeng.com'

// get the value for the itemID query parameter
jQuery.url.param("itemID") // returns 2

// get the second segment from the url path
jQuery.url.segment(2) // returns 'about'

2，使用其他指定的URL
// set a different URL and return the anchor string
jQuery.url.setUrl("http://blog.xiaoningmeng.com/category/javascript/#footer").attr("anchor") // returns 'footer'

 

jquery.url.js 文件

// JQuery URL Parser
// Written by Mark Perkins, mark@allmarkedup.com
// License: http://unlicense.org/ (i.e. do what you want with it!)

jQuery.url = function()
{
    var segments = {};
    
    var parsed = {};
    
    /**
    * Options object. Only the URI and strictMode values can be changed via the setters below.
    */
      var options = {
    
        url : window.location, // default URI is the page in which the script is running
        
        strictMode: false, // 'loose' parsing by default
    
        key: ["source","protocol","authority","userInfo","user","password","host","port","relative","path","directory","file","query","anchor"], // keys available to query 
        
        q: {
            name: "queryKey",
            parser: /(?:^|&)([^&=]*)=?([^&]*)/g
        },
        
        parser: {
            strict: /^(?:([^:/?#]+):)?(?://((?:(([^:@]*):?([^:@]*))?@)?([^:/?#]*)(?::(d*))?))?((((?:[^?#/]*/)*)([^?#]*))(?:?([^#]*))?(?:#(.*))?)/,  //less intuitive, more accurate to the specs
            loose:  /^(?:(?![^:@]+:[^:@/]*@)([^:/?#.]+):)?(?://)?((?:(([^:@]*):?([^:@]*))?@)?([^:/?#]*)(?::(d*))?)(((/(?:[^?#](?![^?#/]*.[^?#/.]+(?:[?#]|$)))*/?)?([^?#/]*))(?:?([^#]*))?(?:#(.*))?)/ // more intuitive, fails on relative paths and deviates from specs
        }
        
    };
    
    /**
     * Deals with the parsing of the URI according to the regex above.
      * Written by Steven Levithan - see credits at top.
     */        
    var parseUri = function()
    {
        str = decodeURI( options.url );
        
        var m = options.parser[ options.strictMode ? "strict" : "loose" ].exec( str );
        var uri = {};
        var i = 14;

        while ( i-- ) {
            uri[ options.key[i] ] = m[i] || "";
        }

        uri[ options.q.name ] = {};
        uri[ options.key[12] ].replace( options.q.parser, function ( $0, $1, $2 ) {
            if ($1) {
                uri[options.q.name][$1] = $2;
            }
        });

        return uri;
    };

    /**
     * Returns the value of the passed in key from the parsed URI.
       * 
     * @param string key The key whose value is required
     */        
    var key = function( key )
    {
        if ( jQuery.isEmptyObject(parsed) )
        {
            setUp(); // if the URI has not been parsed yet then do this first...    
        } 
        if ( key == "base" )
        {
            if ( parsed.port !== null && parsed.port !== "" )
            {
                return parsed.protocol+"://"+parsed.host+":"+parsed.port+"/";    
            }
            else
            {
                return parsed.protocol+"://"+parsed.host+"/";
            }
        }
    
        return ( parsed[key] === "" ) ? null : parsed[key];
    };
    
    /**
     * Returns the value of the required query string parameter.
       * 
     * @param string item The parameter whose value is required
     */        
    var param = function( item )
    {
        if ( jQuery.isEmptyObject(parsed) )
        {
            setUp(); // if the URI has not been parsed yet then do this first...    
        }
        return ( parsed.queryKey[item] === null ) ? null : parsed.queryKey[item];
    };

    /**
     * 'Constructor' (not really!) function.
     *  Called whenever the URI changes to kick off re-parsing of the URI and splitting it up into segments. 
     */    
    var setUp = function()
    {
        parsed = parseUri();
        
        getSegments();    
    };
    
    /**
     * Splits up the body of the URI into segments (i.e. sections delimited by '/')
     */
    var getSegments = function()
    {
        var p = parsed.path;
        segments = []; // clear out segments array
        segments = parsed.path.length == 1 ? {} : ( p.charAt( p.length - 1 ) == "/" ? p.substring( 1, p.length - 1 ) : path = p.substring( 1 ) ).split("/");
    };
    
    return {
        
        /**
         * Sets the parsing mode - either strict or loose. Set to loose by default.
         *
         * @param string mode The mode to set the parser to. Anything apart from a value of 'strict' will set it to loose!
         */
        setMode : function( mode )
        {
            options.strictMode = mode == "strict" ? true : false;
            return this;
        },
        
        /**
         * Sets URI to parse if you don't want to to parse the current page's URI.
         * Calling the function with no value for newUri resets it to the current page's URI.
         *
         * @param string newUri The URI to parse.
         */        
        setUrl : function( newUri )
        {
            options.url = newUri === undefined ? window.location : newUri;
            setUp();
            return this;
        },        
        
        /**
         * Returns the value of the specified URI segment. Segments are numbered from 1 to the number of segments.
         * For example the URI http://test.com/about/company/ segment(1) would return 'about'.
         *
         * If no integer is passed into the function it returns the number of segments in the URI.
         *
         * @param int pos The position of the segment to return. Can be empty.
         */    
        segment : function( pos )
        {
            if ( jQuery.isEmptyObject(parsed) )
            {
                setUp(); // if the URI has not been parsed yet then do this first...    
            } 
            if ( pos === undefined )
            {
                return segments.length;
            }
            return ( segments[pos] === "" || segments[pos] === undefined ) ? null : segments[pos];
        },
        
        attr : key, // provides public access to private 'key' function - see above
        
        param : param // provides public access to private 'param' function - see above
        
    };
    
}();