一行JS代码获取页面URL参数

一行代码即可获取页面 URL 参数并转为对象

可以使用浏览器内置的 URLSearchParams 结合 Object.fromEntries 实现，一行代码即可获取页面 URL 参数并转为对象：

const params = Object.fromEntries(new URLSearchParams(window.location.search));

解析：

window.location.search 获取 URL 中 ? 及后面的参数部分（如 ?name=test&age=18）
new URLSearchParams(…) 构建参数解析对象，自动处理编码和解码
Object.fromEntries(…) 将参数解析对象转为普通 JavaScript 对象

示例：

若当前 URL 为 https://example.com?name=张三&age=20&active=true，则 params 结果为：

{ name: "张三", age: "20", active: "true" }

注意：参数值会以字符串形式存储，若需要数字 / 布尔值等类型需自行转换。

一行JS代码获取页面URL参数

健壮的获取 URL 参数的方法

以下是一个依赖 URLSearchParams 和 Object.fromEntries 的通用 URL 参数获取方法，利用现代 API 的简洁性，同时支持多值参数、自定义 URL 解析和自动编码解码，适用于支持这两个 API 的现代浏览器（Chrome 54+、Firefox 49+、Edge 79+ 等）：

function getUrlParams(url) {
  // 1. 确定目标 URL，创建 URL 对象
  const targetUrl = url || window.location.href;
  const urlObj = new URL(targetUrl);

  // 2. 分别提取「顶层参数」和「哈希后参数」
  // - 顶层参数：URL 中 ? 后的部分（如 ?from=toutiao_pc）
  const topParamStr = urlObj.search.slice(1); // 去掉开头的 ?
  // - 哈希后参数：# 后路径中的 ? 部分（如 #/path?id=1）
  const hashParamStr = urlObj.hash.split('?')[1] || '';

  // 3. 合并两种参数（用 & 连接，避免空字符串干扰）
  const allParamStr = [topParamStr, hashParamStr].filter(Boolean).join('&');

  // 4. 解析合并后的参数，处理多值情况
  const searchParams = new URLSearchParams(allParamStr);
  const params = {};
  for (const key of searchParams.keys()) {
    const values = searchParams.getAll(key);
    params[key] = values.length > 1 ? values : values[0];
  }
  return params;
}

// 测试你提供的头条 URL
const toutiaoUrl = 'https://mp.toutiao.com/profile_v4/graphic/publish?from=toutiao_pc';
const params = getUrlParams(toutiaoUrl);
console.log(params); // 输出：{ from: "toutiao_pc" } → 正确获取

// 测试「两种参数并存」的场景（列如之前的哈希参数+这次的顶层参数）
const mixUrl = 'http://localhost:2025/?top=1#/projectRelease/details?id=NDYxNQ==';
console.log(getUrlParams(mixUrl)); // 输出：{ top: "1", id: "NDYxNQ==" } → 两种参数都能获取

核心优势

1.全场景覆盖

同时解析两种参数位置：

顶层参数（? 直接跟在域名 / 路径后，如 https://xxx.com?a=1）
哈希后参数（# 后的路径中带 ?，如 https://xxx.com#/path?b=2）
避免了因参数位置不同导致的解析失败问题。

2.自动处理参数合并与多值

若两种位置存在同名参数（如 ?a=1#/path?a=2），会自动合并为数组 { a: ['1', '2'] }，符合直观预期。
空参数（如 ?c=）会保留空字符串 { c: '' }，无参数时返回空对象 {}，边缘情况处理合理。

3.依赖现代 API，简洁可靠

基于 URL 和 URLSearchParams 原生 API，自动处理 URL 编码（如 %E4%B8%AD%E6%96%87 解码为中文），无需手动写正则解析，减少出错概率。

一行JS代码获取页面URL参数

且兼容性更好

面是一个更通用、健壮的获取 URL 参数的方法，支持处理编码参数、多值参数（如 ?name=1&name=2）、空参数等边缘情况，且兼容性更好（兼容旧版浏览器）

