牛客JS题（十五）参数解析器

news2024/11/15 4:58:53

注释很详细，直接上代码

涉及知识点：

decodeURIComponent(URL解码函数)
new URL
正则exec

题干：
在这里插入图片描述

我的答案

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <script>
      /**
       * 这里我提供三种方法：
       * 1. 字符串操作写法(写本题推荐)
       * 2. URL格式化写法(开发推荐)
       * 3. 正则表达式写法(挑战自我推荐)
       *
       * 介绍一下新面孔：decodeURIComponent
       * 这个函数的作用是解码URL编码的字符串，例如%20会被解码为空格，
       * 用于处理浏览器的URL编码
       */
      //第一种--字符串操作写法-----------------------------------------------------------------------------
      const _getParams = (url) => {
        // 补全代码
        let queryString = url.split("?")[1]; // 获取 URL 中的查询参数部分
        queryString = queryString.split("#")[0]; //去除末尾锚点部分
        let params = {};
        if (queryString) {
          let pairs = queryString.split("&"); // 分割参数对
          pairs.forEach((pair) => {
            let [key, value] = pair.split("="); // 数组解构
            params[decodeURIComponent(key)] = decodeURIComponent(value || ""); // 解码并存入对象
          });
        }
        return params;
      };

      console.log(_getParams("https://nowcoder.com/online?id=&salas=1000#123"));

      /**
       * 这个方法很简单，直接格式化调用然后欻欻两下就好了✅
       */
      //第二种--URL格式化写法-----------------------------------------------------------------------------
      const _getParams1 = (url) => {
        // 补全代码
        let params = {};
        let urlObj = new URL(url);
        let { searchParams } = urlObj;
        searchParams.forEach((value, key) => {
          params[key] = value;
        });
        return params;
      };

      console.log(_getParams1("https://nowcoder.com/online?id=&salas=1000#123"));

      /**
       * 这种方法费点劲，但锻炼思维，主打一个没苦硬吃🤣🤣🤣
       * 这里介绍一下match和exec的区别：定义什么的我们不谈，说白了就是前者只给结果，后者可以体现过程与细节
       * 这里需要注意一点，exec的匹配如果表达式是非全局的则每次从头开始遍历也就是只会返回第一个匹配结果，
       * 全局匹配则每调用一次匹配就从上次匹配的位置开始，结合使用循环遍历可以实现返回所有匹配结果
       * 也正是因为这个特性可以做到去掉一个字母让网页瞬间卡死，比如我们这个例子去掉g则每次都匹配到第一个，永远跳不出循环
       *
       * 这里解析一下这个正则表达式：
       * [?&]匹配这两个字符中的一个，eg.?id=&salas=1000,第一个会以?开头，后面的会以&开头
       * ([^=#]+)小括号是捕获，匹配一个或多个字符非=号和#号的字符，没有value至少得有value吧，所以这里是+而不是*
       * [=]*匹配任意个=，因为确实可能没有=
       * ([^&#]*)小括号是捕获，匹配一个或多个字符非#号和&号的字符，value是可能没有的，所以这里是*而不是+
       */
      //第三种--正则表达式写法-----------------------------------------------------------------------------
      const _getParams2=(url)=> {
        let params = {};
        const regex = /[?&]([^=#]+)[=]*([^&#]*)/g;
        let match;
        while ((match = regex.exec(url))) {
          let key = decodeURIComponent(match[1]);
          let value = decodeURIComponent(match[2]);
          params[key] = value;
        }

        return params;
      }

      // 示例用法
      const url = "https://blog.csdn.net/m0_73756108?type=blog&abc#123";
      const parsedParams = _getParams2(url);
      console.log(parsedParams);
    </script>
  </body>
</html>