首页 > 其他分享 >实现一个函数用来解析 URL 的 querystring

实现一个函数用来解析 URL 的 querystring

时间:2023-04-03 14:34:13浏览次数:44  
标签:queryObj const URL querystring params return 解析

实现如下效果

const url = "https://xxxx.com?a=3&b=4&c=5&name=1+1=2";

// 解析后得到 qs 如下
const qs = {
  a: 3,
  b: 4,
  c: 5,
 name: '1+1=2'
};

纯碎使用 javascript 完成解析函数,而不利用浏览器 DOM 特性 API,代码如下所示,细节在注释中体现

function parse(url) {
  // 一、夹杂在 ? 与 # 之前的字符就是 qs,使用 /\?([^/?#:]+)#?/ 正则来抽取
  // 使用正则从 URL 中解析出 querystring
  // 二、通过 Optional Chain 来避免空值错误
  const queryString = url.match(/\?([^/?#:]+)#?/)?.[1];

  if (!queryString) {
    return {};
  }

  queryObj = queryString.split("&").reduce((params, block) => {
    // 三、如果未赋值,则默认为空字符串
    const [_k, _v = ""] = block.split("=");
    // 四、通过 decodeURIComponent 来转义字符,切记不可出现在最开头,以防 ?tag=test&title=1%2B1%3D2 出错
    const k = decodeURIComponent(_k);
    const v = decodeURIComponent(_v);

    if (params[k] !== undefined) {
      // 处理 key 出现多次的情况,设置为数组
      params[k] = [].concat(params[k], v);
    } else {
      params[k] = v;
    }
    return params;
  }, {});
  return queryObj;
}

更简便的方式是使用浏览器特性 API,就是下面这个

new URLSearchParams(paramsString)

我们一起来看看使用这个API,实现步骤

function parse() {
  let serach = window.location.search;
  let params = new URLSearchParams(serach), queryObj = {};
  for (let [k, v] of params.entries()) {
    if (queryObj[k] !== undefined) {
      queryObj[k] = [].concat(queryObj[k], v);
    } else {
      queryObj[k] = v;
    }
  }
  return queryObj;
}

方便一点,对吧

标签:queryObj,const,URL,querystring,params,return,解析
From: https://www.cnblogs.com/maomao93/p/17282949.html

相关文章

  • 全网最详细中英文ChatGPT-GPT-4示例文档-复杂函数快速转单行函数从0到1快速入门——官
    目录Introduce简介setting设置Prompt提示Sampleresponse回复样本APIrequest接口请求python接口请求示例node.js接口请求示例curl命令示例json格式示例其它资料下载ChatGPT是目前最先进的AI聊天机器人,它能够理解图片和文字,生成流畅和有趣的回答。如果你想跟上AI时代的潮流......
  • 详细解析Java异步线程处理队列任务工具类以及实战
    场景待入快速理解小场景描述:【一群人】来到【一个大厅】办理业务,大厅中有【多个窗口】给我们办理业务。每个人都有自己要办事情,处理过程需要消耗时间。大厅根据人群多少,开始窗口梳理。如果把“一群人”理解成一群待处理的n个【任务】,把这群人排成一个长队就形成了一个【任......
  • Mybatis配置文件解析(转载)
    流程图demo案例还是从案例开始。publicstaticvoidmain(String[]args){Stringresource="mybatis-config.xml";InputStreaminputStream=null;SqlSessionsqlSession=null;try{inputStream=Resources.getResourceAsStream(resourc......
  • 软考高项第4版教程-差异点解析来啦(第5章下)!
    第5章信息系统工程,我拆分成2篇来解析第4版教程的差异重点,上篇解析了“软件工程”和“数据工程”知识块,这次带来下篇:“系统集成”和“安全工程”知识块。“信息系统工程”文字版“系统集成”讲了4部分知识点,分别是网络集成、数据集成、软件集成和应用集成。1.系统集成4个基本原则在......
  • Thrift 格式解析
    Thrift格式解析https://www.cnblogs.com/Forever-Kenlen-Ja/p/9649724.html常用数据格式包括CSVJSONXML,这些格式有缺点:CSV没有指定数据类型,如可能将数字开头的字符串无认为数字使用文本存储会浪费空间JSONXML注重可读,提高程序员效率,但数据存储传输效率不高,尤其大数......
  • 时间日期解析配置
    @ConfigurationpublicclassLocalDateTimeConfig{/**序列化内容*LocalDateTime->String*服务端返回给客户端内容**/@BeanpublicLocalDateTimeSerializerlocalDateTimeSerializer(){returnnewLocalDateTimeSeria......
  • Flask的url_for怎么传参?url_for('方法名', key='value') 塔猫
    直接看官方例子:fromflaskimportFlask,escape,url_forapp=Flask(__name__)@app.route('/')defindex():return'index'@app.route('/login')deflogin():return'login'@app.route('/user/<username&g......
  • 提升集群吞吐量与稳定性的秘诀: Dubbo 自适应负载均衡与限流策略实现解析
    作者:刘泉禄整体介绍本文所说的“柔性服务”主要是指consumer端的负载均衡和provider端的限流两个功能。在之前的Dubbo版本中,负载均衡部分更多的考虑的是公平性原则,即consumer端尽可能平等的从provider中作出选择,在某些情况下表现并不够理想。而限流部分只提供了静态的限......
  • 提升集群吞吐量与稳定性的秘诀: Dubbo 自适应负载均衡与限流策略实现解析
    作者:刘泉禄整体介绍本文所说的“柔性服务”主要是指consumer端的负载均衡和provider端的限流两个功能。在之前的Dubbo版本中,负载均衡部分更多的考虑的是公平性原则,即consumer端尽可能平等的从provider中作出选择,在某些情况下表现并不够理想。而限流部分只提供了静态......
  • 计算机网络实验 实验5 运输层和应用层协议解析
    实验5运输层和应用层协议解析一、实验目的  本实验通过运用Wireshark对网络活动进行分析,观察TCP协议报文,分析通信时序,理解TCP的工作过程,掌握TCP工作原理与实现;学会运用Wireshark分析TCP连接管理、流量控制和拥塞控制的过程,发现TCP的性能问题。二、实验内容任务1:TCP正常......