จะรับค่าจากพารามิเตอร์ GET ได้อย่างไร

ฉันมี URL ที่มีพารามิเตอร์ GET บางตัวดังนี้:

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

cฉันต้องการที่จะได้รับค่าทั้งหมดของ ผมพยายามที่จะอ่าน URL m2แต่ฉันมีเพียง ฉันจะทำสิ่งนี้โดยใช้ JavaScript ได้อย่างไร

JavaScript นั้นไม่มีอะไรในตัวสำหรับการจัดการพารามิเตอร์สตริงการสืบค้น

รหัสที่ใช้ในเบราว์เซอร์ (ทันสมัย) คุณสามารถใช้URLวัตถุ (ซึ่งเป็นส่วนหนึ่งของ API ที่เบราว์เซอร์ให้กับ JS):

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) คุณสามารถใช้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);

การใช้งานส่วนใหญ่ที่ฉันเคยเห็นพลาดการถอดรหัส 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);

แหล่ง

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

นี่เป็นวิธีที่ง่ายในการตรวจสอบเพียงพารามิเตอร์เดียว:

URL ตัวอย่าง:

    http://myserver/action?myParam=2

ตัวอย่าง Javascript:

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

หาก "myParam" มีอยู่ใน URL ... ตัวแปร 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 เต็มไปด้วยพารามิเตอร์

ผู้ขายเบราว์เซอร์ได้ใช้วิธีการดั้งเดิมผ่าน 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 สำหรับรายชื่อของการสนับสนุนเบราว์เซอร์ดูที่นี่

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/

Eric Bidelman วิศวกรของ Google แนะนำให้ใช้polyfillนี้สำหรับเบราว์เซอร์ที่ไม่รองรับ

ฉันพบว่าทุกเพศทุกวัยที่ผ่านมาง่ายมาก:

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

จากนั้นเรียกมันว่าสิ่งนี้:

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

คุณสามารถรับสตริงการสืบค้น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;

ฉันเขียนโซลูชันที่เรียบง่ายและสง่างามมากขึ้น

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

วิธีที่ง่ายสุดใช้URLSearchParams

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

มันได้รับการสนับสนุนในขณะนี้ใน Chrome, Firefox, Safari, ขอบและอื่น ๆ

นี่คือโซลูชันแบบเรียกซ้ำที่ไม่มี regex และมีการกลายพันธุ์น้อยที่สุด (เฉพาะวัตถุ params ถูกกลายพันธุ์ซึ่งฉันเชื่อว่าไม่สามารถหลีกเลี่ยงได้ใน JS)

มันยอดเยี่ยมเพราะ:

• เป็นแบบเรียกซ้ำ
• จัดการหลายพารามิเตอร์ในชื่อเดียวกัน
• จัดการได้ดีกับสตริงพารามิเตอร์ที่ผิดรูปแบบ (ค่าที่หายไปเป็นต้น)
• ไม่แตกถ้า '=' อยู่ในค่า
• ทำการถอดรหัส URL
• และท้ายที่สุดมันยอดเยี่ยมเพราะมัน ... เอ่อ !!!

รหัส:

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

ฉันทำฟังก์ชันที่ทำสิ่งนี้:

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

ดูนี่

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

โซลูชัน 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())

ฉันใช้

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

ฉันใช้ไลบรารี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'

นี่คือทางออกของฉัน ตามที่ Andy E ให้คำแนะนำในขณะที่ตอบคำถามนี้มันไม่ดีสำหรับประสิทธิภาพของสคริปต์ของคุณหากมันสร้างสายอักขระ Regex ซ้ำ ๆ ใช้ลูป ฯลฯ เพื่อรับค่าเดียว ดังนั้นฉันจึงคิดสคริปต์ที่เรียบง่ายซึ่งคืนค่าพารามิเตอร์ 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".

หรือถ้าคุณไม่ต้องการที่จะบูรณาการล้อแยก URI ใช้URI.js

ในการรับค่าของพารามิเตอร์ชื่อ foo:

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

นั่นมันคืออะไร

1. แปลง document.location เป็นสตริง (เป็นวัตถุ)
2. ฟีดสตริงนั้นไปยังตัว จำกัด คลาส URI ของ URI
3. เรียกใช้ฟังก์ชั่นการค้นหา () เพื่อรับส่วนการค้นหา (แบบสอบถาม) ของ URL
   (ผ่าน True บอกให้เอาท์พุทวัตถุ)
4. เข้าถึงคุณสมบัติ foo บนวัตถุผลลัพธ์เพื่อรับค่า

นี่คือซอสำหรับเรื่องนี้ .... http://jsfiddle.net/m6tett01/12/

สำหรับค่าพารามิเตอร์เดียวเช่น 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
    }
} 

ที่นี่ฉันโพสต์ตัวอย่างหนึ่ง แต่มันอยู่ใน 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>

