原生js获取路径带的参数

原生js获取路径带的参数


第一种方法

function GetQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
      var r = window.location.search.substr(1).match(reg);
      if (r!=null) return unescape(r[2]); return null;
    }

第二种方法

function querystring(queryStr) {
  const [, query] = queryStr.split("?");
  if (query) {
    return query.split("&").reduce((pre, cur) => {
      const [key, val] = cur.split("=");
      if (pre[key]) {
        pre[key] = [...pre[key], decodeURIComponent(val)];
      } else {
        pre[key] = [decodeURIComponent(val)];
      }
      return pre;
    }, {});
  }
  return {};
}
### 如何使用原生 JavaScript 获取 URL 参数 为了在不依赖任何库的情况下获取 URL 参数,可以利用 `URL` 和 `URLSearchParams` 对象。这些对象提供了方便的方法来解析和操作 URL 及其查询字符串。 下面是一个简单的函数,用于提取并返回 URL 中的所有参数作为键值对的对象: ```javascript function getUrlParams() { const params = {}; const queryString = window.location.search.slice(1); if (!queryString) return params; for (const pair of new URLSearchParams(queryString)) { params[pair[0]] = pair[1]; } return params; } ``` 此代码片段定义了一个名为 `getUrlParams()` 的函数,该函数会遍历当前页面的查询字符串,并将其转换成易于访问的形式[^1]。 如果希望更进一步处理特定名称的参数,则可以直接通过 `get()` 方法从 `URLSearchParams` 实例中检索单个参数值: ```javascript // 假设 URL 是 http://example.com/?name=JohnDoe&id=12345 const url = new URL(window.location.href); console.log(url.searchParams.get('name')); // 输出 "JohnDoe" console.log(url.searchParams.get('id')); // 输出 "12345" ``` 这种方法不仅适用于浏览器环境中的全局 `window.location` 属性,还可以应用于任意有效的绝对或相对路径 URL 字符串[^2]。 对于更加复杂的场景,比如当同一个 key 存在一个以上的 value 或者需要支持 IE 浏览器时,可能还需要额外编写一些逻辑来进行兼容性和健壮性的增强。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值