Node.js queryString 解析和格式化网址查询字符串工具使用

目录
  • 前言
  • querystring 的使用
  • querystring 官网提供的 API

前言

“解析 url 中的查询参数”是我们平常工作中经常遇到的问题。今天我安利一个解析和格式化网址查询字符串的实用工具：queryString，它是 Node.js v18.15.0 提供的一个模块，使用起来非常方便。

querystring 的使用

const querystring = require('node:querystring');

querystring 官网提供的 API

例如:我们需要解析如下 url 中的参数:

url： https://juejin.cn/column/7218749269896970299?name=webharry&callback=https%3A%2F%2Fgithub.com%2Fwebharry%2Ffe-interview&list%5B%5D%3Da%26list%5B%5D%3Db%26json%3D%7B%22str%22%3A%22abc%22%2C%22num%22%3A123%7D

期望输出的格式为一个对象：

 {
     name: "webharry",
     callback: "https://github.com/webharry/fe-interview",
     list: ["a","b"],
     sub: {
           str: 'abc',
           num: 123
     }
 }

没接触到 queryString 前，我们试着用代码来解决这个问题。 首先，我们对这道题目进行分析:

url 中含有的 queryString，看看有哪些坑（考）点？

  • 1.callback 参数值是一个网址，需要使用 decodeURIComponent() 解密。
  • 2.list 是一个数组，需要特殊处理。
  • 3.sub 是一个对象，对象含有两对键值对，需要特殊处理。

思考完以上问题后，我们开始动手写代码，完整代码如下:

// 1.首先使用 **`decodeURIComponent()`** 方法对 url 进行解密：
// 2.先使用 split('?') 方法获取 URL 问号后面的查询参数，再使用 ‘&' 符号分割，得到查询参数数组。
let queryStr = decodeURIComponent(url)?.split('?')[1]?.split('&')
/** 输出一个新数组
* ["name=webharry", "callback=https://github.com/webharry/fe-interview", "list[]=a", "list[]=b", "json={\"str\":\"abc\",\"num\":123}']"]
*/
// 3.依次遍历 queryStr 数组，针对每种数据类型进行处理，输出最终结果。
let obj = {}
queryStr.forEach(item => {
    let [k, v] = item.split('=')
    let arr = []
    if(k.includes('[]')) {
        k = k.replace('[]', '')
        if(!obj[k]) {
            arr.concat([v])
            v = arr.concat([v])
        }else {
            arr.push(v)
            v = arr
        }
        console.log(1, v)
    }else if (v.indexOf('{') === 0) {
        console.log(2, v)
        v = JSON.parse(v)
    }
    obj[k] = v
    console.log(3, obj)
})
console.log(obj)
// 输出结果： {name: 'webharry', callback: 'https://github.com/webharry/fe-interview', list: ['b'], json: {str: 'abc', num: 123}}

认真看代码的老铁会立马跳出来，说这个代码有个错误点，那就是数组 list 处理没有得到预期结果。没错，我们继续绞尽脑汁来改正它。

其实，要什么自行车

赞 (0)

