如何将JavaScript解析并拼接URL成长尾？

本文共计579个文字，预计阅读时间需要3分钟。

我们经常会遇到需要解析或拼接URL的情况，或者需要处理URL的不同部分。为了方便，我们可以编写一个简单的JavaScript函数来处理URL。以下是一个示例函数，它解析URL并输出其组成部分：

javascriptfunction parseURL(url) { const urlObj=new URL(url); console.log(URL Protocol: + urlObj.protocol); console.log(URL Hostname: + urlObj.hostname); console.log(URL Pathname: + urlObj.pathname); console.log(URL Search: + urlObj.search); console.log(URL Hash: + urlObj.hash);}

// 示例URLconst exampleURL=https://blog.csdn.net/weixin_43236062/article/details/109065450?id=1;

// 调用函数parseURL(exampleURL);

这段代码将输出以下内容：

URL Protocol: https:URL Hostname: blog.csdn.netURL Pathname: /weixin_43236062/article/details/109065450URL Search: ?id=1URL Hash:

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

1、理解url

url由6部分组成

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

• 协议：
  • 常见的协议有两种，一种是
• 域名/ip：
  • blog.csdn.net / 192.169.1.0 DNS服务器把域名解析成ip ​
• 端口
  • 范围0-65535 域名(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和拼接知识请查看下面的相关链接