如何从GET参数中获取值?

时间:2009-06-11 08:32:50

标签: javascript url

我有一个带有一些GET参数的URL,如下所示:

www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 

我需要获得c的全部价值。我试图读取URL,但我只得到了m2。如何使用JavaScript执行此操作?

63 个答案:

答案 0 :(得分:1618)

JavaScript 本身没有内置处理查询字符串参数的内容。

在(现代)浏览器中运行的代码,您可以使用URL object(这是浏览器向JS提供的API的一部分):

var url_string = "http://www.example.com/t.html?a=1&b=3&c=m2-m3-m4-m5"; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("c");
console.log(c);


对于旧版浏览器(包括Internet Explorer),您可以使用this polyfill或此问答原始版本中早于URL的代码:

您可以访问location.search,这会从?字符到URL的末尾或片段标识符的开头(#foo),以先到者为准。

然后你可以解析它:

function parse_query_string(query) {
  var vars = query.split("&");
  var query_string = {};
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    var key = decodeURIComponent(pair[0]);
    var value = decodeURIComponent(pair[1]);
    // If first entry with this name
    if (typeof query_string[key] === "undefined") {
      query_string[key] = decodeURIComponent(value);
      // If second entry with this name
    } else if (typeof query_string[key] === "string") {
      var arr = [query_string[key], decodeURIComponent(value)];
      query_string[key] = arr;
      // If third or later entry with this name
    } else {
      query_string[key].push(decodeURIComponent(value));
    }
  }
  return query_string;
}

var query_string = "a=1&b=3&c=m2-m3-m4-m5";
var parsed_qs = parse_query_string(query_string);
console.log(parsed_qs.c);

您可以使用以下命令从当前页面的URL获取查询字符串:

var query = window.location.search.substring(1);
var qs = parse_query_string(query);

答案 1 :(得分:238)

我见过的大多数实现都错过了URL解码名称和值。

这是一个通用的实用函数,它也可以进行正确的URL解码:

function getQueryParams(qs) {
    qs = qs.split('+').join(' ');

    var params = {},
        tokens,
        re = /[?&]?([^=]+)=([^&]*)/g;

    while (tokens = re.exec(qs)) {
        params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
    }

    return params;
}

//var query = getQueryParams(document.location.search);
//alert(query.foo);

答案 2 :(得分:217)

source

function gup( name, url ) {
    if (!url) url = location.href;
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regexS = "[\\?&]"+name+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var results = regex.exec( url );
    return results == null ? null : results[1];
}
gup('q', 'hxxp://example.com/?q=abc')

答案 3 :(得分:185)

这是检查一个参数的简便方法:

示例网址:

    http://myserver/action?myParam=2

示例Javascript:

    var myParam = location.search.split('myParam=')[1]

如果URL中存在“myParam”...变量myParam将包含“2”,否则它将是未定义的。

在这种情况下,也许你想要一个默认值:

    var myParam = location.search.split('myParam=')[1] ? location.search.split('myParam=')[1] : 'myDefaultValue';

更新:效果更好:

    var url = "http://www.example.com/index.php?myParam=384&login=admin"; // or window.location.href for current url
    var captured = /myParam=([^&]+)/.exec(url)[1]; // Value is in [1] ('384' in our case)
    var result = captured ? captured : 'myDefaultValue';

即使URL充满了参数,它也能正常工作。

答案 4 :(得分:107)

浏览器供应商已经通过URL和URLSearchParams实现了本机方式。

let url = new URL('http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5');
let searchParams = new URLSearchParams(url.search);
console.log(searchParams.get('c'));  // outputs "m2-m3-m4-m5"

目前支持Firefox,Opera,Safari,Chrome和Edge。有关浏览器支持的列表see here

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams https://developer.mozilla.org/en-US/docs/Web/API/URL/URL

https://url.spec.whatwg.org/

Google的工程师Eric Bidelman recommendspolyfill用于不受支持的浏览器。

答案 5 :(得分:76)

我很久以前就发现了这一点,很容易:

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,    
    function(m,key,value) {
      vars[key] = value;
    });
    return vars;
  }

然后这样称呼:

var fType = getUrlVars()["type"];

答案 6 :(得分:75)

您可以在location.search中获取查询字符串,然后您可以在问号后分割所有内容:

var params = {};

if (location.search) {
    var parts = location.search.substring(1).split('&');

    for (var i = 0; i < parts.length; i++) {
        var nv = parts[i].split('=');
        if (!nv[0]) continue;
        params[nv[0]] = nv[1] || true;
    }
}

// Now you can get the parameters you want like so:
var abc = params.abc;

答案 7 :(得分:37)

我写了一个更简单优雅的解决方案。

var arr = document.URL.match(/room=([0-9]+)/)
var room = arr[1];

答案 8 :(得分:28)

这是一个递归解决方案,没有正则表达式,并且具有最小的突变(只有params对象被突变,我认为这在JS中是不可避免的。)

这很棒,因为它:

  • 是递归的
  • 处理多个同名参数
  • 处理格式错误的参数字符串(缺少值,等等)
  • 如果'='在值
  • 中,则不会中断
  • 执行网址解码
  • 最后,它很棒,因为它...... argh !!!

<强>代码:

