牛客JS题(十五)参数解析器

news2024/11/23 4:34:33

注释很详细,直接上代码

涉及知识点:

  1. decodeURIComponent(URL解码函数)
  2. new URL
  3. 正则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>

博客更新不是很及时,需要看后面内容的可以看看我的gitee仓库

牛客JS题Gitee仓库

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1966244.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

光流传感器 - 从零开始认识各种传感器【第二十二期】

光流传感器|从零开始认识各种传感器 1、什么是光流传感器 光流传感器是一种用于测量物体相对于周围环境的运动的设备。它通过检测周围光线的变化来计算出物体的运动方向和速度&#xff0c;广泛应用于机器人导航、无人机飞行控制、虚拟现实等领域。 2、光流传感器是如何工作的…

java8通用启动参数

由于默认的jvm参数不够合理&#xff0c;一般使用前都建议按需调整&#xff0c;这里尝试抛砖引玉&#xff0c;给出我个人工作中总结的经验&#xff0c;欢迎大家一起讨论 服务类型 http应用dubbo应用 java版本 使用java8支持容器化的版本&#xff1a;Java 8 Update 261 (8u26…

【吊打面试官系列-Dubbo面试题】Dubbo 如何优雅停机?

大家好&#xff0c;我是锋哥。今天分享关于 【Dubbo 如何优雅停机&#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; Dubbo 如何优雅停机&#xff1f; Dubbo 是通过 JDK 的 ShutdownHook 来完成优雅停机的&#xff0c;所以如果使用 kill -9 PID 等强制关闭指令&am…

小区来了个磨刀的

昨天下午&#xff0c;小区来了个磨刀磨剪子的。 我听见了喇叭吆喝声&#xff0c;就拿着一把菜刀下去了。 磨一把刀5块钱。 在磨刀的过程中&#xff0c;这位师傅就聊他的技术如何高超&#xff0c;什么水磨法远远超过磨刀石&#xff0c;总之让人感觉找他磨刀是正确的选择。 哎…

springboot宠物用品商城系统-前端-计算机毕业设计源码74346

摘要 基于微信小程序的宠物用品商城系统是一个集商品展示、在线购物、支付结算、用户管理等功能于一体的综合性电商平台。该系统充分利用微信小程序的便捷性和用户基础&#xff0c;为宠物爱好者提供了一个方便、快捷的购物体验。 同时&#xff0c;该系统还具备完善的用户管理功…

Windows Subsystem for Linux——安装桌面版Ubuntu

大纲 安装非桌面版操作系统安装桌面软件进入默认账号更新系统安装桌面软件安装xrdp查看IP地址 远程连接参考资料 在《Windows Subsystem for Linux——安装和使用》一文中&#xff0c;我们看到WSL只能安装非桌面版的Linux。 wsl --list --online但是桌面版的Linux其实是在非桌…

如何利用AI创作PPT?

最强AI视频生成&#xff1a;小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频百万播放量https://aitools.jurilu.com/ 你要是做一张只需要交差用的PPT&#xff0c;用ChatGPT连一分钟都用不了&#xff0c;你看我画的这个流程图的黄色的箭头&#xff0…

【STM32】STM32单片机入门

个人主页~ 这是一个新的系列&#xff0c;stm32单片机系列&#xff0c;资料都是从网上找的&#xff0c;主要参考江协科技还有正点原子以及csdn博客等资料&#xff0c;以一个一点没有接触过单片机但有一点编程基础的小白视角开始stm32单片机的学习&#xff0c;希望能对也没有学过…

深度学习图像处理环境搭建

Anaconda安装 Anaconda介绍 Anaconda是一个用于科学计算和数据科学的开源发行版&#xff0c;它包含了许多流行的Python库和工具&#xff0c;旨在简化数据分析和机器学习任务的开发过程。Anaconda提供了一个集成的开发环境&#xff0c;包括Python解释器、包管理工具&#xff0…

打造安全自养号测评系统:亚马逊卖家必备的防关联技术

