解析复杂URL

最新推荐文章于 2022-04-01 16:35:20 发布

咩咩羊10

最新推荐文章于 2022-04-01 16:35:20 发布

阅读量505

点赞数

分类专栏：前端面试——代码题集锦 web前端文章标签： javascript js

本文链接：https://blog.csdn.net/m0_38073011/article/details/112320785

版权

本文探讨了在JavaScript中解析复杂URL时遇到的挑战，包括解码特殊符号、避免使用'?'作为参数分隔符、处理多余前缀以及正确分割包含等号的键值对。提供了对应的解决方案和注意事项。

摘要由CSDN通过智能技术生成

Question

输入：

例如：url = https://www.youzan.com?name=coder&age=20&callback=https%3A%2F%2Fyouzan.com%3Fname%3Dtest&list[]=a&json=%7B%22str%22%3A%22abc%22,%22num%22%3A123%7D

输出：

{
   
  name: "coder",
  age: "20",
  callback: "https://youzan.com?name=test", 
  list: ["a"],
  json: {
   
      str: 'abc',
      num: 123
   }
}

key factors analysis【看似容易，还是遇到几个坑】

1. url中部分特殊符号乱码，需要进行解码处理。

这里用到JavaScript自带的decodeURIComponent(url)方法进行解码,也可以自写decode函数。

[’%3A’ => ‘:’], [’%2F%2F’ => ‘//’] [’%3F’ => ‘?’] [’%3D’ => ‘=’]

//url = https://www.youzan.com?name=coder&age=20&callback=https%3A%2F%2Fyouzan.com%3Fname%3Dtest&list[]=a&json=%7B%22str%22%3A%22abc%22,%22num%22%3A123%7D
url = decodeURIComponent(url);
//url = https://www.youzan.com?name=coder&age=20&callback=https://youzan.com?name=test&list[]=a&json={"str":"abc","num":123}