js原生方法,获取url上面所有参数,并返回一个对象

简介: JavaScript函数`getUrlParameters`用于从URL中提取所有参数并返回一个键值对对象。它接收URL,分割查询字符串,解码参数对,并存储在对象中。重复参数键会被存储为数组。

2000元阿里云代金券免费领取,2核4G云服务器仅664元/3年,新老用户都有优惠,立即抢购>>>


阿里云采购季(云主机223元/3年)活动入口:请点击进入>>>,


阿里云学生服务器(9.5元/月)购买入口:请点击进入>>>,

在JavaScript中,可以使用以下原生方法获取URL上的所有参数,并返回一个包含参数键值对的对象:

function getUrlParameters(url) {
   
  const params = {
   };
  const queryString = url.split('?')[1];

  if (queryString) {
   
    const paramPairs = queryString.split('&');

    for (let i = 0; i < paramPairs.length; i++) {
   
      const pair = paramPairs[i].split('=');
      const key = decodeURIComponent(pair[0]);
      const value = decodeURIComponent(pair[1] || '');

      if (params[key]) {
   
        if (Array.isArray(params[key])) {
   
          params[key].push(value);
        } else {
   
          params[key] = [params[key], value];
        }
      } else {
   
        params[key] = value;
      }
    }
  }

  return params;
}

// 示例用法
const url = 'https://example.com/page?name=John&age=25&interests=programming&interests=music';
const parameters = getUrlParameters(url);
console.log(parameters);

上述代码定义了一个名为getUrlParameters的函数,接受一个URL作为参数。函数首先通过将URL使用问号?分割,获取查询字符串部分。然后,它将查询字符串使用&分割成参数对,并对每个参数对进行解码。最后,将解码后的参数键值对存储在params对象中,并返回该对象。

示例用法中的URL是一个示例,你可以替换为你自己的URL进行测试。函数将返回一个包含参数键值对的对象,例如:

{
  name: "John",
  age: "25",
  interests: ["programming", "music"]
}

注意,如果URL中有重复的参数键,例如interests,函数会将它们存储为数组形式,以便能够包含所有的值。

相关文章
|
1天前
|
前端开发 JavaScript 开发者
JavaScript中的异步编程方法总结
在JavaScript开发中,处理异步操作是非常常见的情况。本文将总结JavaScript中常用的异步编程方法,包括Callback、Promise、Async/Await等,分析其优缺点,并提供使用建议。
|
3天前
|
缓存 前端开发 JavaScript
React和Next.js开发常见的HTTP请求方法
React和Next.js开发常见的HTTP请求方法
6 0
|
3天前
|
JSON 前端开发 JavaScript
前端 JS 经典:JSON 对象
前端 JS 经典:JSON 对象
8 0
|
3天前
|
前端开发 JavaScript
前端 JS 经典:Math 常用方法汇总
前端 JS 经典:Math 常用方法汇总
6 0
|
3天前
|
移动开发 前端开发 JavaScript
Vue2 系列:vue.config.js 参数配置
Vue2 系列:vue.config.js 参数配置
11 2
|
3天前
|
前端开发 JavaScript
前端 js 经典:Object 常用原生方法
前端 js 经典:Object 常用原生方法
10 2
|
3天前
|
前端开发 JavaScript
前端 js 经典:原型对象和原型链
前端 js 经典:原型对象和原型链
12 1
|
3天前
|
前端开发 JavaScript
前端 js 经典:array 原生方法
前端 js 经典:array 原生方法
7 1
|
3天前
|
JavaScript 前端开发 流计算
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
|
3天前
|
JSON JavaScript 前端开发
js将json字符串还原为json对象
【5月更文挑战第14天】js将json字符串还原为json对象
26 1
http://www.vxiaotou.com