通过window.location.href 或 window.location.search 获取url的参数集合以及某个参数的值

通过window.location.href 或 window.location.search 获取url的参数集合以及某个参数的值通过window.location.href或window.location.search获取url的参数集合以及某个参数的值

1、先了解 window.location 的各个属性:

在这里插入图片描述

属性名 描述
href 完成的url
host 主机名和当前url的端口号
hash 从#号开始的url(锚)
hostname 当前url的主机名
port 当前url的端口号
pathname 当前url的路径部分
protocol 当前url的协议
search 从?开始的url(查询部分)
在这里插入图片描述
2、使用 window.location.href 获取参数对象集合
// 第一种方法
const parseUrlParams = (url) => {
  const params = {}
  if (!url || url === '' || typeof url !== 'string') {
    return params
  }
  const paramsStr = url.split('?')[1]
  if (!paramsStr) {
    return params
  }
  const paramsArr = paramsStr.replace(/&|=/g, ' ').split(' ')
  for (let i = 0; i < paramsArr.length / 2; i++) {
    const value = paramsArr[i * 2 + 1]
    params[paramsArr[i * 2]] =
      value === 'true' ? true : value === 'false' ? false : value
  }
  return params
};
let param = parseUrlParams(window.location.href).token // window.location.href = http://localhost:3000/#/home?
token=fdsafadsfas
console.log(param) // fdsafadsfas
// 第二种方法 (获取url某个参数的值)
const getValueByUrlParams = (paras) => {
  let url = window.location.href;
  var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
  var paraObj = {}
  var i, j
  for (i = 0; j = paraString[i]; i++) {
  paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
  }
  var returnValue = paraObj[paras.toLowerCase()];
  if (typeof(returnValue) == "undefined") {
  return "";
  } else {
  return returnValue;
  }
};
let param = getValueByUrlParams("token")  // window.location.href = http://localhost:3000/#/home?
token=fdsafadsfas
console.log(param) // fdsafadsfas
3、通过window.location.search 获取参数集合(注意一个参数以及多个参数)
const getRequest = (url) => {
  // var url = window.location.search; //获取url中"?"符后的字串
  let theRequest = new Object();
  // 判断是否有问号
  if (url.indexOf("?") != -1) {
    // 把问号去掉
    var str = url.substr(1);
    // 判断是否有多个参数
    if(str.indexOf("&") != -1) {
      // 以&符分项组成数组
      let strs = str.split("&");
      for (var i = 0; i < strs.length; i++) {
        // 循环数组
        // theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        // 每一项等号左边为属性,等号右边为属性的值,值需要使用 decodeURI() 函数对通过 escape() 或 url 编码过的字符串进行解码。
        theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
      }
    } else {
      // 只有一个参数
      let arr = str.split("=");
      theRequest[arr[0]] = arr[1];
    }
  };
  return theRequest;
};
let obj = getRequest(window.location.search);  // window.location.href = http://localhost:3000/#/home?
token=fdsafadsfas
console.log(obj) // {token: "fdsafadsfas"}

控制情绪,保持平静!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/37118.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注