关于javascript：如何从location.search获取特定参数？


How can I get a specific parameter from location.search?

本问题已经有最佳答案，请猛点这里访问。

如果我有这样的网址

1
http://localhost/search.php?year=2008

如何编写JavaScript函数来获取变量年，并查看它是否包含任何内容？

我知道它可以用location.search完成，但我不知道它是如何获取参数的。

相关讨论

我最喜欢的获取URL参数的方法是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var parseQueryString = function() {

    var str = window.location.search;
    var objURL = {};

    str.replace(
        new RegExp("([^?=&]+)(=([^&]*))?","g" ),
        function( $0, $1, $2, $3 ){
            objURL[ $1 ] = $3;
        }
    );
    return objURL;
};

//Example how to use it:
var params = parseQueryString();
alert(params["foo"]);
相关讨论

非regex方法，只需按字符"&；"进行拆分，然后迭代键/值对：

1
2
3
4
5
6
7
8
9
10
11
12
function getParameter(paramName) {
  var searchString = window.location.search.substring(1),
      i, val, params = searchString.split("&");

  for (i=0;i<params.length;i++) {
    val = params[i].split("=");
    if (val[0] == paramName) {
      return val[1];
    }
  }
  return null;
}
相关讨论

您可以使用EDCOX1×4类：

1
2
3
4
5
new URL(location.href).searchParams.get('year')
// Returns 2008 for href="http://localhost/search.php?year=2008".
// Or in two steps:
const params = new URL(location.href).searchParams;
const year = params.get('year');
相关讨论

这个问题是旧的，事情已经在JavaScript中进化了。你现在可以这样做：

1
2
3
4
5
const params = {}
document.location.search.substr(1).split('&').forEach(pair => {
  [key, value] = pair.split('=')
  params[key] = value
})

得到EDOCX1，5，包含EDCOX1，6。您还可以在EDOCX1的7个对象中获得其他查询参数。

编辑：一个更短的/更干净的方式来做到这一点：

1
const params = new Map(location.search.slice(1).split('&').map(kv => kv.split('=')))

然后，可以测试EDCOX1与8个参数是否存在：

1
params.has('year')  // true

或检索：

1
params.get('year')  // 2008
相关讨论

下面使用正则表达式并仅在URL的查询字符串部分进行搜索。

最重要的是，该方法支持普通参数和数组参数，如http://localhost/?fiz=zip&foo[]=!!=&bar=7890#hashhashhash

1
2
3
4
5
6
7
8
9
10
11
12
function getQueryParam(param) {
    var result =  window.location.search.match(
        new RegExp("(\\?|&)" + param +"(\\[\\])?=([^&]*)")
    );

    return result ? result[3] : false;
}

console.log(getQueryParam("fiz"));
console.log(getQueryParam("foo"));
console.log(getQueryParam("bar"));
console.log(getQueryParam("zxcv"));

输出：

1
2
3
4
zip
!!=
7890
false
1
2
3
4
5
6
7
8
9
10
11
function gup( name ) {
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regexS ="[\\?&]"+name+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var results = regex.exec( window.location.href );
    if( results == null )
        return"";
    else
        return results[1];
}
var year = gup("year"); // returns"2008"
相关讨论

我花了一段时间才找到这个问题的答案。大多数人似乎在建议Regex解决方案。我非常喜欢使用经过尝试和测试的代码，而不是我或其他人随时随地想到的regex。

我使用这里提供的parseuri库：http://stevenlevithan.com/demo/parseuri/js/

它可以让你完全按照自己的要求去做：

1
2
3
var uri = 'http://localhost/search.php?year=2008';
var year = uri.queryKey['year'];
// year = '2008'
相关讨论

最简单的方法是

1
2
3
4
5
if (document.location.search.indexOf('yourtext=') >= 0) {
    // your code
} else {
    // what happens?
}

索引()

