获取地址中的query参数,完美版

从浏览器url地址中获取参数是前端常见的需求,但是其中有一些需要注意的问题。如果没注意的化可能会被坑。

注意点:

  • 直接用window.location.search 时,如果碰到哈希路由(带/#/),取到的值为空。
  • url中有汉字、空格或其他特殊字符时,浏览器默认会进行编码,需要使用encodeURI或encodeURIComponent进行解码才能获取到相关参数。
  • 一般有两种形式返回某个参数值,返回整个参数对象。
    实例代码:
/*
* 第一种方法:
* @param paramName
* 用来获取url中的某个参数
*/
function getQueryParamByKey (paramName)
  var url = document.location.toString()
  // 如果url中有特殊字符则需要进行一下解码
  url = decodeURI(url)
  var arrObj = url.split("?");
  if (arrObj.length > 1) {
      var arrPara = arrObj[1].split("&");
      var arr;
      for (var i = 0; i < arrPara.length; i++) {
        arr = arrPara[i].split("=");
        if (arr != null && arr[0] == paraName) {
          return decodeURIComponent(arr[1]);
        }
      }
      return "";
  } else {
      return "";
  }
}
/*
* 第二种方法:
* 用来获取url中的某个参数
*/
function getQueryParams ()
  var url = document.location.toString()
  // 如果url中有特殊字符则需要进行一下解码
  url = decodeURI(url)
  var arr1 = url.split("?");
  var obj = {}
  if (arr1.length > 1) {
    var arr2 = arr1[1].split("&");
    for (var i = 0; i < arr2.length; i++) {
      var curArr = arr2[i].split("=");
      obj[curArr[0]] = decodeURIComponent(curArr[1])
    }
  }
  return obj
}

这里用到了 decodeURI 与 decodeURIComponent,简单讲下他们的区别

解码的原因:如果url中出现了特殊字符浏览器会自动给他们进行编码,可以理解成执行了一次encodeURI(),有时我们可能就是要通过url传递一些特殊参数比如get请求,我们会主动进行编码decodeURI、decodeURIComponent。所以当我们从url中取参数时还是得注意一下解码的情况。

encodeURI()

它着眼于对整个URL进行编码,因此除了常见的符号以外,对其他一些在网址中有特殊含义的符号“; / ? : @ & = + $ , #”,也不进行编码。编码后,它输出符号的utf-8形式,并且在每个字节前加上%。

encodeURIComponent()

与encodeURI()的区别是,它用于对URL的组成部分进行个别编码,而不用于对整个URL进行编码。因此,“; / ? : @ & = + $ , #”,这些在encodeURI()中不被编码的符号,在encodeURIComponent()中统统会被编码。至于具体的编码方法,两者是一样。

最后友情提醒,如果用的hash路由千万不要用window.location.search 来取query参数

你可能感兴趣的:(获取地址中的query参数,完美版)