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

相关文章
|
1天前
|
JavaScript API
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
8 1
|
3天前
|
JavaScript 前端开发
JavaScript中exec()方法详解
在这个示例中,exec()方法会找到两个匹配项,并打印出它们在字符串中的位置。
7 1
|
2天前
|
JavaScript
JS数组操作---删除,arr.pop()方法从数组中删除最后一个元素,并返回该元素的值,arr.shift() 删除第一个值,arr.splice()方法,删除指定元素,arr.splice,从第一
JS数组操作---删除,arr.pop()方法从数组中删除最后一个元素,并返回该元素的值,arr.shift() 删除第一个值,arr.splice()方法,删除指定元素,arr.splice,从第一
|
2天前
|
JavaScript
Js,定义数组的方法,let 数组名 = [数据1,数据2,........,数据n],取值方法,数组名[x],arr[0],let sum sum = sum + arr[0],求和的写法,平均值
Js,定义数组的方法,let 数组名 = [数据1,数据2,........,数据n],取值方法,数组名[x],arr[0],let sum sum = sum + arr[0],求和的写法,平均值
|
3天前
|
JavaScript
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
9 0
|
JavaScript 前端开发
JavaScript深入之参数按值传递
JavaScript深入系列第九篇,除了按值传递、引用传递,还有第三种传递方式 —— 按共享传递
136 0
JavaScript深入之参数按值传递
|
JavaScript 前端开发
JavaScript深入之参数按值传递
在《JavaScript高级程序设计》第三版 4.1.3,讲到传递参数: ECMAScript中所有函数的参数都是按值传递的。 什么是按值传递呢? 也就是说,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样。
1116 0
|
1天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的个人健康管理系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的个人健康管理系统小程序附带文章源码部署视频讲解等
10 2
|
1天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的高校宿舍信息管理系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的高校宿舍信息管理系统小程序附带文章源码部署视频讲解等
8 1
|
1天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的电影交流平台小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的电影交流平台小程序附带文章源码部署视频讲解等
9 1