วิธีที่สั้นที่สุด:

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

คำถามนี้มีคำตอบมากเกินไปฉันกำลังเพิ่มอีกหนึ่งคำถาม

/**
 * 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

copes นี้ที่มีพารามิเตอร์ว่าง (คีย์เหล่านั้นไม่มีอยู่"=value") การเปิดเผยทั้ง API แบบสเกลาและการเรียกค่าตามอาร์เรย์รวมถึงการถอดรหัสคอมโพเนนต์ URI ที่เหมาะสม

วิธีที่ง่ายที่สุดโดยใช้replace()วิธีการ:

จากurlStrสตริง:

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

หรือจากURLปัจจุบัน:

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

คำอธิบาย:

• document.URL - อินเตอร์เฟสส่งคืนตำแหน่งเอกสาร (URL หน้า) เป็นสตริง
• replace()- วิธีการส่งกลับสตริงใหม่ที่มีบางส่วนหรือการแข่งขันทั้งหมดของรูปแบบการแทนที่ด้วยการเปลี่ยน
• /.*param_name=([^&]*).*/- รูปแบบการแสดงออกปกติล้อมรอบระหว่างทับซึ่งหมายความว่า:
  • .* - อักขระใด ๆ ศูนย์หรือมากกว่า
  • param_name= - ชื่อ param ที่ serched
  • () - กลุ่มในการแสดงออกปกติ
  • [^&]*- หนึ่งหรือมากกว่าของตัวอักษรใดไม่รวม&,
  • | - การสลับ
  • $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}'`);

อีกข้อเสนอแนะ

มีคำตอบที่ดีอยู่แล้ว แต่ฉันพบว่ามันซับซ้อนและไม่เข้าใจยาก นี่คือสั้น ๆ ง่าย ๆ และคืนค่าอาเรย์แบบเชื่อมโยงอย่างง่ายที่มีชื่อคีย์ที่สอดคล้องกับชื่อโทเค็นใน URL

ฉันเพิ่มเวอร์ชันพร้อมความคิดเห็นด้านล่างสำหรับผู้ที่ต้องการเรียนรู้

โปรดทราบว่านี่ต้องอาศัย jQuery ($ .each) สำหรับลูปของมันซึ่งฉันแนะนำให้ใช้แทน forEach ฉันพบว่าง่ายกว่าเพื่อให้แน่ใจว่าสามารถใช้งานร่วมกับเบราว์เซอร์ข้ามเบราว์เซอร์ได้โดยใช้ jQuery ทั่วทั้งบอร์ดแทนที่จะเสียบในแต่ละการแก้ไขเพื่อรองรับฟังก์ชั่นใหม่ที่ไม่รองรับเบราว์เซอร์รุ่นเก่า

แก้ไข: หลังจากที่ฉันเขียนสิ่งนี้ฉันสังเกตเห็นคำตอบของ Eric Elliott ซึ่งเกือบเหมือนกันถึงแม้ว่ามันจะใช้ 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"

นอกจากนี้คุณยังสามารถอ้างถึงชื่อโทเค็น aa จากฟังก์ชันโดยตรง:

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

... ซึ่งจะพิมพ์ "murray"

// 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

วิธีง่ายๆ

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

จากนั้นเรียกมันว่า getParams (url)

ฉันจำเป็นต้องอ่านตัวแปร URL GET และดำเนินการให้เสร็จตามพารามิเตอร์ url ฉันค้นหาคำตอบสูงและต่ำและพบรหัสชิ้นเล็กชิ้นน้อยนี้ โดยทั่วไปจะอ่าน URL หน้าปัจจุบันดำเนินการนิพจน์ปกติบางอย่างบน URL จากนั้นบันทึกพารามิเตอร์ URL ในอาร์เรย์ที่เชื่อมโยงซึ่งเราสามารถเข้าถึงได้ง่าย

ดังนั้นเป็นตัวอย่างถ้าเรามี URL ต่อไปนี้พร้อมกับจาวาสคริปต์ที่ด้านล่างในสถานที่

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

ทั้งหมดที่เราต้องทำเพื่อให้ id พารามิเตอร์และหน้ามีการเรียกสิ่งนี้:

รหัสจะเป็น:

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

// 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"     

สรุปสาระสำคัญโดย Eldon McGuinnessนี้เป็นการดำเนินการที่สมบูรณ์ที่สุดของตัวแยกวิเคราะห์สตริงการสืบค้น JavaScript ที่ฉันเคยเห็น

น่าเสียดายที่มันเขียนเป็นปลั๊กอิน jQuery

ฉันเขียนมันอีกครั้งเพื่อวานิลลา 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"));

ดูซอนี้

โซลูชันสไตล์ที่หรูหราและใช้งานได้ดี

มาสร้างวัตถุที่มีชื่อพารามิเตอร์ 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;

นี่คือสิ่งที่ฉันทำ:

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