js关于url的解析和拼接

今天药忘吃喽~ 2022-09-06 13:28 217阅读 0赞

### 关于url的解析和拼接 ###

*  前言
 *  思路
 *  1、理解url
 *  2、解析url
 *   *  2.1、全量解析
     *  2.2、只取参数
 *  3、合并url

# 前言 #

我们经常会遇到需要自己解析url地址，或者是自己拼接url，因此我们需要一个专门对url处理的js

# 思路 #

# 1、理解url #

url由6部分组成

> 例如:  
> [https://blog.csdn.net/weixin\_43236062/article/details/109065450?id=1&name=huangnan ][https_blog.csdn.net_weixin_43236062_article_details_109065450_id_1_name_huangnan]

*  **协议**：
    
     *  常见的协议有两种，一种是http 一种是https 后面接://
 *  **域名/ip**：
    
     *  blog.csdn.net / 192.169.1.0 DNS服务器把域名解析成ip 
 *  **端口**
    
     *  范围0-65535 http默认80 https默认443
 *  **hash**
    
     *  hash 在url最后以\#开头的一段路径
     *  还有一种是history，history就是‘’，例子就是history
 *  **路径**
    
     *  /weixin\_43236062/article/details/109065450 也相当于文件的名称
 *  **参数**
    
     *  ?id=1&name=huangnan. 在?后面加上，由&切割，&前是键值，&后是值

综合起来就可以得出

> 协议://域名(ip):端口/hash/路径?参数

url也可以简写，正常来说除了路径，其他都可以不写，相当于相对路径。  
我们了解url以后，就可以开始解析或者拼接url了

# 2、解析url #

## 2.1、全量解析 ##

全量解析，我们可以借助a标签。  
a标签通过打印，我们会发现一些比较关键的用法：  
origin、hash、pathname这些都是我们常用的属性

const parse = (path) => { 
        let data = { 
            path:'',
            query:{ },
            origin:'',
            hash:''
        }
        var tag = window.document.createElement('a')
        tag.href = path
    
        data.origin = tag.origin
        data.hash = tag.hash
        data.path = tag.pathname
    
        let pathList = tag.search.split('?')
        //获取query
        if(pathList[1]){ 
            let queryList = pathList[1].split('&')
            queryList.map((item)=> { 
                let queryData = item.split('=')
                data.query[queryData[0]] = queryData[1]
            })
        }
    
        return data
    }

## 2.2、只取参数 ##

const parseQuery = (path) => { 
        let query = { },
        let queryList = path.split('?')
        //获取query
        if(queryList[1]){ 
            let queryDataList = queryList[1].split('&')
            queryDataList.map((item)=> { 
                let queryData = item.split('=')
                data.query[queryData[0]] = queryData[1]
            })
            return query
        }else{ 
        	return false
    	}
    }

# 3、合并url #

const build = (path, query = { }) => { 
        if (!_isObject(query)) { 
            console.error('请传入正确的query')
            return
        }
        let str = ''
        Object.keys(query).forEach(key => { 
            str += `&${ key}=${ encodeURIComponent(query[key])}`
        })
        return `${ path}?${ str.slice(1)}`
    }

[https_blog.csdn.net_weixin_43236062_article_details_109065450_id_1_name_huangnan]: https://blog.csdn.net/weixin_43236062/article/details/109065450