猫猫说了算
理解是偶然,误解是常态。

前端解析query字符串的两种方法

远浅发表于: 2019-11-01 15:25分类: 技术

获取地址栏参数是前端常常要使用的操作,现在web开发基本不需要自己使用js去获取解析,框架都给你封装好了这种常用操作,裸写页面的机会也微乎其微。

先复习一下各大web框架获取地址参数的API吧。

  • Vue-Router:$route.query.xxx
  • React-Router: this.props.location.query.xxx
  • Express: request.query.xxx
  • Koa-Router: ctx.query.xxx
  • Egg.js: ctx.query.xxx

可以看出各家的API大致相似,都是从一个query对象上面取对应的值。

那么这个query到底是怎么来的呢。

很简单。

解析querystring字符串来的。

那怎样解析 querystring 呢?

在nodejs中提供了 querystring 的内置包来解析。

const qs = require("querystring");
qs.parse("?xxx=yyy");

同样是js,nodejs怎么就那么方便!浏览器中是否有API用于处理解析呢?

答案是有的。

URLSearchParams

使用方法如下

解析querystring字符串

const query = new URLSearchParams("xxx=yyy")

获取指定参数的数值

const v = query.get("xxx")

正则表达式

replace接收一个函数作为参数

const Qparse = str =>{const q ={};str.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);return q;}
赠人玫瑰, 手有余香。🌹
打赏
特别鸣谢
感谢以下用户对本文的支持与鼓励
加载打赏用户中
发表评论
文章评论
暂无任何评论,快去发表吧~