js解析url参数,生成一个参数对象

234 阅读1分钟

image.png

<!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>
      /**
       * 解析参数,生成一个参数对象
       * @param url
       * @example (https: //zhidao.baidu.com/question/1768422895052400180.html?fr=iks&word=slice&ie=gbk)
       * =>    {fr: 'iks', word: 'slice', ie: 'gbk', tom: '我'}
       */

      var url =
        // "https: //zhidao.baidu.com/question/1768422895052400180.html?fr=iks&word=slice&ie=gbk";
        "https: //zhidao.baidu.com/question/1768422895052400180.html?fr=iks&word=slice&ie=gbk&tom=%E6%88%91";

      const parseUrl = (url) => {
        const { log } = console;
        const urlArr = url.split("?");
        log(urlArr); //['https: //zhidao.baidu.com/question/1768422895052400180.html', 'fr=iks&word=slice&ie=gbk']
        const [, seachStr] = urlArr;
        log(seachStr); //fr=iks&word=slice&ie=gbk

        // const strArr = seachStr.split("&");
        // log(strArr); // ['fr=iks', 'word=slice', 'ie=gbk']

        let obj = {};
        for (const str of seachStr.split("&")) {
          // const arr = str.split("=");
          // console.log(arr);
          // ['fr', 'iks']
          // ['word', 'slice']
          // ['ie', 'gbk']
          const [name, value] = str.split("=");
          // obj[name] = value;
          // decodeURIComponent 处理汉字
          obj[name] = decodeURIComponent(value);
        }

        log(obj); //{fr: 'iks', word: 'slice', ie: 'gbk'}
        return obj;
      };

      parseUrl(url);
    </script>
  </body>
</html>