这篇文章主要介绍“js怎么完全解析url和拼接”，在日常操作中，相信很多人在js怎么完全解析url和拼接问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”js怎么完全解析url和拼接”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
我们经常会遇到需要自己解析url地址，或者是自己拼接url，因此我们需要一个专门对url处理的js
1、理解url
url由6部分组成
例如:
https://blog.csdn.net/weixin_43236062/article/details/109065450?id=1&name=huangnan
协议：
常见的协议有两种，一种是http 一种是https 后面接://
域名/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)}`}到此，关于“js怎么完全解析url和拼接”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
