截取url中的参数并转化为对象

最新推荐文章于 2023-02-22 13:54:00 发布

你真的快乐吗

最新推荐文章于 2023-02-22 13:54:00 发布

阅读量604

点赞数 3

分类专栏： JS 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_42840755/article/details/124744338

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

截取url中的参数并转化为对象

有这样一个字符串"http://www.baidu.com?key=1&key=1&key=3&key=4&name=test1&name=test2&name=test3&c#&city=%E6%9D%AD%E5%B7%9E&city=%E5%8C%97%E4%BA%AC",

要求转化成 {“key”:[1,1,3,4],“name”:[‘test1’,‘test2’,‘test3’],“c”:’ ',“city”:[‘杭州’,‘北京’]}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function getUrlDataFN(urlStr) {
        // 定义一个空对象以储存数据
        const urlObj = {}
        // 检查url中是否携带数据
        if (urlStr.indexOf("?") === -1) return null
        // 找到 '?' 对应的下标
        const index = urlStr.indexOf("?") // index = 20
        // 截取 '?' 后的内容
        const dataStr = urlStr.substr(index + 1) // key=1&name=test1&name=test2&c#&city=%E6%9D%AD%E5%B7%9E
        // 通过 '&' 将字符串分割成数组
        const dataArr = dataStr.split("&") // ['key=1', 'name=test1', 'name=test2', 'c#', 'city=%E6%9D%AD%E5%B7%9E']
        // 遍历字符串分割后的数组
        dataArr.forEach((str) => {
          // 判断数组内的字符串是否有 '='
          if (str.indexOf("=") === -1) {
            // 如没有 '=' , 则将此字符串作为对象内键值对的键, 键值对的值为 ''
            urlObj[str] = "" // { c: '' }
          } else {
            // 如果有 '='
            // 通过 '=' 将此字符串截取成两段字符串（不推荐使用 split 分割, 因为数据中可能携带多个 '=' ）
            const innerArrIndex = str.indexOf("=")
            const key = str.substring(0, innerArrIndex)
            const value = str.substr(innerArrIndex + 1)
            // Js判断数组或对象中的key是否存在
            if (!urlObj.hasOwnProperty(key)) {
              // 以截取后的两段字符串作为对象的键值对  decodeURIComponent将uri格式转换为汉字
              urlObj[key] = decodeURIComponent(value) // {a: '1', b: '2', c: '', d: 'xxx'}
            } else {
              var oldObj = urlObj[key]
              // 判断是否为数组
              if (!(oldObj instanceof Array)) {
                // 不是转换为数组
                oldObj = [urlObj[key]]
              }
              oldObj.push(decodeURIComponent(value))
              urlObj[key] = oldObj
            }
          }
        })
        // 返回对象
        return urlObj
      }
      // console.log(escape("北京"))
      // encodeURIComponent()将汉字转化为utf-8的格式的uri
      console.log(encodeURIComponent("北京"))

      let url =
        "http://www.baidu.com?key=1&key=1&key=3&key=4&name=test1&name=test2&name=test3&c#&city=%E6%9D%AD%E5%B7%9E&city=%E5%8C%97%E4%BA%AC"
      let result = getUrlDataFN(url)
      console.log(result)
    </script>
  </body>
</html>

转化结果如图所示
在这里插入图片描述

你真的快乐吗

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
截取url中的参数并转化为对象

截取url中的参数并转化为对象有这样一个字符串"http://www.baidu.com?key=1&key=1&key=3&key=4&name=test1&name=test2&name=test3&c#&city=%E6%9D%AD%E5%B7%9E&city=%E5%8C%97%E4%BA%AC",要求转化成 {“key”:[1,1,3,4],“name”:[‘test1’,‘test2’,‘test3’],“c”:’ ',
复制链接

扫一扫