Javascript解析url中的查询参数

GISer_CV攻城狮

已于 2022-01-20 16:32:23 修改

阅读量609

点赞数

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

于 2021-03-25 09:57:52 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44011559/article/details/115197217

版权

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍两种从URL中解析参数的方法。第一种使用正则表达式匹配特定参数名对应的值；第二种利用现代浏览器提供的URLSearchParams接口，更简洁地获取参数。这两种方法适用于前端开发中对URL传递的数据进行快速解析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//获取url参数，并解码。
var txt = decodeURIComponent(window.location.search);
在这里插入图片描述

^匹配字符串开头,&就是&字符 (^|&)匹配字符串开头或者&字符,

”[]”代表的是一个字符集,”^”在字符集中才是反向字符集,不在字符集表示限定开头。

“$”匹配输入字符串的结尾位置。

“|”指明两项之间的一个选择。

//字符串开头或者&符号开头，加上name变量的内容，再加上任意个不含&的字符，以&或字符串结尾
//那么下面的正则表达式匹配的内容就是：&name=
var reg = new RegExp("(^|&)" + name + “=([^&]*)(&|$)”);
//匹配url参数结果
var analyArr = txt.substr(1).match(reg);

function getQueryParameter(name){
       var txt = decodeURIComponent(window.location.search);
       var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
       var analyArr = txt.substr(1).match(reg); //去掉？号，匹配
       if(analyArr!=null)
       {
           return analyArr[2];
       }
       else
       {
           return "解析失败！";
       }
}

方案二

function getQuery(id){
      let urlSearchParams = new URLSearchParams(window.location.search);
      let params = Object.fromEntries(urlSearchParams.entries());
      return params[id];
 }