如何实现JavaScript对URL的完全解析与动态拼接？

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

我们经常会遇到需要解析URL地址或拼接URL的情况，为此，我们需要一个专门处理URL的JS脚本。以下是一个示例脚本，用于解析URL并展示其组成部分：

javascript// 解析URL并展示其组成部分function parseURL(url) { const parser=document.createElement('a'); parser.href=url;

const result={ protocol: parser.protocol, hostname: parser.hostname, pathname: parser.pathname, search: parser.search, hash: parser.hash, host: parser.host, port: parser.port };

return result;}

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

// 调用函数并输出结果const urlParts=parseURL(exampleURL);console.log(urlParts);

我们经常会遇到需要自己解析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和拼接知识请查看下面的相关链接