总结获取url中查询参数的两种方式

通过正则表达式获取单个参数

url中的所有查询参数可以通过 window.location.search 字段获取,以字符串的形式返回。并有固定的格式 ?param1=value1&param2=value2···,所以可以正则表达式匹配。

分析下需要匹配的格式:

  • param=value, 其中需要获取的是value部分,但是也需要 param= 参与匹配,但是不能参与返回结果,这里有前后查找的问题
  • ?param=value&param=value 都可能存在,参数名称紧跟在?&之后;还要注意的是,要区分 emalimail 这种名称,/mail/既能匹配到email又能匹配mail,所以要给参数名称加一个边界,名称的上一个字符要是一个非单词(\W)的字符,这样就可以解决这两个问题
  • value后可能是空,也可能是下一组参数(以&分割),所以value的值要匹配到[^&]为止
  • 由于参数名称是变化的,所以需要用字符串的形式来生成正则表达式

前后查找和边界的介绍可以细看MDN中的详细介绍。

搞定正则之后,使用string的match方法,就能直接获取到对应的参数值

function getUrlParamsByName(name) {
// \b 边界
// ?<= 向后匹配
// 字符串转成正则表达式,其中的'\b'类型的特殊字符要多加一个'\'
let reg = new RegExp(`(?<=\\b${name}=)[^&]*`),
str = location.search || '',
target = str.match(reg); if(target) {
return target[0]
} return;
}

解析所有参数,以对象返回

上一个方法是获取单个的参数值,此方法是为了解析出所有的参数

利用string的一些工具函数取值,注意一些异常场景的判断

function getUrlParams() {
let obj = {}; if (!window) {
return;
} let str = window.location.search || ''; if (str && str.slice(1)) {
// 去掉 ? ,然后以 & 分割
let queryArray = str.slice(1).split('&');
queryArray.map((query) => {
// param=value 以 = 分割
let temp = query.split('=');
if(temp.length > 1) {
// 收集参数
obj[temp[0]] = temp[1];
}
})
} return obj;
}

总结

正则表达式的方式更加灵活便捷啊,开始用的时候不习惯,后来觉得真香!

用正则表达式获取URL中的查询参数的更多相关文章

  1. C# 获取url中的查询字符串参数

    /// <summary> /// 获取url中的查询字符串参数 /// </summary> public static NameValueCollection Extrac ...

  2. 以NameValueCollection 修改URL中的查询参数

    以NameValueCollection 修改URL中的查询参数 本文参考于:http://www.c-sharpcorner.com/Blogs/9421/add-remove-or-modify- ...

  3. 获取request中的查询参数

    //获取request中的查询参数 public static Map<String, Object> getRequestParamsByMap(HttpServletRequest r ...

  4. 【本周面试题】第1周 - 获取URL中的查询字符串参数、get和post的区别

    [此系列优先解决自己经历的面试题] 2018.11.16 面试题一:你如何获取浏览器URL中查询字符串中的参数? 题目代码: 测试地址为 https://www.sogou.com/tx?query= ...

  5. 通过正则表达式获取url中参数

    url: http://xxxx.com?name=魅力&id=123 js中: var name = getUrlParam("name"); /*通过正则获取url中的 ...

  6. JS获取Url中传入的参数

    一:后台获取,前台调用 后台: object value= Request.QueryString[key]; 前台js: $(function(){ var value="<%=va ...

  7. js获取url中的中文参数出现乱码

    解决方法 function getQueryString(key){ var reg = new RegExp("(^|&)"+key+"=([^&]*) ...

  8. JS获取url中的指定参数

    function GetRequest() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new O ...

  9. node.js获取url中的各个参数

    实例代码test.js var http=require('http'); var url=require('url'); var querystring=require('querystring') ...

随机推荐

  1. Java学习笔记之基础语法(顺序,条件,循环语句)

    顺序结构:自上而下 条件分支选择结构: if条件语句   1,一旦某一个分支确定执行以后,其他分支就不会执行.if后面的条件必须是boolean类型   2,if  后面如果不加大括号,默认相邻的下一 ...

  2. VPS虚拟专用服务器

    目录   0x00 VPS服务器概述 0x01 VPS工作原理 0x02 VPS用途 0x03 VPS优势 0x04 VPS特点 0x00 VPS服务器概述 VPS服务器(虚拟专用服务器)(" ...

  3. pytest5-使用conftest.py实现多文件共享fixture

    一个测试工程下是可以有多个conftest.py的文件,一般在工程根目录放一个conftest.py起到全局作用.在不同的测试子目录也可以放conftest.py,作用范围只在该层级以及以下目录生效. ...

  4. python中eval的使用

    eval函数就是实现str与list.dict.tuple之间的转化栗子: a = "[[1,2], [3,4], [5,6], [7,8], [9,0]]" aa = eval( ...

  5. 定制的print()输出格式

    #定制print时的显示内容 #烤地瓜案例:主要显示格式digua("cd1","cd2","cd3""),而不是就直接在一个列表 ...

  6. 8.Nginx基本概述

    io网络模型介绍 1.介绍Nginx Nginx是一个高性能的HTTP和反向代理web服务器 2.常见的Web服务器 httpd Nginx Tengine OpenResty 3.介绍Nginx应用 ...

  7. IaaS基础平台

    第一部分:IaaS云计算基础架构平台 服务器:先电 任务一.IaaS云平台搭建 基础环境: 1.使用命令行方式设置主机名,防火墙以及 SELinux 设置如下: (1)设置控制节点主机名 contro ...

  8. NOMP矿池搭建

    本文将以dash(x11)和Raven(x16rv2)为例子来说明多算法矿池的搭建过程. 1 环境准备 1.1 准备Ubuntu 准备虚拟机或物理机,操作系统为Ubuntu 16.04 1.2 安装必 ...

  9. 在Mac OSX上运行Windows应用程序

    在Mac OSX中,借助wine,不需要安装虚拟机也可以运行Window应用程序. wine是一个在Linux和UNIX之上的,WIndows3.x和Windows APIs的实现.是运用API转换技 ...

  10. tensorflow制作tfrecord格式数据

    tf.Example msg tensorflow提供了一种统一的格式.tfrecord来存储图像数据.用的是自家的google protobuf.就是把图像数据序列化成自定义格式的二进制数据. To ...