logo标签列表

从“GET”参数中获取值（JavaScript）

javascripturlurl-parameters
1727

我有一个带有GET参数的URL，如下所示：

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

我需要获取整个 c 的值。我尝试读取URL，但我只得到了 m2 。如何使用JavaScript实现这一点？

9
在发表新回答之前，请考虑已经有50多个回答了。请确保您的回答提供的信息不在现有的答案中。 - janniks
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); - Ali NajafZadeh
1
真是疯狂，一个本应该很简单的JS问题需要50多个答案 :/ - fguillen
63个回答
3

我非常喜欢尽可能使用速记：

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

纯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"}
3
您可以直接使用核心JavaScript将参数的键值作为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);
URL对象已经在被接受的答案中提到，并且不是“核心JavaScript”。它在自己的标准中定义（https://url.spec.whatwg.org/#api），并且不受IE支持。 - Quentin
2

PHP的parse_str函数模仿者.. :)

// 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] =>
)*/
2

我发现下面这个解决方案更易读一些——但是需要为< IE8添加一个.forEach()的shim：

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;
}
2
这是我的解决方案：jsfiddle 下面的方法返回一个包含给定 URL 参数的字典。如果没有参数，则返回 null。
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;
}
2

简化版本，已测试

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

usage:

var parameter = get['parameter']

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

尝试

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在2019年6月27日的回答的改进版。正则表达式的解释如下:

  • [?&] 匹配的第一个字符必须是 ? 或 & （忽略像 ac= 这样的参数）
  • c= 参数名称以 = 结尾
  • (...) 匹配第一个组
  • [^&]* 与 & 不同的零个或多个字符（*）
  • [1] 从匹配数组中选择第一个组
1
获取单个参数值：
function getQueryParameter(query, parameter) {
return (window.location.href.split(parameter + '=')[1].split('&')[0]);}
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);

我已经发布了一个简单而现代的答案来解决问题。如果我的回答被踩，我想要一些反馈。我错在哪里？是概念上的还是实践上的？这个问题能在回答中修复吗？请提供反馈！ - dinigo
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接