JS取URL中的参数

平时写前端逻辑,很多时候会遇到,需要取url中参数的情况,这个时候我们可能会取url后面的参数一顿匹配。

1、通过serach取到参数

// http://127.0.0.1/index?id=999&name=888
const {serach = '',href}=window.location;
// serach取到的值就是 ?id=999&name=888
// href为http://127.0.0.1/index?id=999&name=888

2、匹配取参数

平时普通的办法,就是取到的值通过正则匹配到id和name。如下。
方法一

const getvl=(name) => {
     const reg = new RegExp("(^|\\?|&)"+ name +"=([^&]*)(\\s|&|$)", "i");
     
     if (reg.test(location.search)){ 
     	return unescape(RegExp.$2.replace(/\+/g, " "));
     }
     return "";
 };
const code = getvl("name");

方法二

interface UrlParamsProps {
  key?: string;
  href?: string;
}

/**
 * 获取url中?拼接数据
 * key 为希望获取值的键,默认返回整个对象
 * href 为希望处理的url地址,默认使用window.location.href
 * @param params UrlParamsProps
 */
export function urlParams(params: UrlParamsProps) {
  const queryStr = params.href
    ? params.href.split('?')
    : window.location.href.split('?');
  if (queryStr[1]) {
    const paramsObj = queryStr[1].split('&');
    const obj: any = {};
    paramsObj.forEach(item => {
      const _itme = item.split('=');
      obj[_itme[0]] = decodeURIComponent(_itme[1]);
    });
    return params.key ? obj[params.key] : obj;
  }
}

3、利用URLSearchParams。
如下,两行代码就可以直接取出来参数了,要是不用考虑兼容IE的话,使用起来很方便呢。还有一些其他的API方法,如get\sort\has等,这些方法的兼容性就更差了。

const query = new URLSearchParams('?id=12313&aa=90laa');
query.get('id'); 

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值