美文网首页
js获取地址栏参数

js获取地址栏参数

作者: yong_zai | 来源:发表于2018-11-27 16:54 被阅读0次

一. URLSearchParams(需要高版本浏览器支持)

function getQueryString(name) {
  const search = location.search();
  const res =  new URLSearchParams(search);
  return res.get(name);
}

二.正则表达式(超级推荐)

若地址栏地址为:www.toutiao.html?info="zhoubotong"&age="156"

    // 参数name为地址栏中的参数名
    function getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]); return null;
    }
  
   //方法调用如下
    var myInfo = getQueryString("info");
    if (myInfo != null && myInfo.toString().length > 1) {
      console.log(getQueryString("info"));  //zhoubotong
    }
  • 若地址栏没有携带参数,运行getQueryString()会报错
  • 添加判断来增强代码的健壮性

三. 原生分割法

    function getQueryString(name) {
      var url = decodeURI(location.search); //解码地址栏中的数据 恢复中文数据
      var object = {};
      if (url.indexOf("?") != -1) {
        var str = url.substr(1);  //获取?后面的字符串
        var strs = str.split("&");  //将参数按 & 分割成数组
        for (var i = 0; i < strs.length; i++) {
          object[strs[i].split("=")[0]] = strs[i].split("=")[1]
        }
      }
      return object[name];
    }
    console.log(getQueryString("info"))//zhoubotong
  • location.search 获取整个地址栏url
  • decodeURI 解码地址栏中的数据 恢复中文
  • split& =将字符串分割成字符串数组

相关文章

网友评论

      本文标题:js获取地址栏参数

      本文链接:https://www.haomeiwen.com/subject/xkagqqtx.html