自己动手封装一个url参数解释器( ghostWuUrlParser.js )

本文链接：https://blog.csdn.net/iseagold/article/details/78026590

ghostWuUrlParser.js的作用是分析一段url中的查询参数，即: '?'号后面的键值对参数.

ghostWuUrlParser.js 使用说明:

ghostWuUrlParser( 'https://www.baidu.com/s?wd=ghostwu&name=ghost&age=22&sex=man&name=zhangsan&name=lisi' )

解释出来的结果是:

{wd: "ghostwu", name: Array(3), age: "22", sex: "man"}

Array(3) = [ 'ghost', 'zhangsan', 'lisi' ]

ghostWuUrlParser( 'https://www.baidu.com/s?wd=ghostwu&name=ghost&age=22&sex=man&name=zhangsan' )

解释出来的结果是:

{wd: "ghostwu", name: Array(2), age: "22", sex: "man"}

ghostWuUrlParser( 'https://www.baidu.com/s?wd=ghostwu&name=ghost&age=22&sex=man' )

解释出来的结果是:

{wd: "ghostwu", name: "ghost", age: "22", sex: "man"}

ghostWuUrlParser( 'https://www.baidu.com/s?wd=ghostwu&name=ghost&age=22&sex=man', 'wd' )

解释出来的结果是: ghostwu

只要对字符串处理函数比较熟练，基本很容易看懂

源代码与注解：

;(function( window, undefined ){
    var ghostWuUrlParser = function( url, key ){
        var res = {};
        if( typeof url === 'undefined' ) {
            throw new Error( '请输入有效的url' );
        }

        //p:查询 '?'号是否存在
        var _url = url, p = _url.search( /\?/ );
        //_url: 根据p的查询结果 把问号后面的内容赋值给_url
        ( p != -1 ) && ( _url = _url.slice( p + 1 ) );
        var q = _url.split( '&' );
        for( var i = 0, len = q.length; i < len; i++ ){
            var str = q[i],
            pos = str.search( '=' ),
            //k: 参数的键
            k = str.substring( 0, pos != -1 ? pos : str ),
            //v: 参数的值
            v = str.substring( pos != -1 ? ( pos + 1 ) : str );
            v && ( v = decodeURIComponent( v ) );
            if( res.hasOwnProperty( k ) ){
                //如果出现同名的key, 且不是数组，就把当前的值 跟之前的值 合并到一个数组
                if( !( res[k] instanceof Array ) ){
                    res[k] = [ res[k], v ];
                }else {
                    //第三次同名的key 就执行这段
                    res[k].push( v );
                }
            }else {
                //第一次不存在的时候，直接存
                k && (res[k] = v);
            }
        }
        //传递了key 就提取对应的key, 否则返回完整结果
        return key ? res[key] : res;
    }
    //暴露接口
    window.ghostWuUrlParser = ghostWuUrlParser;
})( window, undefined );