通过Javascript得到URL中的参数(query string)

Question

在网上找的这两种处理方式，但不理解函数的逻辑和正则部分，另这两种方法的不同和哪个在项目中使用性能会更高呢？希望有懂得大神能指点迷津！谢谢?！！
http://www.cnblogs.com/season...
方法一：

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
    return results == null ? "": decodeURIComponent(results[1]);
}
console.log(getParameterByName("param")) //yes

方法二：

var urlParams; 
(window.onpopstate = function() {
    var match,
    pl = /\+/g,
    search = /([^&=]+)=?([^&]*)/g,
    decode = function(s) {
        return decodeURIComponent(s.replace(pl, " "));
    },
    query = window.location.search.substring(1);
    urlParams = {};
    while (match = search.exec(query))
       urlParams[decode(match[1])] = decode(match[2]);
})();

　　//urlParams的结果
    urlParams = {
      param: "yes",
      article: "1"
    }

    console.log(urlParams["param"]);  // -> "yes"
    console.log("article" in urlParams);  // -> true

Answer 1

就你提供的两种方法 。 个人观点， 就大工程的 话， 我会选择方法一， 小工程我会选择方法二， 方法一进行封装，我可以丢到jqurey 中， 但是方法二 则不行，绑定了两个全局对象，灵活性太差。 但是 方法一 有个弊端或者说是优点， 既 我需要什么我就传什么， 不需要丢给我 多余的 参数，这样的效果在 url 参数非常多的时候 效果会非常明显 ，灵活性更佳 ，但是方法二 是可以获得所有参数和所有值。

Answer 2

pl = /\+/g;//为了将url中的`+`替换为空字符串
search = /([^&=]+)=?([^&]*)/g;//匹配param=yes,`=`分隔，不能以`&`或`=`开头,`g`多次匹配

//来个好理解的
var a =document.createElement('a');
a.href='http://www.cnblogs.com/season-huang/index?param=yes&article=1';
query = a.search.substring(1);
urlParams = {};
arr.map(function(i){
    urlParams[i.split('=')[0]]=i.split('=')[1]
});
console.log(urlParams)
//Object {param: "yes", article: "1"}

Answer 3

我特意跑去看了下node的querystring的parse 代码，他们没用正则啥的，是一个字符一个字符读出来的。
https://github.com/nodejs/nod...

然后看了下你这正则，觉得两个的性能消耗应该都差不多，都是两次正则匹配。
但我更倾向第二种，因为直接就完整的解析出一个对象了，多好用，第一种太麻烦。

Answer 4

正则没有深入，不过还是要能读懂简单的。遇到复杂的，也可以使用诸如 replace， split 之类拆解为简单的来处理。这一块其他同学注释得很清楚了。

题主问题的另一个思路：

URL 解析，完全可以使用 window.location 对象（如 search, host 等属性）以及 字符串的 replace(), split() 方法以及一些关键字符如 + / = ? 分步拆解出来。

下面是之前写的一个比较单一功能的，贴一下哈：

function getParamFromUrl(url, name){
    var params = url.split('?'),
        val = '';
    if( params.length < 2 ) return '';
    var search = params[1].split('&');
    
    for(var i = 0, len = search.length; i < len; i++ ){
        var ss = search[i].split('=');
        if( name === ss[0] ) {
            val = ss[1];
            break;
        }
    }
    return val;
}

Answer 5

有个叫qs的node库，可以直接把请求字符串解析成对象，也可以反过来用来把对象转成请求参数

Answer 6

使用这个理解更清晰一点 ，我的就叫方法四吧

function GetRequest() {
  var url = location.search;
  var theRequest = new Object()
  if (url.indexOf("?") != -1) {
    var str = url.substr(1)
    if (str.indexOf("&") != -1) {
      var strs = str.split("&")
      for (var i = 0; i < strs.length; i++) {
        theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1])
      }
    } else {
      theRequest[str.split("=")[0]] = unescape(str.split("=")[1])
    }
  }
  return theRequest
}

Answer 7

var lib = {

urlParams: function(url) { //传入的参数为window.location
    var urlParamsList = {};
    var params = url.search.replace(/^\?/, "").split('&'); 

// var params = url.split("?")[1].split("&") 这里是当url是window.location.href时候

    for (var i = 0; i < params.length; i++) {
        var param = params[i];
        var temp = param.split("=");
        urlParamsList[temp[0]] = decodeURI(temp[1]);
    }
    return urlParamsList;
}

}
用法：selfUserID = lib.urlParams(window.location)['userID']

Answer 8

var paramsString = "q=URLUtils.searchParams&topic=api"
var searchParams = new URLSearchParams(paramsString);
searchParams.get('q')

试试这个 https://developer.mozilla.org...