在搭建一个稳定的测评自养号系统过程中&#xff0c;账号的管理、底层环境、IP纯净度与维护确实是核心中的关键一环。以下几点是构建和运营高效、安全、稳定测评系统时必须重点考虑的因素&#xff1a; 1稳定的网络环境&#xff1a; 使用独立、纯净且未被标记的国外IP地址&…

【Python】趣味游戏编程练习记录

最近在阅读童晶写的《Python游戏趣味编程》&#xff0c;边学边记录吧&#xff0c;蛮有意思。 一、学习要点 1.安装游戏开发库pgzero pip install pgzero 2.导入游戏开发库及基础绘图操作 import pgzrun #导入游戏开发库 def draw(): #定义绘图函数screen.fill(white)#屏幕…

day14 Java基础——三元运算符(条件运算符)及小结

day14 Java基础——三元运算符&#xff08;条件运算符&#xff09;及小结 1.条件运算符&#xff08;偷懒&#xff09; package operator;public class Demo10 {public static void main(String[] args) {//x ? y : z//如果xtrue,则结果为y&#xff0c;否则结果为zint score …

vscode中使用 cmake 配置MSVC 编译C++代码, output输出日志存在中文乱码问题,排查

更改控制面板的时钟区域设置会导致2022版本的msvc编译不过出现bug-(无法解决问题) 通过打开setting解密搜索cmake,更改Cmake:Output Log Encoding(已解决) 乱码输出 解决乱码

15.4 zookeeper java client之Curator使用(❤❤❤❤❤)

Curator使用 1. 为什么使用Curator对比Zookeeper原生2. 集成Curator2.1 依赖引入curator-frameworkcurator-recipes2.2 `yml`配置连接信息2.3 CuratorConfig配置类2.4 业务:可重入锁和不可重入锁2.4.1 可重入锁和不可重入锁2.4.2 InterProcessMutex 可重入锁的使用2.4.3 InterP…

React——配置环境、ES6语法补充、Components

文章目录 架构设计前置知识DOM树 配置环境安装 create-react-app安装两个插件创建安装 nodejs仍然无法创建 下次需要创建新项目就使用这三行命令安装 bootstrap使用 bootstrap 包画图追求写 jsx短路原则绑定函数快捷键修改变量名箭头函数简写删除无用的文件写组件调用组件使用 …

办公必备!一键把PDF转换为PPT文件,只需这3款神器!

在当今数字化办公环境中&#xff0c;文件格式的转换已成为提高工作效率的关键因素之一。其中&#xff0c;PDF(便携式文档格式)和PPT(PowerPoint演示文稿)是两种广泛使用的文件格式。然而&#xff0c;有时我们需要将PDF文件转换为PPT格式&#xff0c;以便进行编辑或演示。 为方…

DaoCloud配置不同环境的流水线(Q)

在DaoCloud自动化部署时&#xff0c;不知道如何分别构建生产&#xff0c;测试环境镜像。 Dockfile文件里有 ARG BUILD_ENV"uat" RUN npm run build:${BUILD_ENV} 这样两行代码来区分环境打包的&#xff0c;ARG是用于指定传递给构建运行时的变量&#xff0c;可是…

windows 环境 Visual Studio 2022 新建 cmake 工程测试 cuda 代码编译

1. 参考博客&#xff1a; 1. 【CUDA】CUDA编译&#xff1a;https://blog.csdn.net/u011285477/article/details/104408296 2. 项目文件夹结构&#xff1a; c_cuda/cuda/CMakeLists.txtfoo.cufoo.cuhCMakeLists.txtmain.cpp3. 完整代码&#xff1a; 1. c_cuda/CMakeLis…

只有IP地址怎么部署HTTPS证书

只有IP地址可以申请部署SSL证书。SSL证书不仅能够通过域名进行申请&#xff0c;还可以通过IP地址进行申请和部署。在两种情况下&#xff0c;SSL证书的主要作用是确保网站或服务器与客户端之间的数据传输安全。以下是对SSL证书的相关介绍&#xff1a; 一、选择证书服务商并注册…

初普,stop,射频美容仪拆机图

初普&#xff0c;stop&#xff0c;射频美容仪拆机图