相关推荐

  • 使用yeoman构建angular应用的方法

    使用yeoman构建angular应用的方法

    本文将介绍如何亲手来完成一个yeoman的generator,以实现快速构建最适合自己的项目. 本文将实现的generator起名为ngtimo,依照yeoman的命名规矩就叫做generator-ngtimo,是笔者这周末一晚上加一上午参考着yeoman官方给出的几个generator(generator-generator.generator-node)给强行催生出来的,目前也已经在github上托管并发布到npm. 实现效果 首先确保已经全局安装了yeoman,然后再全局安装generat

  • 详解使用yeoman打造自己的项目脚手架

    目录 引言 yeoman 介绍 准备工作 编写自己的脚手架 编写模板代码 运行测试用例 运行脚手架 发布 引言 当新建项目的时候,我们通常需要设计目录结构.配各种配置.处理打包编译,而且每次新建都要重来一遍,或把原来的项目 copy 一份再改改.那能不能自己写个模板,然后还可以支持个性化自动创建呢?今天我就来和大家一起分享如何定制一套自己的项目脚手架,提升开发效率. 这里需要引入脚手架的概念,什么是脚手架呢?脚手架如同一个项目的模板,可以帮我们快速开始项目,就像 vue-cli,提供一个终端的交

  • node.JS路径解析之PATH模块使用方法详解

    路径组成 path.dirname(p) 返回路径p所在的目录 var path = require('path'); console.log(path.dirname('/foo/bar/baz/asdf/a.txt')); // /foo/bar/baz/asdf console.log(path.dirname('/foo/bar/baz/asdf/')); // /foo/bar/baz console.log(path.dirname('C:/test/aaa')); // C:/te

  • Node.JS文件系统解析实例详解

    1.Node.js 文件系统 var fs = require("fs") 2.异步和同步 读取文件内容的函数有异步的 fs.readFile() 和同步的 fs.readFileSync(). var fs = require('fs') fs.readFile( 'a.txt','utf-8', function (err,data) { if( err ) { console.error(err) }else{ console.log( "not aynsc===>

  • 通过正则格式化url查询字符串实现代码

    看到项目里通过js数组split方法格式化查询字符串的,突发奇想为什么不能用正则呢,性能如何?于是便有了如下代码: 复制代码 代码如下: var url='www.baidu.com?a=123&b=456&c=789&e=dfsdfsdfsdfsdfsdfsdf&f=46545454545454785&g=e23232dsfvdfvdf'; /** * 格式化查询字符串(正则实现) * @param url url地址 * @return {Object} 格式化

  • Node.js实现在目录中查找某个字符串及所在文件

    Node.js实现在目录中查找某个字符串及所在文件

    需求如下: 整个目录下大概有40几M,文件无数,由于时间久了, 记不清那个字符串具体在哪个文件,于是.强大,亮瞎双眼的Node.js闪亮登场. windows下安装Node.js和安装普通软件毫无差别,装完后打开Node.js的快捷方式,或者直接cmd,你懂的. 创建findString.js 复制代码 代码如下: var path = require("path"); var fs = require("fs");   var filePath = process

  • Node.js对MongoDB数据库实现模糊查询的方法

    Node.js对MongoDB数据库实现模糊查询的方法

    前言 模糊查询是数据库的基本操作之一,实现对给定的字符串是否与指定的模式进行匹配.如果字符完全匹配,可以用=等号表示,如果部分匹配可认为是一种模糊查询.在关系型数据中,通过SQL使用like '%fens%'的语法.那么在mongodb中我们应该如何实现模糊查询的效果呢. 目录 mongodb模糊查询 nodejs通过mongoose的模糊查询 1. mongodb模糊查询 我们打开mongodb,以name文字字段进行测试. 精确查询 当{'name':'未来警察'}时,精确匹配到一条记录.

  • Node.js使用MongoDB的ObjectId作为查询条件的方法

    当往MongoDB中插入一条数据时,会自动生成ObjectId作为数据的主键. 那么如何通过ObjectId来做数据的唯一查询呢? 在MongoDB中插入一条数据 在MongoDB中插入一条如下结构的数据: { _id: 5d6a32389c825e24106624e4, title: 'GitHub 上有什么好玩的项目', content: '上个月有水友私信问我,GitHub 上有没有比较好玩的项目可以推荐?我跟他说:"有,过两天我整理一下".\n' + '\n' + '然而,一个

  • Node.js学习之查询字符串解析querystring详解

    前言 查询字符串模块提供了解析和格式化工具URL查询字符串的API,本文将详细介绍关于Node.js查询字符串解析querystring的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.querystring.parse(str[, sep[, eq[, options]]]) 这个API将URL查询字符串解析为键和值的集合 str:URL查询字符串 sep:标明字符串中用于划分键值对的符号,默认为"&" eq:用以标明查询字符串中键和值之间的符

  • Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解

    本文实例讲述了Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能.分享给大家供大家参考,具体如下: 公司要写一些为自身业务量身定制的的组件,要基于Vue,写完后扩展了一下功能,选择写图片上传是因为自己之前一直对这个功能比较迷糊,所以这次好好了解了一下.演示在网址打开后的show.gif中. 使用技术:Vue.js | node.js | express | MongoDB. github网址:https://github.com/neroneroffy/privat

  • Node.js API详解之 dgram模块用法实例分析

    本文实例讲述了Node.js API详解之 dgram模块用法.分享给大家供大家参考,具体如下: Node.js API详解之 dgram dgram模块提供了 UDP 数据包 socket 的实现. 使用以下方式引用: const dgram = require('dgram'); dgram.createSocket(options[, callback]) 说明: 创建一个 dgram.Socket 对象. 一旦创建了套接字,调用 socket.bind() 会指示套接字开始监听数据报消息

  • Node.js生成HttpStatusCode辅助类发布到npm

    作为一个好的Restfull Api不仅在于service url的语义,可读性,幂等,正交,作为http状态码也很重要,一个好的Http Status Code给使用者一个很好的响应,比如200表示正常成功,201表示创建成功,409冲突,404资源不存在等等.所以在做一个基于node.js+mongodb+angularjs的demo时发现node.js express没有提供相应的辅助类,但是本人不喜欢将201,404这类毫无语言层次语义的东西到处充斥着,所以最后决定自己写一个,但是同时本

随机推荐