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

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

在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,函数会将它们存储为数组形式,以便能够包含所有的值。

相关文章
|
2天前
|
存储 JSON 前端开发
JavaScript 进阶征途:解锁Function奥秘,深掘Object方法精髓
JavaScript 进阶征途:解锁Function奥秘,深掘Object方法精髓
|
14小时前
|
JavaScript
|
20小时前
|
Web App开发 JavaScript iOS开发
技术笔记:js数组定义和方法(包含ES5新增数组方法)
技术笔记:js数组定义和方法(包含ES5新增数组方法)
|
23小时前
|
JavaScript BI
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
|
23小时前
|
移动开发 JavaScript 前端开发
技术经验分享:JavaScript实现Date()——日期格式化的三种常用方法
技术经验分享:JavaScript实现Date()——日期格式化的三种常用方法
|
1天前
|
JavaScript
fastadmin js里获取后端传的参数
fastadmin js里获取后端传的参数
2 0
|
1月前
uView queryParams 对象转URL参数
uView queryParams 对象转URL参数
26 0
|
1月前
|
JavaScript
vue截取URL中的参数
vue截取URL中的参数
29 0
|
1月前
|
前端开发
[牛客网-前端大挑战QD2] 获取url参数
[牛客网-前端大挑战QD2] 获取url参数
35 0
|
22小时前
|
文字识别 算法 API
视觉智能开放平台产品使用合集之在调用接口传入的图片URL参数,文件在本地或者非上海地域OSS链接,该怎么办
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台,这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API,快速将视觉智能功能集成到自己的应用或服务中,而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。