indexOf(text)函数返回

  • 当函数中传递的文本不在您要查找的任何变量或字符串中时，小于0的整数-在本例中是document.location.search。
  • 当函数中传递的文本位于您要查找的任何变量或字符串中时，等于或大于0的整数，在本例中为document.location.search。

我希望这是有用的，@gumbo

相关讨论

从位置获取参数。用一行搜索：

1
const params = new Map(this.props.location.search.slice(1).split('&').map(param => param.split('=')))

然后，简单地说：

1
2
3
4
5
if(params.get("year")){
  //year exists. do something...
} else {
  //year doesn't exist. do something else...
}

我对这个问题做了一些处理，最后我用了这个：

1
2
3
function getJsonFromUrl() {
  return Object.assign(...location.search.substr(1).split("&").map(sliceProperty));
}
  • Object.assign将对象列表转换为一个对象
  • spread operator ...将数组转换为列表
  • location.search.substr(1).split("&")获取所有参数作为属性数组(foo=bar)
  • map遍历每个属性并将它们分割成一个数组(称为splitProperty或sliceProperty)。

splitProperty：

1
2
3
4
  function splitProperty(pair) {
    [key, value] = pair.split("=")
    return { [key]: decodeURIComponent(value) }
  }
  • 由=分割
  • 将数组分解为两个元素的数组
  • 返回具有动态属性语法的新对象

sliceProperty：

1
2
3
4
5
6
  function sliceProperty(pair) {
    const position = pair.indexOf("="),
      key = pair.slice(0, position),
      value = pair.slice(position + 1, pair.length);
    return { [key]: decodeURIComponent(value) }
  }
  • 设置=的位置、键和值
  • 返回具有动态属性语法的新对象

我觉得splitProperty更漂亮，但sliceProperty更快。运行jspef获取更多信息。

我使用了亚历克斯的一个变体-但需要将出现多次的参数转换为数组。似乎有很多选择。我不想依靠另一个图书馆来做这么简单的事情。我想在这里贴出的其他选择之一可能会更好-我改编了亚历克斯的，因为直接向前。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
parseQueryString = function() {
    var str = window.location.search;
    var objURL = {};

    // local isArray - defer to underscore, as we are already using the lib
    var isArray = _.isArray

    str.replace(
        new RegExp("([^?=&]+)(=([^&]*))?","g" ),
        function( $0, $1, $2, $3 ){

            if(objURL[ $1 ] && !isArray(objURL[ $1 ])){
                // if there parameter occurs more than once, convert to an array on 2nd
                var first = objURL[ $1 ]
                objURL[ $1 ] = [first, $3]
            } else if(objURL[ $1 ] && isArray(objURL[ $1 ])){
                // if there parameter occurs more than once, add to array after 2nd
                objURL[ $1 ].push($3)
            }
            else
            {
                // this is the first instance
                objURL[ $1 ] = $3;
            }

        }
    );
    return objURL;
};
相关讨论

我喜欢这样做：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.location.search
    .substr(1)
    .split('&')
    .reduce(
        function(accumulator, currentValue) {
            var pair = currentValue
                .split('=')
                .map(function(value) {
                    return decodeURIComponent(value);
                });

            accumulator[pair[0]] = pair[1];

            return accumulator;
        },
        {}
    );

当然，您可以使用现代语法或将所有内容都写在一行中使其更紧凑…

我由你决定。

使用此压缩一行程序获取querystring的对象：

1
var query = Object.assign.apply(0,location.search.slice(1).split('&').map(a=>({[a.split('=')[0]]:a.split('=')[1]})));

现在只需使用query['key']就可以得到所述密钥的值。

ES6回答：

1
2
3
4
5
const parseQueryString = (path = window.location.search) =>
  path.slice(1).split('&').reduce((car, cur) => {
   const [key, value] = cur.split('=')
   return { ...car, [key]: value }
  }, {})

例如：

1
2
parseQueryString('?foo=bar&foobar=baz')
// => {foo:"bar", foobar:"baz"}