js关于url的解析和拼接

时间：2025-04-07 11:14:47

关于url的解析和拼接

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

前言

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

思路

1、理解url

url由6部分组成

例如:
/weixin_43236062/article/details/109065450?id=1&name=huangnan ​

  • 协议：
    • 常见的协议有两种，一种是http 一种是https 后面接://
  • 域名/ip：
    • / 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)}`
}

相关文章