var get_params = function(search_string) {

  var parse = function(params, pairs) {
    var pair = pairs[0];
    var parts = pair.split('=');
    var key = decodeURIComponent(parts[0]);
    var value = decodeURIComponent(parts.slice(1).join('='));

    // Handle multiple parameters of the same name
    if (typeof params[key] === "undefined") {
      params[key] = value;
    } else {
      params[key] = [].concat(params[key], value);
    }

    return pairs.length == 1 ? params : parse(params, pairs.slice(1))
  }

  // Get rid of leading ?
  return search_string.length == 0 ? {} : parse({}, search_string.substr(1).split('&'));
}

var params = get_params(location.search);

// Finally, to get the param you want
params['c'];

答案 9 :(得分:23)

See this

function getURLParameters(paramName)
{
    var sURL = window.document.URL.toString();
    if (sURL.indexOf("?") > 0)
    {
        var arrParams = sURL.split("?");
        var arrURLParams = arrParams[1].split("&");
        var arrParamNames = new Array(arrURLParams.length);
        var arrParamValues = new Array(arrURLParams.length);

        var i = 0;
        for (i = 0; i<arrURLParams.length; i++)
        {
            var sParam =  arrURLParams[i].split("=");
            arrParamNames[i] = sParam[0];
            if (sParam[1] != "")
                arrParamValues[i] = unescape(sParam[1]);
            else
                arrParamValues[i] = "No Value";
        }

        for (i=0; i<arrURLParams.length; i++)
        {
            if (arrParamNames[i] == paramName)
            {
                //alert("Parameter:" + arrParamValues[i]);
                return arrParamValues[i];
            }
        }
        return "No Parameters Found";
    }
}

答案 10 :(得分:23)

使用URLSearchParams的超级简单方法。

function getParam(param){
  return new URLSearchParams(window.location.search).get(param);
}

目前支持Chrome,Firefox,Safari,Edge和others

答案 11 :(得分:20)

我做了一个这样做的功能:

var getUrlParams = function (url) {
  var params = {};
  (url + '?').split('?')[1].split('&').forEach(function (pair) {
    pair = (pair + '=').split('=').map(decodeURIComponent);
    if (pair[0].length) {
      params[pair[0]] = pair[1];
    }
  });
  return params;
};

更新5/26/2017,这是一个ES7实现(运行babel预设阶段0,1,2或3):

const getUrlParams = url => `${url}?`.split('?')[1]
  .split('&').reduce((params, pair) =>
    ((key, val) => key ? {...params, [key]: val} : params)
    (...`${pair}=`.split('=').map(decodeURIComponent)), {});

一些测试:

