Question

如果我有一个网址，例如

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

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

我知道可以使用location.search完成，但我无法弄清楚它是如何抓取参数的。

Answer 1

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

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"]);

Answer 2

非正则表达式方法，您可以简单地按字符“＆amp;”拆分并遍历键/值对：

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;
}

Answer 3

您可以使用window.URL类：

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');

Answer 4

这个问题已经陈旧，JavaScript已经发生了变化。你现在可以这样做：

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

您获得的params.year包含2008。您还可以在params对象中获得其他查询参数。

修改：更简洁/更简洁的方法：

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

然后，您可以测试year参数是否存在：

params.has('year')  // true

或者使用以下方法检索它：

params.get('year')  // 2008

Answer 5

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"

Answer 6

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

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

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"));

<强>输出：

zip
!!=
7890
false

Answer 7

我花了一段时间才找到这个问题的答案。大多数人似乎都在建议使用正则表达式解决方案。我非常喜欢使用经过测试和测试的代码，而不是我或其他人在运行时想到的正则表达式。

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

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

var uri = 'http://localhost/search.php?year=2008';
var year = uri.queryKey['year'];
// year = '2008'

Answer 8

最简单的方法是

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

的indexOf（）

indexOf(text)函数返回

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

我希望这很有用， @gumbo

Answer 9

我使用了Alex的变体 - 但需要将多次出现的param转换为数组。似乎有很多选择。我不想依赖另一个库来做这么简单的事情。我想这里发布的其他选项之一可能会更好 - 我因为直截了当而改编了亚历克斯。

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;
};

Answer 10

我对这个问题玩了一下，为此我用了这个：

function getJsonFromUrl() {
  return Object.assign(...location.search.substr(1).split("&").map(sliceProperty));
}

Object.assign将对象列表转换为一个对象
传播运算符...将数组转换为列表
location.search.substr(1).split("&")将所有参数作为属性数组（foo=bar）
map遍历每个属性并将其拆分为数组（调用splitProperty或sliceProperty）。

splitProperty：

  function splitProperty(pair) {
    [key, value] = pair.split("=")
    return { [key]: decodeURIComponent(value) }
  }

按=
将数组解构为两个元素的数组
使用动态属性语法

sliceProperty：

  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更快。有关详细信息，请运行JsPerf。

Answer 11

从location.search获取参数的一行：

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

然后，简单地：

if(params.get("year")){
  //year exists. do something...
} else {
  //year doesn't exist. do something else...
}

Answer 12

使用此紧凑的单行来获取查询字符串的对象：

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

现在只需使用query['key']获取所述密钥的值。

Answer 13

这就是我想要做的：

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;
        },
        {}
    );

当然，您可以使用现代语法或将所有内容写成一行来使其更紧凑...

我留给你。

Answer 14

ES6答案：

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

例如：

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

如何从location.search获取特定参数？

14 个答案:

的indexOf（）