function getUrlParams(url) {
  const params = {};
  // 1. 处理URL：若未传url，默认取当前页面URL
  const targetUrl = url || window.location.href;
  // --------------------------
  // 核心新增：解析hash内的参数（#后?的内容）
  // --------------------------
  // 拆分hash片段（例：#/path?id=1 → 提取出 "/path?id=1"）
  const hashPart = targetUrl.split('#')[1] || '';
  // 从hash片段中拆分“hash内参数”（例：/path?id=1 → 提取出 "id=1"）
  const hashParamsStr = hashPart.split('?')[1] || '';

  // --------------------------
  // 保留原逻辑：解析传统查询参数（?后#前的内容）
  // --------------------------
  // 拆分传统查询参数部分（例：?name=2#/path → 提取出 "name=2"）
  const queryString = targetUrl.split('#')[0].split('?')[1] || '';

  // --------------------------
  // 统一解析逻辑：同时解析“传统查询参数”和“hash内参数”
  // --------------------------
  // 合并需要解析的参数字符串（先传统，后hash，hash参数会覆盖同名传统参数，可按需调整顺序）
  const allParamsStr = [queryString, hashParamsStr].filter(Boolean).join('&');

  if (!allParamsStr) return params; // 无任何参数时返回空对象

  // 原解析逻辑（复用，处理键值对、URL解码、多值数组）
  allParamsStr.split('&').forEach(pair => {
    const [key, ...values] = pair.split('=');
    const value = values.join('='); // 处理值中含=的情况（如param=1=2）
    
    const decodeKey = decodeURIComponent(key || '');
    const decodeValue = decodeURIComponent(value || '');

    if (decodeKey) {
      // 多值参数处理（如?param=1¶m=2 → params.param = [1,2]）
      if (params[decodeKey] !== undefined) {
        params[decodeKey] = Array.isArray(params[decodeKey]) 
          ? [...params[decodeKey], decodeValue] 
          : [params[decodeKey], decodeValue];
      } else {
        params[decodeKey] = decodeValue;
      }
    }
  });

  return params;
}

const testUrl = "http://localhost:2025/#/projectRelease/details?id=NDYxNQ==¶m1=MQ==¶m2=NDYxNQ==&title=25%E6%B7%84%E5%8D%9A%E5%9F%8E%E6%8A%95MTN002";
const result = getUrlParams(testUrl);
console.log(result);
{
  id: "NDYxNQ==",
  param1: "MQ==",
  param2: "NDYxNQ==",
  title: "25浦发城投MTN002" // 中文已自动解码
}

关键说明

参数覆盖规则：若传统查询参数（?在#前）与 hash 内参数同名，当前代码中hash 参数会覆盖传统参数（因allParamsStr中 hash 参数在后）。若需反过来，可调整[queryString, hashParamsStr]的顺序为[hashParamsStr, queryString]。
边界处理：

若 URL 无 hash 或 hash 内无参数（如http://a.com/?name=1），仅解析传统查询参数；
若 URL 只有 hash 内参数（如你的测试 URL），仅解析 hash 内参数；
若参数值含=（如param=1=2），代码通过values.join('=')可正确保留完整值。

浏览器环境适配：若在浏览器中使用，window.location.href可自动获取当前页面 URL，无需手动传参（如getUrlParams()即可）。

一行JS代码获取页面URL参数

简单易懂且兼容旧浏览器

以下是一个简单易懂且兼容旧浏览器（包括 IE） 的方法，用正则匹配提取参数，代码简洁且逻辑清晰：

function getUrlParams() {
  var params = {};
  // 1. 分别获取“传统查询参数串”和“hash内参数串”
  // 传统查询参数串：?后#前的内容（例：?name=1#/path → 提取"name=1"）
  var searchParamsStr = window.location.search.slice(1) || '';
  // hash片段：#后的所有内容（例：#/path?id=2 → 提取"/path?id=2"）
  var hashPart = window.location.hash || '';
  // hash内参数串：hash中?后的内容（例：/path?id=2 → 提取"id=2"）
  var hashParamsStr = hashPart.split('?')[1] || '';

  // 2. 合并两个参数串（用&连接，处理“都有参数”的情况）
  var allParamsStr = [searchParamsStr, hashParamsStr]
    .filter(str => str) // 过滤空字符串（避免无参数时出现多余&）
    .join('&');

  // 3. 无参数时直接返回空对象
  if (!allParamsStr) return params;

  // 4. 复用原正则逻辑，统一解析所有参数
  allParamsStr.replace(/([^&=]+)=([^&=]*)/g, function(match, key, value) {
    // URL解码，处理中文、特殊字符（如%20）
    var decodeKey = decodeURIComponent(key);
    var decodeValue = decodeURIComponent(value || '');
    // 赋值到结果对象（若需处理多值参数，可在此处补充数组逻辑）
    params[decodeKey] = decodeValue;
  });

  return params;
}

const testUrl = "http://localhost:2025/#/projectRelease/details?id=NDYxNQ==¶m1=MQ==¶m2=NDYxNQ==&title=25%E6%B7%84%E5%8D%9A%E5%9F%8E%E6%8A%95MTN002";
const result = getUrlParams(testUrl);
console.log(result);
{
  id: "NDYxNQ==",
  param1: "MQ==",
  param2: "NDYxNQ==",
  title: "25浦发城投MTN002" // 中文已自动解码
}