console.log(getUrlParams('https://google.com/foo?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('/foo?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('https://google.com/')); // Will log {}
console.log(getUrlParams('a=1&b=2&c')); // Will log {}

更新3/26/2018,这是一个Typescript实现:

const getUrlParams = (search: string) => `${search}?`
  .split('?')[1]
  .split('&')
  .reduce(
    (params: object, pair: string) => {
      const [key, value] = `${pair}=`
        .split('=')
        .map(decodeURIComponent)

      return key.length > 0 ? { ...params, [key]: value } : params
    },
    {}
  )

更新2/13/2019,这是一个更新的TypeScript实现,适用于TypeScript 3。

interface IParams { [key: string]: string }

const paramReducer = (params: IParams, pair: string): IParams => {
  const [key, value] = `${pair}=`.split('=').map(decodeURIComponent)

  return key.length > 0 ? { ...params, [key]: value } : params
}

const getUrlParams = (search: string): IParams =>
  `${search}?`.split('?')[1].split('&').reduce<IParams>(paramReducer, {})

答案 12 :(得分:19)

ECMAScript 6解决方案:

var params = window.location.search
  .substring(1)
  .split("&")
  .map(v => v.split("="))
  .reduce((map, [key, value]) => map.set(key, decodeURIComponent(value)), new Map())

答案 13 :(得分:11)

我使用parseUri库。它允许您完全按照要求执行:

var uri = 'www.test.com/t.html&a=1&b=3&c=m2-m3-m4-m5';
var c = uri.queryKey['c'];
// c = 'm2-m3-m4-m5'

答案 14 :(得分:10)

我用

function getVal(str) {
    var v = window.location.search.match(new RegExp('(?:[\?\&]'+str+'=)([^&]+)'));
    return v ? v[1] : null;
}

答案 15 :(得分:9)

这是我的解决方案。正如Andy E在回答this question时所建议的那样,如果你的剧本重复构建各种正则表达式字符串,运行循环等以获得单个值,那么它对你的剧本表现并不好。因此,我提出了一个更简单的脚本,它返回单个对象中的所有GET参数。您应该只调用一次,将结果分配给变量,然后在将来的任何时候,使用适当的密钥从该变量中获取所需的任何值。请注意,它还负责URI解码(例如%20)并用空格替换+:

 function getUrlQueryParams(url) {
  var queryString = url.split("?")[1];
  var keyValuePairs = queryString.split("&");
  var keyValue = [];
  var queryParams = {};
  keyValuePairs.forEach(function(pair) {
    keyValue = pair.split("=");
    queryParams[keyValue[0]] = decodeURIComponent(keyValue[1]).replace(/\+/g, " ");
});
  return queryParams;
}

所以,这里有一些脚本测试供您查看:

// Query parameters with strings only, no special characters.
var currentParams = getUrlQueryParams("example.com/foo?number=zero");
alert(currentParams["number"]); // Gives "zero".

// For the URL you stated above...
var someParams = getUrlQueryParams("www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 ");
alert(someParams["c"]); // Gives "m2-m3-m4-m5".

// For a query params with URI encoding...
var someParams = getUrlQueryParams("www.example.com/t.html?phrase=a%20long%20shot&location=Silicon+Valley%2C+USA");
alert(someParams["phrase"]); // Gives "a long shot".
alert(someParams["location"]); // Gives "Silicon Valley, USA".

答案 16 :(得分:8)

对于单参数值,如此index.html?msg = 1使用以下代码,

$(window).load(function(){
    queryString();
});

function queryString()
{
    var queryString = window.location.search.substring(1);
    var varArray = queryString.split("="); //eg. index.html?msg=1

    var param1 = varArray[0];
    var param2 = varArray[1];

}

对于所有参数值,请使用以下代码

$(window).load(function(){
    queryString();
});

function queryString()
{
    var queryString = window.location.search;
    var varArray = queryString.split("&");
    for (var i=0;i<varArray.length;i++) {
      var param = varArray[i].split("=");
        //parameter-value pair
    }
} 

答案 17 :(得分:7)

这个问题答案太多了,所以我又添加了另一个。

/**
 * parses and returns URI query parameters 
 * 
 * @param {string} param parm
 * @param {bool?} asArray if true, returns an array instead of a scalar 
 * @returns {Object|Array} 
 */
function getURIParameter(param, asArray) {
    return document.location.search.substring(1).split('&').reduce(function(p,c) {
        var parts = c.split('=', 2).map(function(param) { return decodeURIComponent(param); });
        if(parts.length == 0 || parts[0] != param) return (p instanceof Array) && !asArray ? null : p;
        return asArray ? p.concat(parts.concat(true)[1]) : parts.concat(true)[1];
    }, []);
}

用法:

getURIParameter("id")  // returns the last id or null if not present
getURIParameter("id", true) // returns an array of all ids

这可以处理空参数(那些没有"=value"的密钥),暴露标量和基于数组的值检索API,以及正确的URI组件解码。

答案 18 :(得分:7)

或者,如果您不想重新发明URI解析轮,请使用URI.js

获取名为foo的参数的值:

new URI((''+document.location)).search(true).foo

这是做什么的

  1. 将document.location转换为字符串(它是一个对象)
  2. 将该字符串提供给URI.js的URI类construtor
  3. 调用search()函数以获取网址的搜索(查询)部分 (传递true告诉它输出一个对象)
  4. 访问结果对象的foo属性以获取值
  5. 这里有一个小提琴....... http://jsfiddle.net/m6tett01/12/

答案 19 :(得分:7)

我在这里发布一个例子。但它在jQuery中。希望它能帮助别人:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.url.js"></script>

<!-- URL:  www.example.com/correct/?message=done&year=1990-->

<script type="text/javascript">
$(function(){
    $.url.attr('protocol')  // --> Protocol: "http"
    $.url.attr('path')          // --> host: "www.example.com"
    $.url.attr('query')         // --> path: "/correct/"
    $.url.attr('message')   // --> query: "done"
    $.url.attr('year')      // --> query: "1990"
});
</script>

答案 20 :(得分:6)

// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

// Usage for URL: http://my.site.com/location?locationId=53cc272c0364aefcb78756cd&shared=false
var id = getUrlVars()["locationId"];

从这里得到:http://jquery-howto.blogspot.ru/2009/09/get-url-parameters-values-with-jquery.html

答案 21 :(得分:6)

简单方法

function getParams(url){
        var regex = /[?&]([^=#]+)=([^&#]*)/g,
            params = {},
            match;
        while(match = regex.exec(url)) {
            params[match[1]] = match[2];
        }
        return params;
    }

然后将其称为getParams(url)

答案 22 :(得分:5)

最短的方法:

new URL(location.href).searchParams.get("my_key");

答案 23 :(得分:5)

// http:localhost:8080/path?param_1=a&param_2=b
var getParamsMap = function () {
    var params = window.location.search.split("&");
    var paramsMap = {};
    params.forEach(function (p) {
        var v = p.split("=");
        paramsMap[v[0]]=decodeURIComponent(v[1]);
    });
    return paramsMap;
};

// -----------------------

console.log(getParamsMap()["param_1"]);  // should log "a"     

答案 24 :(得分:5)

又一个建议。

已经有一些好的答案,但我发现它们不必要地复杂且难以理解。这很简单,并返回一个简单的关联数组,其键名与URL中的标记名相对应。

我为想要学习的人添加了以下评论的版本。

注意这依赖于jQuery($ .each)的循环,我推荐它而不是forEach。我发现使用jQuery确保跨浏览器兼容性更简单,而不是插入单独的修补程序来支持旧浏览器中不支持的新功能。

编辑:在我写完这篇文章之后,我注意到埃里克·艾略特的答案,几乎是相同的,尽管它使用forEach,而我一般反对(出于上述原因)。

function getTokens(){
    var tokens = [];
    var query = location.search;
    query = query.slice(1);
    query = query.split('&');
    $.each(query, function(i,value){    
        var token = value.split('=');   
        var key = decodeURIComponent(token[0]);     
        var data = decodeURIComponent(token[1]);
        tokens[key] = data;
    });
    return tokens;
}

评论版:

function getTokens(){
    var tokens = [];            // new array to hold result
    var query = location.search; // everything from the '?' onward 
    query = query.slice(1);     // remove the first character, which will be the '?' 
    query = query.split('&');   // split via each '&', leaving us an array of something=something strings

    // iterate through each something=something string
    $.each(query, function(i,value){    

        // split the something=something string via '=', creating an array containing the token name and data
        var token = value.split('=');   

        // assign the first array element (the token name) to the 'key' variable
        var key = decodeURIComponent(token[0]);     

        // assign the second array element (the token data) to the 'data' variable
        var data = decodeURIComponent(token[1]);

        tokens[key] = data;     // add an associative key/data pair to our result array, with key names being the URI token names
    });

    return tokens;  // return the array
}

对于下面的例子,我们假设这个地址:

http://www.example.com/page.htm?id=4&name=murray

您可以将URL标记分配给您自己的变量:

var tokens = getTokens();

然后按名称引用每个URL令牌:

document.write( tokens['id'] );

这会打印“4”。

您也可以直接从函数中引用令牌名称:

document.write( getTokens()['name'] );

...会打印“murray”。

答案 25 :(得分:4)

以下是用于将url查询参数解析为Object的angularJs源代码:

&#13;
&#13;
function tryDecodeURIComponent(value) {
  try {
    return decodeURIComponent(value);
  } catch (e) {
    // Ignore any invalid uri component
  }
}

function isDefined(value) {return typeof value !== 'undefined';}

function parseKeyValue(keyValue) {
  keyValue = keyValue.replace(/^\?/, '');
  var obj = {}, key_value, key;
  var iter = (keyValue || "").split('&');
  for (var i=0; i<iter.length; i++) {
    var kValue = iter[i];
    if (kValue) {
      key_value = kValue.replace(/\+/g,'%20').split('=');
      key = tryDecodeURIComponent(key_value[0]);
      if (isDefined(key)) {
        var val = isDefined(key_value[1]) ? tryDecodeURIComponent(key_value[1]) : true;
        if (!hasOwnProperty.call(obj, key)) {
          obj[key] = val;
        } else if (isArray(obj[key])) {
          obj[key].push(val);
        } else {
          obj[key] = [obj[key],val];
        }
      }
    }
  };
  return obj;
}

alert(JSON.stringify(parseKeyValue('?a=1&b=3&c=m2-m3-m4-m5')));
&#13;
&#13;
&#13;

您可以将此功能添加到window.location

window.location.query = function query(arg){
  q = parseKeyValue(this.search);
  if (!isDefined(arg)) {
    return q;
  }      
  if (q.hasOwnProperty(arg)) {
    return q[arg];
  } else {
    return "";
  }
}

// assuming you have this url :
// http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5

console.log(window.location.query())

// Object {a: "1", b: "3", c: "m2-m3-m4-m5"}

console.log(window.location.query('c'))

// "m2-m3-m4-m5"

答案 26 :(得分:4)

这是获取单个参数的简短函数:

import axios from "axios"

state={
 empDetails:[]    
  }

componentDidMount() {
     axios
    .get("http://localhost:3000/api/empdetails")
    .then(res => 
      this.setState({empDetails:res.data})
    })
    .catch(err => {
      console.log(err);
    });
  }
render(){
const {empDetails} = this.state
let empDetailsMarkup = empDetails ? (empDetails.map(empDetail => {  
 <p>empDetail.name</p> })) : null // assuming there is a name for each empDetail and this will print it to the screen
  return(<div>{empDetails}</div>)

}

这些特殊情况的处理与URLSearchParams一致:

  • 如果缺少该参数,则返回function getUrlParam(paramName) { var match = window.location.search.match("[?&]" + paramName + "(?:&|$|=([^&]*))"); return match ? (match[1] ? decodeURIComponent(match[1]) : "") : null; }

  • 如果参数存在但不包含“ =“(例如“?param”),则返回null

注意!如果参数名称可能包含特殊的URL或正则表达式字符(例如,如果来自用户输入),则需要对其进行转义。可以很容易地做到这一点:

""

答案 27 :(得分:4)

我需要读取URL GET变量并根据url参数完成操作。我搜索了高低的解决方案并遇到了这段小代码。它基本上读取当前页面的URL,在URL上执行一些正则表达式,然后将url参数保存在关联数组中,我们可以轻松访问它。

作为一个例子,如果我们在底部的javascript中有以下url。

http://TestServer/Pages/NewsArchive.aspx?year=2013&Month=July

我们需要做的就是获取参数id和page来调用它:

守则将是:

<script type="text/javascript">
var first = getUrlVars()["year"];
var second = getUrlVars()["Month"];

alert(first);
alert(second);
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
</script>

答案 28 :(得分:3)

我们可以在不循环所有参数的情况下以更简单的方式获取 c 参数值,请参阅下面的jQuery以获取参数。

<强> 1。获取参数值:

var url = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5";

url.match(**/(c=)[0-9A-Za-z-]+/ig**)[0].replace('c=',"")

(或)

url.match(**/(c=)[0-z-]+/ig**)[0].replace('c=',"")

以字符串

返回
  

“M2-M3-M4-M5”

<强> 2。要替换参数值:

var url = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5";

url.replace(**/(c=)[0-9A-Za-z-]+/ig, "c=m2345"**)

答案 29 :(得分:3)

优雅的功能样式解决方案

让我们创建一个包含URL参数名称作为键的对象,然后我们可以通过其名称轻松提取参数:

// URL: https://example.com/?test=true&orderId=9381  

// Build an object containing key-value pairs
export const queryStringParams = window.location.search
  .split('?')[1]
  .split('&')
  .map(keyValue => keyValue.split('='))
  .reduce<QueryStringParams>((params, [key, value]) => {
    params[key] = value;
    return params;
  }, {});

type QueryStringParams = {
  [key: string]: string;
};


// Return URL parameter called "orderId"
return queryStringParams.orderId;

答案 30 :(得分:3)

到目前为止,

This Gist by Eldon McGuinness是迄今为止我见过的JavaScript查询字符串解析器的最完整实现。

不幸的是,它是作为jQuery插件编写的。

我把它改写为vanilla JS并做了一些改进:

function parseQuery(str) {
  var qso = {};
  var qs = (str || document.location.search);
  // Check for an empty querystring
  if (qs == "") {
    return qso;
  }
  // Normalize the querystring
  qs = qs.replace(/(^\?)/, '').replace(/;/g, '&');
  while (qs.indexOf("&&") != -1) {
    qs = qs.replace(/&&/g, '&');
  }
  qs = qs.replace(/([\&]+$)/, '');
  // Break the querystring into parts
  qs = qs.split("&");
  // Build the querystring object
  for (var i = 0; i < qs.length; i++) {
    var qi = qs[i].split("=");
    qi = qi.map(function(n) {
      return decodeURIComponent(n)
    });
    if (typeof qi[1] === "undefined") {
      qi[1] = null;
    }
    if (typeof qso[qi[0]] !== "undefined") {

      // If a key already exists then make this an object
      if (typeof (qso[qi[0]]) == "string") {
        var temp = qso[qi[0]];
        if (qi[1] == "") {
          qi[1] = null;
        }
        qso[qi[0]] = [];
        qso[qi[0]].push(temp);
        qso[qi[0]].push(qi[1]);

      } else if (typeof (qso[qi[0]]) == "object") {
        if (qi[1] == "") {
          qi[1] = null;
        }
        qso[qi[0]].push(qi[1]);
      }
    } else {
      // If no key exists just set it as a string
      if (qi[1] == "") {
        qi[1] = null;
      }
      qso[qi[0]] = qi[1];
    }
  }
  return qso;
}

// DEMO
console.log(parseQuery("?foo=bar&foo=boo&roo=bar;bee=bop;=ghost;=ghost2;&;checkbox%5B%5D=b1;checkbox%5B%5D=b2;dd=;http=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab&http=http%3A%2F%2Fw3schools2.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab"));

另见this Fiddle

答案 31 :(得分:3)

function getParamValue(param) {
    var urlParamString = location.search.split(param + "=");
    if (urlParamString.length <= 1) return "";
    else {
        var tmp = urlParamString[1].split("&");
        return tmp[0];
    }
}

无论参数是否为最后,这都适用于您的情况。

答案 32 :(得分:3)

以下是我的工作:

var uriParams = getSearchParameters();
alert(uriParams.c);


// background functions:

// Get object/associative array of URL parameters
function getSearchParameters () {
  var prmstr = window.location.search.substr(1);
  return prmstr !== null && prmstr !== "" ? transformToAssocArray(prmstr) : {};
}

// convert parameters from url-style string to associative array
function transformToAssocArray (prmstr) {
  var params = {},
      prmarr = prmstr.split("&");

  for (var i = 0; i < prmarr.length; i++) {
    var tmparr = prmarr[i].split("=");
    params[tmparr[0]] = tmparr[1];
  }
  return params;
}

答案 33 :(得分:3)

window.location.href.split("?")

然后忽略第一个索引

Array.prototype.slice.call(window.location.href.split("?"), 1) 

返回您的网址参数数组

var paramArray = Array.prototype.slice.call(window.location.href.split(/[?=]+/), 1);
var paramObject = paramArray.reduce(function(x, y, i, a){ (i%2==0) ?  (x[y] = a[i+1]) : void 0; return x; }, {});

稍微冗长/ hacky但也有功能,paramObject包含映射为js对象的所有参数

答案 34 :(得分:2)

使用replace()方法的最简单方法:

通过urlStr字符串:

paramVal = urlStr.replace(/.*param_name=([^&]*).*|(.*)/, '$1');

来自当前 URL

paramVal = document.URL.replace(/.*param_name=([^&]*).*|(.*)/, '$1');

说明:

  • document.URL-界面以字符串形式返回文档位置(页面url)。
  • replace()-方法返回一个新字符串,该字符串包含 pattern 的部分或全部匹配项,并替换为 replacement
  • /.*param_name=([^&]*).*/-斜杠之间的regular expression模式表示:
    • .*-任何一个或多个字符,
    • param_name=-已套用的参数名称,
    • ()-以正则表达式分组,
    • [^&]*-除&之外的任何一个或多个字符,
    • |-交替出现,
    • $1-在正则表达式中引用第一组。

var urlStr = 'www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5';
var c = urlStr.replace(/.*c=([^&]*).*|(.*)/, '$1');
var notExisted = urlStr.replace(/.*not_existed=([^&]*).*|(.*)/, '$1');
console.log(`c === '${c}'`);
console.log(`notExisted === '${notExisted}'`);

答案 35 :(得分:2)

PHP parse_str copycat ..:)

// Handles also array params well
function parseQueryString(query) {
    var pars = (query != null ? query : "").replace(/&+/g, "&").split('&'),
        par, key, val, re = /^([\w]+)\[(.*)\]/i, ra, ks, ki, i = 0,
        params = {};

    while ((par = pars.shift()) && (par = par.split('=', 2))) {
        key = decodeURIComponent(par[0]);
        // prevent param value going to be "undefined" as string
        val = decodeURIComponent(par[1] || "").replace(/\+/g, " ");
        // check array params
        if (ra = re.exec(key)) {
            ks = ra[1];
            // init array param
            if (!(ks in params)) {
                params[ks] = {};
            }
            // set int key
            ki = (ra[2] != "") ? ra[2] : i++;
            // set array param
            params[ks][ki] = val;
            // go on..
            continue;
        }
        // set param
        params[key] = val;
    }

    return params;
}

var query = 'foo=1&bar=The+bar!%20&arr[]=a0&arr[]=a1&arr[s]=as&isset&arr[]=last';
var params = parseQueryString(query);
console.log(params)
console.log(params.foo)        // 1
console.log(params.bar)        // The bar!
console.log(params.arr[0])     // a0
console.log(params.arr[1])     // a1
console.log(params.arr.s)      // as
console.log(params.arr.none)   // undefined
console.log("isset" in params) // true like: isset($_GET['isset'])



/*
// in php
parse_str('foo=1&bar=The+bar!%20&arr[]=a0&arr[]=a1&arr[s]=as&isset&arr[]=last', $query);
print_r($query);

Array
(
    [foo] => 1
    [bar] => The bar!
    [arr] => Array
        (
            [0] => a0
            [1] => a1
            [s] => as
            [2] => last
        )

    [isset] =>
)*/

答案 36 :(得分:2)

您可以添加一个输入框,然后让用户将值复制到其中......这很简单:

<h1>Hey User! Can you please copy the value out of the location bar where it says like, &m=2? Thanks! And then, if you could...paste it in the box below and click the Done button?</h1>
<input type='text' id='the-url-value' />
<input type='button' value='This is the Done button. Click here after you do all that other stuff I wrote.' />

<script>
//...read the value on click

好吧,虽然严肃......我发现这个代码似乎运作良好:

http://www.developerdrive.com/2013/08/turning-the-querystring-into-a-json-object-using-javascript/

function queryToJSON() {
    var pairs = location.search.slice(1).split('&');

    var result = {};
    pairs.forEach(function(pair) {
        pair = pair.split('=');
        result[pair[0]] = decodeURIComponent(pair[1] || '');
    });

    return JSON.parse(JSON.stringify(result));
}

var query = queryToJSON();

答案 37 :(得分:2)

使用dojo。这里没有其他解决方案是这么简短或经过充分测试的:

require(["dojo/io-query"], function(ioQuery){
    var uri = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 ";
    var query = uri.substring(uri.indexOf("?") + 1, uri.length);
    var queryObject = ioQuery.queryToObject(query);
    console.log(queryObject.c); //prints m2-m3-m4-m5
});

答案 38 :(得分:1)

要从window.location中的搜索对象中将所有url参数提取为json

export const getURLParams = location => {
    const searchParams = new URLSearchParams(location.search)
    const params = {}

    for (let key of searchParams.keys()) {
        params[key] = searchParams.get(key)
    }

    return params
}

console.log(getURLParams({ search: '?query=someting&anotherquery=anotherthing' }))

// --> {query: "someting", anotherquery: "anotherthing"}

答案 39 :(得分:1)

我喜欢尽可能地写速记:

网址:example.com/mortgage_calc.htm?pmts=120&intr=6.8&prin=10000

Vanilla Javascript:

for ( var vObj = {}, i=0, vArr = window.location.search.substring(1).split('&');
        i < vArr.length; v = vArr[i++].split('='), vObj[v[0]] = v[1] ){}
// vObj = {pmts: "120", intr: "6.8", prin: "10000"}

答案 40 :(得分:1)

现在是 N++ 时间,我正在寻找一种干净的方法来做到这一点。
会把这个保存在这里以防我回来因为我知道我会......?

const parseUrlQuery = (value) => {
  var urlParams = new URL(value).searchParams
  return Array.from(urlParams.keys()).reduce((acc, key) => {
    acc[key] = urlParams.getAll(key)
    return acc
  }, {})
}

console.log(parseUrlQuery('http://url/path?param1=A&param1=B&param2=ABC&param3=61569'))

答案 41 :(得分:0)

window.location.search.slice(1).split('&').reduce((res, val) => ({...res, [val.split('=')[0]]: val.split('=')[1]}), {})

答案 42 :(得分:0)

尝试

url.match(/[?&]c=([^&]*)/)[1]

var url = "www.test.com/t.html?a=1&bc=3&c=m2-m3-m4-m5";

c= url.match(/[?&]c=([^&]*)/)[1];

console.log(c);

这是Daniel Sokolowski answer Jun 27 '19的改进。正则表达式说明

  • [?&]的第一个匹配字符必须为?&(以省略ac=之类的参数)
  • c=参数名称,末尾带有=字符
  • (...)在第一组比赛中
  • [^&]**不同(^)的零个或多个字符(&
  • [1]从匹配数组中选择第一组

答案 43 :(得分:0)

您可以通过以下功能来做到这一点:

function getParameter(parameterName){
        let paramsIndex = document.URL.indexOf("?");
        let params="";
        if(paramsIndex>0)
            params=document.URL.substring(paramsIndex+1, document.URL.length).split("&");
        let result = [];
        for(let i=0;i<params.length;i++)
        {
            console.warn(params[i].split("=")[0].toString()+ "," + params[i].split("=")[1].toString());
            var obj = {"key":params[i].split("=")[0].toString(),"value":params[i].split("=")[1].toString()};
            result.push(obj);
        }
        return passedValue = result.find(x=>x.key==parameterName).value;
    }

现在您可以使用getParameter("parameterName")

获取参数值

答案 44 :(得分:0)

简化版,经过测试

function get(name){
    var r = /[?&]([^=#]+)=([^&#]*)/g,p={},match;
    while(match = r.exec(window.location)) p[match[1]] = match[2];
    return p[name];
}

用法:

var parameter = get ['parameter']

答案 45 :(得分:0)

我的解决方案:

/**
 * get object with params from query of url
 */
const getParams = (url) => {
  const params = {};
  const parser = document.createElement('a');
  parser.href = url;
  const query = parser.search.substring(1);
  if (query !== '') {
    const vars = query.split('&');
    for (let i = 0; i < vars.length; i++) {
      const pair = vars[i].split('=');
      const key = decodeURIComponent(pair[0]).replace('[]', '');
      const value = decodeURIComponent(pair[1]);
      
      if (key in params) {
        if (Array.isArray(params[key])) {
          params[key].push(value);
        } else {
          params[key] = [params[key]];
          params[key].push(value);
        }
      } else params[key] = value;
    }
  }
  return params;
}

答案 46 :(得分:0)

获取单个参数值:

.cache()

答案 47 :(得分:0)

从许多答案中学习(例如VaMooseGnarfBlixt)。

您可以创建一个对象(或使用Location对象)并添加一个方法,该方法允许您获取URL参数,解码并使用JS样式:

Url = {
    params: undefined,
    get get(){
        if(!this.params){
            var vars = {};
            if(url.length!==0)
                url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value){
                    key=decodeURIComponent(key);
                    if(typeof vars[key]==="undefined") {
                        vars[key]= decodeURIComponent(value);
                    }
                    else {
                        vars[key]= [].concat(vars[key], decodeURIComponent(value));
                    }
                });
            this.params = vars;
        }
        return this.params;
    }
};

这允许仅使用Url.get调用该方法。

第一次从网址获取对象时,下次会加载保存的对象。

实施例

?param1=param1Value&param2=param2Value&param1=param1Value2这样的网址中,可以获取参数:

Url.get.param1 //["param1Value","param1Value2"]
Url.get.param2 //"param2Value"

答案 48 :(得分:0)

以下是我的解决方案:jsfiddle

下面的方法返回一个包含给定URL参数的字典。如果没有参数,它将为空。

function getParams(url){
    var paramsStart = url.indexOf('?');
    var params = null;

    //no params available
    if(paramsStart != -1){
        var paramsString = url.substring(url.indexOf('?') + 1, url.length);

        //only '?' available
        if(paramsString != ""){
            var paramsPairs = paramsString.split('&');

            //preparing
            params = {};
            var empty = true;
            var index  = 0;
            var key = "";
            var val = "";

            for(i = 0, len = paramsPairs.length; i < len; i++){
                index = paramsPairs[i].indexOf('=');

                //if assignment symbol found
                if(index != -1){
                    key = paramsPairs[i].substring(0, index);
                    val = paramsPairs[i].substring(index + 1, paramsPairs[i].length);

                    if(key != "" && val != ""){

                        //extend here for decoding, integer parsing, whatever...

                        params[key] = val;

                        if(empty){
                            empty = false;
                        }
                    }                    
                }
            }

            if(empty){
                params = null;
            }
        }
    }

    return params;
}

答案 49 :(得分:0)

我开发了一个JavaScript工具,只需一个简单的步骤

首先,将此脚本链接复制到HTML的头部:

<script src="https://booligoosh.github.io/urlParams/urlParams.js"></script>

然后使用curlParams.c获取urlParams['c']的值。 简单!

<强> You can see a real demo using your values here

另外请记住,我确实开发了这个,但它是一个简单而无忧无虑的解决方案。此工具还包括十六进制字符解码,这通常很有帮助。

答案 50 :(得分:0)

这是一个我觉得更具可读性的解决方案 - 但它需要一个.forEach()垫片用于&lt; IE8:

var getParams = function () {
  var params = {};
  if (location.search) {
    var parts = location.search.slice(1).split('&');

    parts.forEach(function (part) {
      var pair = part.split('=');
      pair[0] = decodeURIComponent(pair[0]);
      pair[1] = decodeURIComponent(pair[1]);
      params[pair[0]] = (pair[1] !== 'undefined') ?
        pair[1] : true;
    });
  }
  return params;
}

答案 51 :(得分:-1)

如最新浏览器中的第一个答案所述,我们可以使用新的URL API, 但是,将对象中的所有参数都使用并使用它们的更一致的本机javascript简单解决方案可能是

例如,该类别为locationUtil

const locationSearch = () => window.location.search;
const getParams = () => {
  const usefulSearch = locationSearch().replace('?', '');
  const params = {};
  usefulSearch.split('&').map(p => {
    const searchParam = p.split('=');
    const [key, value] = searchParam;
    params[key] = value;
    return params;
  });
  return params;
};

export const searchParams = getParams();

用法::现在,您可以在您的课程中导入searchParams对象

例如url-https://www.google.com?key1=https://www.linkedin.com/in/spiara/&valid=true

import { searchParams } from '../somewhere/locationUtil';

const {key1, valid} = searchParams;
if(valid) {
 console.log("Do Something");
 window.location.href = key1;
}

答案 52 :(得分:-1)

您可以简单地使用核心javascript来获取param的键值作为js对象:

var url_string = "http://www.example.com/t.html?a=1&b=3&c=m2-m3-m4-m5";
var url = new URL(url_string);
let obj = {};
var c = url.searchParams.forEach((value, key) => {
  obj[key] = value;
});
console.log(obj);

答案 53 :(得分:-1)

function parseUrl(url){
    let urlParam = url.split("?")[1];
    console.log("---------> URL param : " + urlParam);
    urlParam = urlParam.split("&");
    let urlParamObject = {};
    for(let i=0;i < urlParam.length;i++){
        let tmp = urlParam[i].split("=");
        urlParamObject[tmp[0]] = tmp[1];
    }
    return urlParamObject;
}

let param = parseUrl(url);
param.a // output 10
param.b // output 20

答案 54 :(得分:-1)

我更喜欢使用可用资源,而不是重新发明如何解析这些参数。

  1. 将URL解析为对象
  2. 提取搜索参数部分
  3. 通过数组扩展将searchParams从迭代器转换为数组。
  4. 将键值数组简化为一个对象。

const url = 'http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5';
const params = [... new URL(url).searchParams.entries()]
  .reduce((a, c) => Object.assign(a, {[c[0]]:c[1]}), {})

console.log(params);

答案 55 :(得分:-1)

一个衬里和IE11友好:

> (window.location.href).match('c=([^&]*)')[1]
> "m2-m3-m4-m5"

答案 56 :(得分:-1)

我尝试了许多不同的方法,但是当我在URL中查找参数值时,这个经过尝试且真正的regex函数对我有用,希望这会有所帮助:

        var text = 'www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5'

        function QueryString(item, text){
            var foundString = text.match(new RegExp("[\?\&]" + item + "=([^\&]*)(\&?)","i"));
            return foundString ? foundString[1] : foundString;
        }

        console.log(QueryString('c', text));

QueuryString('param_name', url)一样使用,并会返回值

  

m2-m3-m4-m5

答案 57 :(得分:-1)

在我的情况下(使用所有子网址重定向到新域名)::

window.location.replace("https://newdomain.com" + window.location.pathname);

答案 58 :(得分:-1)

    function gup() {
    var qs = document.location.search;
    qs = qs.split('+').join(' ');
    var params = {}, tokens, re = /[?&]?([^=]+)=([^&]*)/g;
    while (tokens = re.exec(qs))
        params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
    return params;
}

一样使用它
var params = gup()

然后

params.param1
params.param2

答案 59 :(得分:-1)

你可以运行这个功能

    function getUrlVars()
    {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    }

    var source = getUrlVars()["lm_supplier"];
    var el = source.toString();
    var result= decodeURI(el);

console.log(result)

此功能从网址获取您想要的内容, var source = getUrlVars()[“把你想要从网址获取的内容”];

答案 60 :(得分:-1)

这有效:

function getURLParameter(name) {
  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [null, ''])[1].replace(/\+/g, '%20')) || null;
}

我没有得到任何其他最佳答案。

答案 61 :(得分:-1)

$_GET: function (param) {
    var regex = new RegExp("(?:[?&]+" + param + "=)([^&]*)?", "i");
    var match = regex.exec(window.location.href);
    return match === null ? match : match[1];
}

答案 62 :(得分:-2)

我一次又一次遇到相同的问题。 现在,这里有很多用户,我以我的HAX工作而闻名,

所以我使用以下方法解决它:

PHP:

echo "<p style="display:none" id=\"hidden-GET\">".$_GET['id']."</p>";

JS:

document.getElementById("hidden-GET").innerHTML;

简单的HAX,但可以正常工作。

相关问题