it-swarm.asia

كيف يمكنني الحصول على قيم سلسلة الاستعلام في JavaScript؟

هل هناك طريقة أقل من البرنامج المساعد لاسترداد سلسلة الاستعلام القيم عبر jQuery (أو بدون)؟

إذا كان الأمر كذلك ، كيف؟ إذا لم يكن كذلك ، هل هناك مكون إضافي يمكنه القيام بذلك؟

2701
Kemal Emin

التحديث: Sep-2018

يمكنك استخدام URLSearchParams وهو بسيط وله دعم متصفح جيد .

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');

الأصل

لا تحتاج إلى مسج لهذا الغرض. يمكنك استخدام بعض JavaScript فقط:

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

الاستخدام:

// query string: ?foo=lorem&bar=&baz
var foo = getParameterByName('foo'); // "lorem"
var bar = getParameterByName('bar'); // "" (present with empty value)
var baz = getParameterByName('baz'); // "" (present with no value)
var qux = getParameterByName('qux'); // null (absent)


ملاحظة: إذا كانت المعلمة موجودة عدة مرات (?foo=lorem&foo=ipsum) ، فستحصل على القيمة الأولى (lorem). لا يوجد معيار حول هذا وتختلف الاستخدامات ، انظر على سبيل المثال هذا السؤال: الموضع الرسمي لمفاتيح تكرار HTTP GET المكررة .
ملاحظة: الوظيفة حساسة لحالة الأحرف. إذا كنت تفضل اسم المعلمة غير حساس لحالة الأحرف ، { أضف 'i' modifier إلى RegExp }


هذا تحديث يستند إلى مواصفات URLSearchParams لتحقيق نفس النتيجة بشكل أكثر إيجازًا. راجع إجابة بعنوان " URLSearchParams " أدناه.

7640
Artem Barger

بعض الحلول المنشورة هنا غير فعالة. تكرار بحث التعبير العادي في كل مرة يحتاج فيها البرنامج النصي للوصول إلى معلمة غير ضروري تمامًا ، تكفي وظيفة واحدة لتقسيم المعلمات إلى كائن نمط صفيف اقتران. إذا كنت لا تعمل مع HTML 5 History API ، فهذا ضروري فقط بمجرد تحميل الصفحة. فشل الاقتراحات الأخرى هنا أيضًا في فك تشفير URL بشكل صحيح.

var urlParams;
(window.onpopstate = function () {
    var match,
        pl     = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
        query  = window.location.search.substring(1);

    urlParams = {};
    while (match = search.exec(query))
       urlParams[decode(match[1])] = decode(match[2]);
})();

مثال على الاستعلام:

?i=main&mode=front&sid=de8d49b78a85a322c4155015fdce22c4&enc=+Hello%20&empty

نتيجة:

 urlParams = {
    enc: " Hello ",
    i: "main",
    mode: "front",
    sid: "de8d49b78a85a322c4155015fdce22c4",
    empty: ""
}

alert(urlParams["mode"]);
// -> "front"

alert("empty" in urlParams);
// -> true

يمكن تحسين هذا بسهولة للتعامل مع سلاسل استعلام نمط الصفيف أيضًا. مثال على ذلك هو هنا ، ولكن نظرًا لعدم تحديد معلمات نمط الصفيف في RFC 3986 لن أتسبب في تلويث هذه الإجابة باستخدام التعليمات البرمجية المصدر. للراغبين في إصدار "ملوث" ، انظر إلى إجابة campbeln أدناه .

كما هو موضح في التعليقات ، يعد ; محددًا قانونيًا لأزواج key=value. سيتطلب الأمر رجلاً أكثر تعقيدًا للتعامل مع ; أو & ، وهو ما أعتقد أنه غير ضروري لأنه من النادر أن يتم استخدام ; وأقول أنه من غير المرجح أن يتم استخدام الاثنين. إذا كنت بحاجة إلى دعم ; بدلاً من & ، فما عليك سوى تبديلها في regex.


<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>

اكثر سهولة!

1666
Andy E

ES2015 (ES6)

getQueryStringParams = query => {
    return query
        ? (/^[?#]/.test(query) ? query.slice(1) : query)
            .split('&')
            .reduce((params, param) => {
                    let [key, value] = param.split('=');
                    params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
                    return params;
                }, {}
            )
        : {}
};

بدون مسج

var qs = (function(a) {
    if (a == "") return {};
    var b = {};
    for (var i = 0; i < a.length; ++i)
    {
        var p=a[i].split('=', 2);
        if (p.length == 1)
            b[p[0]] = "";
        else
            b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    return b;
})(window.location.search.substr(1).split('&'));

باستخدام عنوان URL مثل ?topic=123&name=query+string ، سيعود التالي:

qs["topic"];    // 123
qs["name"];     // query string
qs["nothere"];  // undefined (object)

طريقة جوجل

تمزيق رمز Google ، وجدت الطريقة التي يستخدمونها: getUrlParameters

function (b) {
    var c = typeof b === "undefined";
    if (a !== h && c) return a;
    for (var d = {}, b = b || k[B][vb], e = b[p]("?"), f = b[p]("#"), b = (f === -1 ? b[Ya](e + 1) : [b[Ya](e + 1, f - e - 1), "&", b[Ya](f + 1)][K](""))[z]("&"), e = i.dd ? ia : unescape, f = 0, g = b[w]; f < g; ++f) {
        var l = b[f][p]("=");
        if (l !== -1) {
            var q = b[f][I](0, l),
                l = b[f][I](l + 1),
                l = l[Ca](/\+/g, " ");
            try {
                d[q] = e(l)
            } catch (A) {}
        }
    }
    c && (a = d);
    return d
}

إنه مبهم ، لكنه مفهوم. لا يعمل لأن بعض المتغيرات غير محددة.

يبدأون في البحث عن معلمات على عنوان url من ? وأيضًا من التجزئة #. ثم لكل معلمة ينقسمون في علامة المساواة b[f][p]("=") (التي تبدو مثل indexOf ، يستخدمون موضع الحرف للحصول على المفتاح/القيمة). بعد تقسيمها ، يقومون بالتحقق مما إذا كانت المعلمة لها قيمة أم لا ، وإذا كانت تحتوي على قيمة d ، فسوف تستمر فقط.

في النهاية ، يتم إرجاع الكائن d ، والتعامل مع escaping وعلامة +. هذا الكائن هو تماما مثل لي ، لديه نفس السلوك.


طريقتي كـ البرنامج المساعد jQuery

(function($) {
    $.QueryString = (function(paramsArray) {
        let params = {};

        for (let i = 0; i < paramsArray.length; ++i)
        {
            let param = paramsArray[i]
                .split('=', 2);

            if (param.length !== 2)
                continue;

            params[param[0]] = decodeURIComponent(param[1].replace(/\+/g, " "));
        }

        return params;
    })(window.location.search.substr(1).split('&'))
})(jQuery);

استعمال

//Get a param
$.QueryString.param
//-or-
$.QueryString["param"]
//This outputs something like...
//"val"

//Get all params as object
$.QueryString
//This outputs something like...
//Object { param: "val", param2: "val" }

//Set a param (only in the $.QueryString object, doesn't affect the browser's querystring)
$.QueryString.param = "newvalue"
//This doesn't output anything, it just updates the $.QueryString object

//Convert object into string suitable for url a querystring (Requires jQuery)
$.param($.QueryString)
//This outputs something like...
//"param=newvalue&param2=val"

//Update the url/querystring in the browser's location bar with the $.QueryString object
history.replaceState({}, '', "?" + $.param($.QueryString));
//-or-
history.pushState({}, '', "?" + $.param($.QueryString));

اختبار الأداء (طريقة الانقسام مقابل طريقة regex) ( jsPerf )

رمز الإعداد: طرق الإعلان

تقسيم رمز الاختبار

var qs = window.GetQueryString(query);

var search = qs["q"];
var value = qs["value"];
var undef = qs["undefinedstring"];

ريجكس رمز الاختبار

var search = window.getParameterByName("q");
var value = window.getParameterByName("value");
var undef = window.getParameterByName("undefinedstring");

الاختبار في Firefox 4.0 x86 على Windows Server 2008 R2/7 x64

  • طريقة الانقسام : 144،780 ± 2.17٪ أسرع
  • طريقة Regex : 13،891 ± 0.85٪ | 90 ٪ أبطأ
1244
BrunoLM

نسخة محسّنة من إجابة Artem Barger :

function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

لمزيد من المعلومات حول التحسين ، انظر: http://james.padolsey.com/javascript/bujs-1-getparameterbyname/

650
James

URLSearchParams

يدعم Firefox 44+ و Opera 36+ و Edge 17+ و Safari 10.3+ و Chrome 49+ URLSearchParams API:

هناك google-المقترحURLSearchParams polyfillللإصدارات المستقرة من IE.

لا يتم توحيده بواسطة W3C ، ولكنه مستوى معيشة بواسطة WhatWG .

يمكنك استخدامه في الموقع ، ولكن يلزمك إزالة علامة الاستفهام ? (على سبيل المثال ، مع .slice(1)):

let params = new URLSearchParams(location.search);

أو

let params = (new URL(location)).searchParams;

أو بالطبع على أي عنوان URL:

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search);

يمكنك الحصول على params أيضًا باستخدام خاصية .searchParams المختصرة على كائن URL ، مثل هذا:

let params = new URL('https://example.com?foo=1&bar=2').searchParams;
params.get('foo'); // "1"
params.get('bar'); // "2" 

يمكنك قراءة/تعيين المعلمات من خلال get(KEY) ، set(KEY, VALUE) ، append(KEY, VALUE) API. يمكنك أيضًا تكرار كل القيم for (let p of params) {}.

A تنفيذ المرجع و صفحة عينة متاحة للتدقيق والاختبار.

541
Paul Sweatte

مجرد توصية أخرى. يسمح المكون الإضافيPurlباسترداد جميع أجزاء URL ، بما في ذلك المرساة والمضيف وما إلى ذلك.

يمكن استخدامه مع أو بدون مسج.

الاستخدام بسيط للغاية وبارد:

var url = $.url('http://allmarkedup.com/folder/dir/index.html?item=value'); // jQuery version
var url = purl('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.attr('protocol'); // returns 'http'
url.attr('path'); // returns '/folder/dir/index.html'

ومع ذلك ، اعتبارًا من 11 نوفمبر 2014 ، لم يعد يتم الحفاظ على Purl ويوصي المؤلف باستخدام URI.js بدلاً من ذلك. يختلف المكون الإضافي jQuery لأنه يركز على العناصر - للاستخدام مع السلاسل ، استخدم فقط URI مباشرة ، مع أو بدون jQuery. يبدو رمز مشابه على هذا النحو ، مستندات أكمل هنا :

var url = new URI('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.protocol(); // returns 'http'
url.path(); // returns '/folder/dir/index.html'
398
AlfaTeK

(tl؛ dr

حل سريع ، حل كامل ، والذي يعالج مفاتيح متعددة القيم و أحرف مشفرة .

var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {var s = item.split("="), k = s[0], v = s[1] && decodeURIComponent(s[1]); (qd[k] = qd[k] || []).Push(v)})

//using ES6   (23 characters cooler)
var qd = {};
if (location.search) location.search.substr(1).split`&`.forEach(item => {let [k,v] = item.split`=`; v = v && decodeURIComponent(v); (qd[k] = qd[k] || []).Push(v)})
var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {
    var s = item.split("="),
        k = s[0],
        v = s[1] && decodeURIComponent(s[1]); //  null-coalescing / short-circuit
    //(k in qd) ? qd[k].Push(v) : qd[k] = [v]
    (qd[k] = qd[k] || []).Push(v) // null-coalescing / short-circuit
})

ما هو كل هذا الرمز ...
"null-الائتلاف" ، تقييم الدائرة القصيرة
ES6 مهام التدمير ، وظائف السهم ، سلاسل القوالب

"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]

> qd.a[1]    // "5"
> qd["a"][1] // "5"



اقرأ المزيد ... حول حل Vanilla JavaScript.

للوصول إلى أجزاء مختلفة من عنوان URL ، استخدم location.(search|hash)

أسهل (دمية) الحل

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
  • مقابض مفاتيح فارغة بشكل صحيح.
  • تجاوزات مفاتيح متعددة مع الاخير وجدت القيمة.
"?a=1&b=0&c=3&d&e&a=5"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: undefined

مفاتيح متعددة القيمة

التحقق من مفتاح بسيط (item in dict) ? dict.item.Push(val) : dict.item = [val]

var qd = {};
location.search.substr(1).split("&").forEach(function(item) {(item.split("=")[0] in qd) ? qd[item.split("=")[0]].Push(item.split("=")[1]) : qd[item.split("=")[0]] = [item.split("=")[1]]})
  • يعود الآن المصفوفات في حين أن.
  • قيم الوصول بواسطة qd.key[index] أو qd[key][index]
> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]

الشخصيات المشفرة؟

استخدم decodeURIComponent() للجزء الثاني أو كليهما الانقسامات.

var qd = {};
location.search.substr(1).split("&").forEach(function(item) {var k = item.split("=")[0], v = decodeURIComponent(item.split("=")[1]); (k in qd) ? qd[k].Push(v) : qd[k] = [v]})
"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: ["undefined"]  // decodeURIComponent(undefined) returns "undefined" !!!*
e: ["undefined", "http://w3schools.com/my test.asp?name=ståle&car=saab"]



من التعليقات

* !!! يرجى ملاحظة أن decodeURIComponent(undefined) تُرجع السلسلة "undefined". يكمن الحل في الاستخدام البسيط لـ && ، مما يضمن عدم استدعاء decodeURIComponent() لقيم غير محددة. ((راجع "الحل الكامل" في الأعلى.)

v = v && decodeURIComponent(v);


إذا كان querystring فارغًا (location.search == "") ، تكون النتيجة مضللة إلى حد ما qd == {"": undefined}. يقترح التحقق من querystring قبل بدء عملية تحليل likeo:

if (location.search) location.search.substr(1).split("&").forEach(...)
231
Qwerty

يحتوي Roshambo على snipplr.com على برنامج نصي بسيط لتحقيق ذلك الموضح فياحصل على معلمات URL مع jQuery | تحسين. باستخدام البرنامج النصي الخاص بك ، يمكنك أيضًا سحب المعلمات التي تريدها بسهولة.

ها هي ذا جيست:

$.urlParam = function(name, url) {
    if (!url) {
     url = window.location.href;
    }
    var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(url);
    if (!results) { 
        return undefined;
    }
    return results[1] || undefined;
}

ثم فقط احصل على المعلمات الخاصة بك من سلسلة الاستعلام.

لذلك إذا كانت سلسلة URL/الاستعلام xyz.com/index.html?lang=de.

فقط اتصل بـ var langval = $.urlParam('lang'); ، وقد حصلت عليها.

لدى UZBEKJON منشورًا رائعًا على المدونة في هذا أيضًا ،احصل على معلمات وقيم URL باستخدام jQuery.

216
brandonjp

إذا كنت تستخدم jQuery ، فيمكنك استخدام مكتبة ، مثل jQuery BBQ: Back Button & Query Library .

... يوفر jQuery BBQ طريقة .deparam() كاملة ، إلى جانب كل من إدارة حالة التجزئة ، وتحليل سلسلة/جزء الاستعلام ودمج الأدوات المساعدة.

تحرير: إضافة Deparam مثال:

 var DeparamExample = function() {
            var params = $.deparam.querystring();

            //nameofparam is the name of a param from url
            //code below will get param if ajax refresh with hash
            if (typeof params.nameofparam == 'undefined') {
                params = jQuery.deparam.fragment(window.location.href);
            }
            
            if (typeof params.nameofparam != 'undefined') {
                var paramValue = params.nameofparam.toString();
                  
            }
        };

إذا كنت تريد فقط استخدام جافا سكريبت عادي ، يمكنك استخدام ...

var getParamValue = (function() {
    var params;
    var resetParams = function() {
            var query = window.location.search;
            var regex = /[?&;](.+?)=([^&;]+)/g;
            var match;

            params = {};

            if (query) {
                while (match = regex.exec(query)) {
                    params[match[1]] = decodeURIComponent(match[2]);
                }
            }    
        };

    window.addEventListener
    && window.addEventListener('popstate', resetParams);

    resetParams();

    return function(param) {
        return params.hasOwnProperty(param) ? params[param] : null;
    }

})();​

نظرًا لواجهة برمجة تطبيقات HTML History الجديدة وتحديداً history.pushState() و history.replaceState() ، يمكن تغيير عنوان URL الذي سيؤدي إلى إبطال ذاكرة التخزين المؤقت للمعلمات وقيمها.

سيقوم هذا الإصدار بتحديث ذاكرة التخزين المؤقت الداخلية للمعلمات في كل مرة يتغير فيها السجل.

165
alex

مجرد استخدام اثنين الإنشقاقات :

function get(n) {
    var half = location.search.split(n + '=')[1];
    return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}

كنت أقرأ كل الإجابات السابقة والأكثر اكتمالا. لكنني أعتقد أن هذه هي أبسط وأسرع طريقة. يمكنك التحقق من هذا jsPerf المعيار

لحل المشكلة في تعليق Rup ، أضف انقسامًا شرطيًا عن طريق تغيير السطر الأول إلى الاثنين أدناه. لكن الدقة المطلقة تعني أنها الآن أبطأ من regexp (راجع jsPerf ).

function get(n) {
    var half = location.search.split('&' + n + '=')[1];
    if (!half) half = location.search.split('?' + n + '=')[1];
    return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}

لذلك إذا كنت تعلم أنك لن تصطدم بقضية Rup المقابلة ، فإن هذا سيفوز. خلاف ذلك ، regexp.

أو إذا كنت تتحكم في الاستعلام وأستطيع أن تضمن أن القيمة التي تحاول الحصول عليها لن تتضمن أبدًا أي أحرف مشفرة لعنوان URL (سيكون وجود هذه الأحرف في قيمة فكرة سيئة) - يمكنك استخدام ما يلي إصدار أكثر بساطة وقراءة من الخيار الأول:

    function getQueryStringValueByName(name) {
        var queryStringFromStartOfValue = location.search.split(name + '=')[1];
         return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split('&')[0] : null;
99
Martin Borthiry

وإليك طعنة في جعل حل Andy E ممتازًا في مكون إضافي مسج كامل:

;(function ($) {
    $.extend({      
        getQueryString: function (name) {           
            function parseParams() {
                var params = {},
                    e,
                    a = /\+/g,  // Regex for replacing addition symbol with a space
                    r = /([^&=]+)=?([^&]*)/g,
                    d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
                    q = window.location.search.substring(1);

                while (e = r.exec(q))
                    params[d(e[1])] = d(e[2]);

                return params;
            }

            if (!this.queryStringParams)
                this.queryStringParams = parseParams(); 

            return this.queryStringParams[name];
        }
    });
})(jQuery);

بناء الجملة هو:

var someVar = $.getQueryString('myParam');

أفضل ما في العالمين!

94
Ryan Phelan

إذا كنت تقوم بمعالجة URL أكثر من مجرد تحليل الاستعلام ، فقد تجد URI.js مفيدة. إنها مكتبة لمعالجة عناوين URL - وتأتي مع جميع الأجراس وصفارات. (آسف للدعاية الذاتية هنا)

لتحويل querystring الخاص بك إلى خريطة:

var data = URI('?foo=bar&bar=baz&foo=world').query(true);
data == {
  "foo": ["bar", "world"],
  "bar": "baz"
}

(URI.js أيضًا "إصلاحات" طلبات البحث السيئة مثل ?&foo&&bar=baz& إلى ?foo&bar=baz)

76
rodneyrehm

أنا أحب حل ريان فيلان . لكنني لا أرى أي نقطة لتمديد مسج لذلك؟ لا يوجد أي استخدام لوظيفة jQuery.

من ناحية أخرى ، أحب الوظيفة المدمجة في Google Chrome: window.location.getParameter.

فلماذا لا تستخدم هذا؟ حسنًا ، المتصفحات الأخرى لا تملك. لذلك دعونا ننشئ هذه الوظيفة إذا لم تكن موجودة:

if (!window.location.getParameter ) {
  window.location.getParameter = function(key) {
    function parseParams() {
        var params = {},
            e,
            a = /\+/g,  // Regex for replacing addition symbol with a space
            r = /([^&=]+)=?([^&]*)/g,
            d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
            q = window.location.search.substring(1);

        while (e = r.exec(q))
            params[d(e[1])] = d(e[2]);

        return params;
    }

    if (!this.queryStringParams)
        this.queryStringParams = parseParams(); 

    return this.queryStringParams[key];
  };
}

هذه الوظيفة هي أكثر أو أقل من Ryan Phelan ، لكنها مغلفة بشكل مختلف: اسم واضح ولا تبعيات لمكتبات جافا سكريبت الأخرى. المزيد عن هذه الوظيفة على مدونتي .

59
Anatoly Mironov

إليك طريقة سريعة للحصول على كائن مشابه لـ PHP $ _GET array:

function get_query(){
    var url = location.search;
    var qs = url.substring(url.indexOf('?') + 1).split('&');
    for(var i = 0, result = {}; i < qs.length; i++){
        qs[i] = qs[i].split('=');
        result[qs[i][0]] = decodeURIComponent(qs[i][1]);
    }
    return result;
}

الاستعمال:

var $_GET = get_query();

بالنسبة لسلسلة الاستعلام x=5&y&z=hello&x=6 ، يُرجع هذا الكائن:

{
  x: "6",
  y: undefined,
  z: "hello"
}
53
Paulpro

اجعل الأمر بسيطًا في شفرة JavaScript العادية:

function qs(key) {
    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[key];
}

نسميها من أي مكان في رمز JavaScript:

var result = qs('someKey');
52
Sagiv Ofek

هذه كلها إجابات رائعة ، لكنني كنت بحاجة إلى شيء أكثر قوة ، وأعتقد أنك قد ترغب في الحصول على ما قمت بإنشائه.

إنها طريقة مكتبة بسيطة تقوم بتشريح معلمات URL ومعالجتها. يحتوي الأسلوب الثابت على الطرق الفرعية التالية التي يمكن استدعاؤها على عنوان URL الخاص بالموضوع:

  • getHost
  • getPath
  • getHash
  • setHash
  • getParams
  • getQuery
  • setParam
  • getParam
  • hasParam
  • removeParam

مثال:

URLParser(url).getParam('myparam1')

var url = "http://www.test.com/folder/mypage.html?myparam1=1&myparam2=2#something";

function URLParser(u){
    var path="",query="",hash="",params;
    if(u.indexOf("#") > 0){
        hash = u.substr(u.indexOf("#") + 1);
        u = u.substr(0 , u.indexOf("#"));
    }
    if(u.indexOf("?") > 0){
        path = u.substr(0 , u.indexOf("?"));
        query = u.substr(u.indexOf("?") + 1);
        params= query.split('&');
    }else
        path = u;
    return {
        getHost: function(){
            var hostexp = /\/\/([\w.-]*)/;
            var match = hostexp.exec(path);
            if (match != null && match.length > 1)
                return match[1];
            return "";
        },
        getPath: function(){
            var pathexp = /\/\/[\w.-]*(?:\/([^?]*))/;
            var match = pathexp.exec(path);
            if (match != null && match.length > 1)
                return match[1];
            return "";
        },
        getHash: function(){
            return hash;
        },
        getParams: function(){
            return params
        },
        getQuery: function(){
            return query;
        },
        setHash: function(value){
            if(query.length > 0)
                query = "?" + query;
            if(value.length > 0)
                query = query + "#" + value;
            return path + query;
        },
        setParam: function(name, value){
            if(!params){
                params= new Array();
            }
            params.Push(name + '=' + value);
            for (var i = 0; i < params.length; i++) {
                if(query.length > 0)
                    query += "&";
                query += params[i];
            }
            if(query.length > 0)
                query = "?" + query;
            if(hash.length > 0)
                query = query + "#" + hash;
            return path + query;
        },
        getParam: function(name){
            if(params){
                for (var i = 0; i < params.length; i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) == name)
                        return decodeURIComponent(pair[1]);
                }
            }
            console.log('Query variable %s not found', name);
        },
        hasParam: function(name){
            if(params){
                for (var i = 0; i < params.length; i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) == name)
                        return true;
                }
            }
            console.log('Query variable %s not found', name);
        },
        removeParam: function(name){
            query = "";
            if(params){
                var newparams = new Array();
                for (var i = 0;i < params.length;i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) != name)
                          newparams .Push(params[i]);
                }
                params = newparams;
                for (var i = 0; i < params.length; i++) {
                    if(query.length > 0)
                        query += "&";
                    query += params[i];
                }
            }
            if(query.length > 0)
                query = "?" + query;
            if(hash.length > 0)
                query = query + "#" + hash;
            return path + query;
        },
    }
}


document.write("Host: " + URLParser(url).getHost() + '<br>');
document.write("Path: " + URLParser(url).getPath() + '<br>');
document.write("Query: " + URLParser(url).getQuery() + '<br>');
document.write("Hash: " + URLParser(url).getHash() + '<br>');
document.write("Params Array: " + URLParser(url).getParams() + '<br>');
document.write("Param: " + URLParser(url).getParam('myparam1') + '<br>');
document.write("Has Param: " + URLParser(url).hasParam('myparam1') + '<br>');

document.write(url + '<br>');

// Remove the first parameter
url = URLParser(url).removeParam('myparam1');
document.write(url + ' - Remove the first parameter<br>');

// Add a third parameter
url = URLParser(url).setParam('myparam3',3);
document.write(url + ' - Add a third parameter<br>');

// Remove the second parameter
url = URLParser(url).removeParam('myparam2');
document.write(url + ' - Remove the second parameter<br>');

// Add a hash
url = URLParser(url).setHash('newhash');
document.write(url + ' - Set Hash<br>');

// Remove the last parameter
url = URLParser(url).removeParam('myparam3');
document.write(url + ' - Remove the last parameter<br>');

// Remove a parameter that doesn't exist
url = URLParser(url).removeParam('myparam3');
document.write(url + ' - Remove a parameter that doesn\"t exist<br>');
46
Bernesto

من MDN :

function loadPageVar (sVar) {
  return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}

alert(loadPageVar("name"));
43
orip

أستخدم التعبيرات العادية كثيرًا ، لكن ليس لذلك.

يبدو من الأسهل والأكثر كفاءة بالنسبة لي قراءة سلسلة الاستعلام مرة واحدة في طلبي ، وبناء كائن من جميع أزواج المفاتيح/القيمة مثل:

var search = function() {
  var s = window.location.search.substr(1),
    p = s.split(/\&/), l = p.length, kv, r = {};
  if (l === 0) {return false;}
  while (l--) {
    kv = p[l].split(/\=/);
    r[kv[0]] = decodeURIComponent(kv[1] || '') || true;
  }
  return r;
}();

بالنسبة لعنوان URL مثل http://domain.com?param1=val1&param2=val2 ، يمكنك الحصول على قيمتها لاحقًا في الكود الخاص بك كـ search.param1 و search.param2.

39
Mic

رمز الجولف:

var a = location.search&&location.search.substr(1).replace(/\+/gi," ").split("&");
for (var i in a) {
    var s = a[i].split("=");
    a[i]  = a[unescape(s[0])] = unescape(s[1]);
}

عرضه!

for (i in a) {
    document.write(i + ":" + a[i] + "<br/>");   
};

على جهاز Mac: يعرض test.htm?i=can&has=cheezburger

0:can
1:cheezburger
i:can
has:cheezburger
39
shanimal

طريقة Roshambo jQuery لم تكن تهتم بفك شفرة عنوان URL

http://snipplr.com/view/26662/get-url-parameters-with-jquery--improved/

فقط أضيفت تلك القدرة أيضًا أثناء الإضافة في بيان الإرجاع

return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;

يمكنك الآن العثور على Gist المحدّث:

$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (!results) { return 0; }
return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;
}
38
Mohammad Arif
function GET() {
        var data = [];
        for(x = 0; x < arguments.length; ++x)
            data.Push(location.href.match(new RegExp("/\?".concat(arguments[x],"=","([^\n&]*)")))[1])
                return data;
    }


example:
data = GET("id","name","foo");
query string : ?id=3&name=jet&foo=b
returns:
    data[0] // 3
    data[1] // jet
    data[2] // b
or
    alert(GET("id")[0]) // return 3
38
Jet

أحب هذا واحد (مأخوذ من jquery-how to.blogspot.co.uk):

// get an array with all querystring values
// example: var valor = getUrlVars()["valor"];
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;
}

يعمل عظيم بالنسبة لي.

36
Tomamais

إليك التعديل الذي أدخلته على هذه الإجابة الممتازة - مع إمكانية إضافية لتحليل سلاسل الاستعلام باستخدام مفاتيح بدون قيم.

var url = 'http://sb.com/reg/step1?param';
var qs = (function(a) {
    if (a == "") return {};
    var b = {};
    for (var i = 0; i < a.length; ++i) {
        var p=a[i].split('=', 2);
        if (p[1]) p[1] = decodeURIComponent(p[1].replace(/\+/g, " "));
        b[p[0]] = p[1];
    }
    return b;
})((url.split('?'))[1].split('&'));

مهم! المعلمة لهذه الوظيفة في السطر الأخير مختلفة. إنه مجرد مثال على الطريقة التي يمكن بها تمرير عنوان URL التعسفي إليه. يمكنك استخدام السطر الأخير من إجابة Bruno لتحليل عنوان URL الحالي.

فما الذي تغير بالضبط؟ مع عنوان url http://sb.com/reg/step1?param= ستكون النتائج كما هي. ولكن باستخدام عنوان url http://sb.com/reg/step1?param ، يعرض حل Bruno كائنًا بدون مفاتيح ، بينما ترجع لي كائنًا به قيمة param و undefined.

36
skaurus

كنت بحاجة إلى كائن من سلسلة الاستعلام ، وأنا أكره الكثير من التعليمات البرمجية. قد لا يكون الأكثر قوة في الكون ، لكنه مجرد بضعة أسطر من التعليمات البرمجية.

var q = {};
location.href.split('?')[1].split('&').forEach(function(i){
    q[i.split('=')[0]]=i.split('=')[1];
});

سيتم إنشاء عنوان URL مثل this.htm?hello=world&foo=bar:

{hello:'world', foo:'bar'}
34
tim

إليك إصدارًا موسعًا من الإصدار "مرتبطة بسلسلة استعلام نمط الصفيف" المرتبطة بـ Andy E. إصلاح الخلل (?key=1&key[]=2&key[]=3 ؛ 1 المفقود واستبداله بـ [2,3]) ، وإجراء بعض التحسينات الطفيفة في الأداء (إعادة فك تشفير القيم ، وإعادة حساب "[" الموضع ، وما إلى ذلك) وإضافة عدد من التحسينات (وظيفية ، ودعم ?key=1&key=2 ، دعم ; المحددات). تركت المتغيرات قصيرة بشكل مزعج ، لكنني أضافت تعليقات كثيرة لجعلها قابلة للقراءة (أوه ، وأعدت استخدام v في الوظائف المحلية ، آسف إذا كان ذلك مربكًا ؛).

سوف يتعامل مع الاستفسار التالي ...

؟ اختبار = مرحبا والشخص = neek وشخص [] = جيف وشخص [] = جيم وشخص [اضافية] = جون وtest3 وnocache = 1398914891264

... تحويله إلى كائن يشبه ...

{
    "test": "Hello",
    "person": {
        "0": "neek",
        "1": "jeff",
        "2": "jim",
        "length": 3,
        "extra": "john"
    },
    "test3": "",
    "nocache": "1398914891264"
}

كما ترى أعلاه ، يعالج هذا الإصدار بعضًا من المصفوفات "المشوهة" ، أي - person=neek&person[]=jeff&person[]=jim أو person=neek&person=jeff&person=jim لأن المفتاح قابل للتعريف وصحيح (على الأقل في dotNet's NameValueCollection.Add ):

إذا كان المفتاح المحدد موجود بالفعل في مثيل NameValueCollection الهدف ، تتم إضافة القيمة المحددة إلى قائمة القيم المفصولة بفواصل الموجودة في النموذج "value1 ، value2 ، value3".

يبدو هيئة المحلفين خارج إلى حد ما على مفاتيح متكررة لأنه لا يوجد المواصفات. في هذه الحالة ، يتم تخزين مفاتيح متعددة كصفيف (وهمية). ولكن لاحظ أن I لا قيم العملية بناءً على الفواصل في المصفوفات.

الكود:

getQueryStringKey = function(key) {
    return getQueryStringAsObject()[key];
};


getQueryStringAsObject = function() {
    var b, cv, e, k, ma, sk, v, r = {},
        d = function (v) { return decodeURIComponent(v).replace(/\+/g, " "); }, //# d(ecode) the v(alue)
        q = window.location.search.substring(1), //# suggested: q = decodeURIComponent(window.location.search.substring(1)),
        s = /([^&;=]+)=?([^&;]*)/g //# original regex that does not allow for ; as a delimiter:   /([^&=]+)=?([^&]*)/g
    ;

    //# ma(make array) out of the v(alue)
    ma = function(v) {
        //# If the passed v(alue) hasn't been setup as an object
        if (typeof v != "object") {
            //# Grab the cv(current value) then setup the v(alue) as an object
            cv = v;
            v = {};
            v.length = 0;

            //# If there was a cv(current value), .Push it into the new v(alue)'s array
            //#     NOTE: This may or may not be 100% logical to do... but it's better than loosing the original value
            if (cv) { Array.prototype.Push.call(v, cv); }
        }
        return v;
    };

    //# While we still have key-value e(ntries) from the q(uerystring) via the s(earch regex)...
    while (e = s.exec(q)) { //# while((e = s.exec(q)) !== null) {
        //# Collect the open b(racket) location (if any) then set the d(ecoded) v(alue) from the above split key-value e(ntry) 
        b = e[1].indexOf("[");
        v = d(e[2]);

        //# As long as this is NOT a hash[]-style key-value e(ntry)
        if (b < 0) { //# b == "-1"
            //# d(ecode) the simple k(ey)
            k = d(e[1]);

            //# If the k(ey) already exists
            if (r[k]) {
                //# ma(make array) out of the k(ey) then .Push the v(alue) into the k(ey)'s array in the r(eturn value)
                r[k] = ma(r[k]);
                Array.prototype.Push.call(r[k], v);
            }
            //# Else this is a new k(ey), so just add the k(ey)/v(alue) into the r(eturn value)
            else {
                r[k] = v;
            }
        }
        //# Else we've got ourselves a hash[]-style key-value e(ntry) 
        else {
            //# Collect the d(ecoded) k(ey) and the d(ecoded) sk(sub-key) based on the b(racket) locations
            k = d(e[1].slice(0, b));
            sk = d(e[1].slice(b + 1, e[1].indexOf("]", b)));

            //# ma(make array) out of the k(ey) 
            r[k] = ma(r[k]);

            //# If we have a sk(sub-key), plug the v(alue) into it
            if (sk) { r[k][sk] = v; }
            //# Else .Push the v(alue) into the k(ey)'s array
            else { Array.prototype.Push.call(r[k], v); }
        }
    }

    //# Return the r(eturn value)
    return r;
};
31
Campbeln

هذه وظيفة قمت بإنشائها منذ فترة وأنا سعيد جدًا بها. أنها ليست حساسة لحالة الأحرف - وهو مفيد. أيضًا ، إذا لم يكن QS المطلوب موجودًا ، فسوف يُرجع سلسلة فارغة فقط.

أنا استخدم نسخة مضغوطة من هذا. أقوم بنشر غير مضغوط لأنواع المبتدئين لشرح ما يحدث بشكل أفضل.

أنا متأكد من أنه يمكن تحسين ذلك أو القيام به بطريقة مختلفة للعمل بشكل أسرع ، لكنه دائمًا ما يكون رائعًا لما أحتاج إليه.

استمتع.

function getQSP(sName, sURL) {
    var theItmToRtn = "";
    var theSrchStrg = location.search;
    if (sURL) theSrchStrg = sURL;
    var sOrig = theSrchStrg;
    theSrchStrg = theSrchStrg.toUpperCase();
    sName = sName.toUpperCase();
    theSrchStrg = theSrchStrg.replace("?", "&") theSrchStrg = theSrchStrg + "&";
    var theSrchToken = "&" + sName + "=";
    if (theSrchStrg.indexOf(theSrchToken) != -1) {
        var theSrchTokenLth = theSrchToken.length;
        var theSrchTokenLocStart = theSrchStrg.indexOf(theSrchToken) + theSrchTokenLth;
        var theLocOfNextAndSign = theSrchStrg.indexOf("&", theSrchTokenLocStart);
        theItmToRtn = unescape(sOrig.substring(theSrchTokenLocStart, theLocOfNextAndSign));
    }
    return unescape(theItmToRtn);
}
31
Clint

لقد أصدرنا للتو arg.js ، مشروعًا يهدف إلى حل هذه المشكلة نهائيًا. كان الأمر تقليديًا صعبًا للغاية ، لكن يمكنك الآن القيام بما يلي:

var name = Arg.get("name");

أو الحصول على الكثير كله:

var params = Arg.all();

وإذا كنت تهتم بالفرق بين ?query=true و #hash=true ، فيمكنك استخدام طريقتي Arg.query() و Arg.hash().

27
Mat Ryer

المشكلة في الإجابة العليا على هذا السؤال هي أنه لا يتم دعم المعلمات بعد # ، ولكن في بعض الأحيان تكون هناك حاجة للحصول على هذه القيمة أيضًا.

لقد عدلت الإجابة للسماح لها بتحليل سلسلة استعلام كاملة بعلامة التجزئة أيضًا:

var getQueryStringData = function(name) {
    var result = null;
    var regexS = "[\\?&#]" + name + "=([^&#]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec('?' + window.location.href.split('?')[1]);
    if (results != null) {
        result = decodeURIComponent(results[1].replace(/\+/g, " "));
    }
    return result;
};
27
Ph0en1x
function GetQueryStringParams(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');

    for (var i = 0; i < sURLVariables.length; i++)
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam)
        {
            return sParameterName[1];
        }
    }
}​

وهذه هي الطريقة التي يمكنك استخدام هذه الوظيفة على افتراض أن URL هو

http://dummy.com/?stringtext=jquery&stringword=jquerybyexample

var tech = GetQueryStringParams('stringtext');
var blog = GetQueryStringParams('stringword');
25
gewel
http://someurl.com?key=value&keynovalue&keyemptyvalue=&&keynovalue=nowhasvalue#somehash
  • زوج المفتاح/القيمة العادي (?param=value)
  • مفاتيح بدون قيمة (?param: لا توجد علامة أو قيمة متساوية)
  • مفاتيح مع/قيمة فارغة (?param=: علامة المساواة ، ولكن لا توجد قيمة إلى يمين علامة المساواة)
  • المفاتيح المتكررة (?param=1&param=2)
  • يزيل مفاتيح فارغة (?&&: لا يوجد مفتاح أو قيمة)

الشفرة:

  • var queryString = window.location.search || '';
    var keyValPairs = [];
    var params      = {};
    queryString     = queryString.substr(1);
    
    if (queryString.length)
    {
       keyValPairs = queryString.split('&');
       for (pairNum in keyValPairs)
       {
          var key = keyValPairs[pairNum].split('=')[0];
          if (!key.length) continue;
          if (typeof params[key] === 'undefined')
             params[key] = [];
          params[key].Push(keyValPairs[pairNum].split('=')[1]);
       }
    }
    

كيف تتصل:

  • params['key'];  // returns an array of values (1..n)
    

انتاج:

  • key            ["value"]
    keyemptyvalue  [""]
    keynovalue     [undefined, "nowhasvalue"]
    
20
vol7ron

إذا كنت تستخدم Browserify ، يمكنك استخدام الوحدة النمطية url من Node.js:

var url = require('url');

url.parse('http://example.com/?bob=123', true).query;

// returns { "bob": "123" }

قراءة أخرى: URL Node.js v0.12.2 Manual & Documentation

EDIT: يمكنك استخدام واجهة URL ، والتي تم اعتمادها على نطاق واسع في جميع المتصفح الجديد تقريبًا ، وإذا كان سيتم تشغيل الكود على متصفح قديم ، يمكنك استخدام polyfill هذا . فيما يلي مثال على الكود حول كيفية استخدام واجهة URL للحصول على معلمات الاستعلام (تُعرف أيضًا باسم معلمات البحث)

const url = new URL('http://example.com/?bob=123');
url.searchParams.get('bob'); 

يمكنك أيضًا استخدام URLSearchParams لذلك ، إليك مثال من MDN للقيام بذلك باستخدام URLSearchParams:

var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);

//Iterate the search parameters.
for (let p of searchParams) {
  console.log(p);
}

searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"
20
nkh

لقد قمت بتطوير مكتبة صغيرة باستخدام التقنيات المذكورة هنا لإنشاء حل سهل الاستخدام ومتاعب لأي شخص ؛ ويمكن العثور عليها هنا:

https://github.com/Nijikokun/query-js

الاستخدام

إحضار معلمة/مفتاح محدد:

query.get('param');

باستخدام المنشئ لجلب الكائن بأكمله:

var storage = query.build();
console.log(storage.param);

وأكثر من ذلك بكثير ... تحقق من رابط جيثب لمزيد من الأمثلة.

الميزات

  1. التخزين المؤقت على حد سواء فك التشفير والمعلمات
  2. يدعم سلاسل استعلام التجزئة #hello?page=3
  3. يدعم تمرير استعلامات مخصصة
  4. يدعم صفيف/معلمات الكائن user[]="jim"&user[]="bob"
  5. يدعم إدارة فارغة &&
  6. يدعم معلمات التعريف بدون قيم name&hello="world"
  7. يدعم المعلمات المتكررة param=1&param=2
  8. مصدر نظيف وصغير وقابل للقراءة 4kb
  9. AMD ، يتطلب ، دعم العقدة
20
Nijikokun

بطانة واحدة للحصول على الاستعلام:

var value = location.search.match(new RegExp(key + "=(.*?)($|\&)", "i"))[1];
20
Anoop

طريقة مسج خفيفة الوزن للغاية:

var qs = window.location.search.replace('?','').split('&'),
    request = {};
$.each(qs, function(i,v) {
    var initial, pair = v.split('=');
    if(initial = request[pair[0]]){
        if(!$.isArray(initial)) {
            request[pair[0]] = [initial]
        }
        request[pair[0]].Push(pair[1]);
    } else {
        request[pair[0]] = pair[1];
    }
    return;
});
console.log(request);

وللتنبيه ، على سبيل المثال؟ ف

alert(request.q)
17
Roi

يوجد هنا نسخة من سلسلة تحليل رمز الاستعلام على GitHub .

إنها "مسبوقة" بـ jquery. * ، لكن وظيفة التحليل نفسها لا تستخدم jQuery. إنه سريع جدًا ، لكنه لا يزال مفتوحًا لبعض التحسينات البسيطة في الأداء.

كما أنه يدعم ترميز القوائم والجداول في عنوان URL ، مثل:

arr[]=10&arr[]=20&arr[]=100

أو

hash[key1]=hello&hash[key2]=moto&a=How%20are%20you

jQuery.toQueryParams = function(str, separator) {
    separator = separator || '&'
    var obj = {}
    if (str.length == 0)
        return obj
    var c = str.substr(0,1)
    var s = c=='?' || c=='#'  ? str.substr(1) : str; 

    var a = s.split(separator)
    for (var i=0; i<a.length; i++) {
        var p = a[i].indexOf('=')
        if (p < 0) {
            obj[a[i]] = ''
            continue
        }
        var k = decodeURIComponent(a[i].substr(0,p)),
            v = decodeURIComponent(a[i].substr(p+1))

        var bps = k.indexOf('[')
        if (bps < 0) {
            obj[k] = v
            continue;
        } 

        var bpe = k.substr(bps+1).indexOf(']')
        if (bpe < 0) {
            obj[k] = v
            continue;
        }

        var bpv = k.substr(bps+1, bps+bpe-1)
        var k = k.substr(0,bps)
        if (bpv.length <= 0) {
            if (typeof(obj[k]) != 'object') obj[k] = []
            obj[k].Push(v)
        } else {
            if (typeof(obj[k]) != 'object') obj[k] = {}
            obj[k][bpv] = v
        }
    }
    return obj;

}
16
Vadim

إليك ما أستخدمه:

/**
 * Examples:
 * getUrlParams()['myparam']    // url defaults to the current page
 * getUrlParams(url)['myparam'] // url can be just a query string
 *
 * Results of calling `getUrlParams(url)['myparam']` with various urls:
 * example.com                               (undefined)
 * example.com?                              (undefined)
 * example.com?myparam                       (empty string)
 * example.com?myparam=                      (empty string)
 * example.com?myparam=0                     (the string '0')
 * example.com?myparam=0&myparam=override    (the string 'override')
 *
 * Origin: http://stackoverflow.com/a/23946023/2407309
 */
function getUrlParams (url) {
    var urlParams = {} // return value
    var queryString = getQueryString()
    if (queryString) {
        var keyValuePairs = queryString.split('&')
        for (var i = 0; i < keyValuePairs.length; i++) {
            var keyValuePair = keyValuePairs[i].split('=')
            var paramName = keyValuePair[0]
            var paramValue = keyValuePair[1] || ''
            urlParams[paramName] = decodeURIComponent(paramValue.replace(/\+/g, ' '))
        }
    }
    return urlParams // functions below
    function getQueryString () {
        var reducedUrl = url || window.location.search
        reducedUrl = reducedUrl.split('#')[0] // Discard fragment identifier.
        var queryString = reducedUrl.split('?')[1]
        if (!queryString) {
            if (reducedUrl.search('=') !== false) { // URL is a query string.
                queryString = reducedUrl
            }
        }
        return queryString
    } // getQueryString
} // getUrlParams

إرجاع "تجاوز" بدلاً من "0" في الحالة الأخيرة يجعله متوافقًا مع PHP. يعمل في IE7.

12
Vladimir Kornea

أفضل استخدام split() بدلاً من Regex لهذه العملية:

function getUrlParams() {
    var result = {};
    var params = (window.location.search.split('?')[1] || '').split('&');
    for(var param in params) {
        if (params.hasOwnProperty(param)) {
            var paramParts = params[param].split('=');
            result[paramParts[0]] = decodeURIComponent(paramParts[1] || "");
        }
    }
    return result;
}
11
Eneko Alonso

بالنسبة لأولئك الذين يريدون طريقة قصيرة (مع قيود):

location.search.split('myParameter=')[1]
10
George

الحصول على جميع المعلمات querystring بما في ذلك قيم خانة الاختيار (صفائف).

النظر في الاستخدام الصحيح والعادي لمعلمات GET ، فإن الأشياء التي أرى أنها مفقودة ، في معظم الوظائف ، هي دعم المصفوفات وإزالة بيانات التجزئة.

لذلك كتبت هذه الوظيفة:

function qs(a){
 if(!a)return {};
 a=a.split('#')[0].split('&');
 var b=a.length,c={},d,k,v;
 while(b--){
  d=a[b].split('=');
  k=d[0].replace('[]',''),v=decodeURIComponent(d[1]||'');
  c[k]?typeof c[k]==='string'?(c[k]=[v,c[k]]):(c[k].unshift(v)):c[k]=v;
 }
 return c
}

باستخدام عوامل التشغيل المختصرة & حلقة - ، يجب أن يكون الأداء جيدًا للغاية.

الدعم:

  1. القيم الفارغة (مفتاح =/مفتاح)
  2. قيمة المفتاح (مفتاح = قيمة)
  3. المصفوفات (مفتاح [] = القيمة)
  4. تجزئة (علامة التجزئة مفصولة)

ملاحظات:

لا يدعم صفائف الكائنات (المفتاح [مفتاح] = القيمة)

إذا كانت المساحة + تظل +.

أضف .replace(/\+/g, " ") إذا كنت بحاجة.

الاستخدام:

qs('array[]=1&array[]=2&key=value&empty=&empty2#hash')

العائد:

{
    "empty": "",
    "key": "value",
    "array": [
        "1",
        "2"
    ]
}

العرض التوضيحي:

http://jsfiddle.net/ZQMrt/1/

معلومات

إذا كنت لا تفهم شيئًا ما أو لا يمكنك قراءة الوظيفة ، اسأل فقط. أنا سعيد لشرح ما فعلته هنا.

إذا كنت تعتقد أن الوظيفة غير قابلة للقراءة وغير قابلة للإصلاح ، يسعدني إعادة كتابة الوظيفة نيابة عنك ، لكن ضع في اعتبارك أن مشغلي الاختزال والبيتكوست يكونون دائمًا أسرع من بناء الجملة القياسي (ربما أقرأ عن الاختصارات ومشغّلات bitwise في ECMA-262 قم بحجز أو استخدم محرك البحث المفضل لديك. إعادة كتابة الكود في صيغة قياسية قابلة للقراءة تعني فقدان الأداء.

10
cocco

هذا واحد يعمل بشكل جيد

function getQuerystring(key) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == key) {
            return pair[1];
        }
    }
}

مأخوذة من هنا

9
IT ppl
function getUrlVar(key){
    var result = new RegExp(key + "=([^&]*)", "i").exec(window.location.search); 
    return result && unescape(result[1]) || ""; 
}

https://Gist.github.com/1771618

8
alkos333

تحول هذه الوظيفة عملية querystring إلى كائن يشبه JSON ، كما تتعامل مع معلمات أقل قيمة ومتعددة القيم:

"use strict";
function getQuerystringData(name) {
    var data = { };
    var parameters = window.location.search.substring(1).split("&");
    for (var i = 0, j = parameters.length; i < j; i++) {
        var parameter = parameters[i].split("=");
        var parameterName = decodeURIComponent(parameter[0]);
        var parameterValue = typeof parameter[1] === "undefined" ? parameter[1] : decodeURIComponent(parameter[1]);
        var dataType = typeof data[parameterName];
        if (dataType === "undefined") {
            data[parameterName] = parameterValue;
        } else if (dataType === "array") {
            data[parameterName].Push(parameterValue);
        } else {
            data[parameterName] = [data[parameterName]];
            data[parameterName].Push(parameterValue);
        }
    }
    return typeof name === "string" ? data[name] : data;
}

نقوم بإجراء فحص لـ undefined في parameter[1] لأن decodeURIComponent تُرجع السلسلة "غير معرّفة" إذا كان المتغير undefined ، وهذا خطأ.

الاستعمال:

"use strict";
var data = getQuerystringData();
var parameterValue = getQuerystringData("parameterName");
6
Albireo

جرب هذا:

String.prototype.getValueByKey = function(k){
    var p = new RegExp('\\b'+k+'\\b','gi');
    return this.search(p) != -1 ? decodeURIComponent(this.substr(this.search(p)+k.length+1).substr(0,this.substr(this.search(p)+k.length+1).search(/(&|;|$)/))) : "";
};

ثم اسميها هكذا:

if(location.search != "") location.search.getValueByKey("id");

يمكنك استخدام هذا لـ ملفات تعريف الارتباط أيضًا:

if(navigator.cookieEnabled) document.cookie.getValueByKey("username");

هذا يعمل فقط للسلاسل التي تحتوي على key=value[&|;|$]... لن تعمل على الكائنات/المصفوفات.

إذا كنت لا ترغب في استخدام String.prototype ... فقم بنقلها إلى دالة وتمرير السلسلة كوسيطة

6
user981090

لقد استخدمت هذا الرمز (JavaScript) للحصول على ما يتم تمريره عبر URL:

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

ثم لتعيين القيمة لمتغير ، عليك فقط تحديد المعلمة التي تريد الحصول عليها ، أي إذا كان عنوان URL هو example.com/?I=1&p=2&f=3

يمكنك القيام بذلك للحصول على القيم:

var getI = getUrlVars()["I"];
var getP = getUrlVars()["p"];
var getF = getUrlVars()["f"];

ثم القيم ستكون:

getI = 1, getP = 2 and getF = 3
6
user2579312

التعليمة البرمجية التالية ستقوم بإنشاء كائن له طريقتان:

  1. isKeyExist: تحقق من وجود معلمة معينة
  2. getValue: احصل على قيمة معلمة معينة.

var QSParam = new function() {
       var qsParm = {};
       var query = window.location.search.substring(1);
       var params = query.split('&');
       for (var i = 0; i < params.length; i++) {
           var pos = params[i].indexOf('=');
           if (pos > 0) {
               var key = params[i].substring(0, pos);
               var val = params[i].substring(pos + 1);
               qsParm[key] = val;
           }
       }
       this.isKeyExist = function(query){
           if(qsParm[query]){
               return true;
           }
           else{
              return false;
           }
       };
       this.getValue = function(query){
           if(qsParm[query])
           {
               return qsParm[query];
           }
           throw "URL does not contain query "+ query;
       }
};
6
Anoop

ترجع الدالة التالية إصدار كائن من queryString الخاص بك. يمكنك ببساطة كتابة obj.key1 و obj.key2 للوصول إلى قيم key1 و key2 في المعلمة.

function getQueryStringObject()
{
    var querystring = document.location.search.replace('?','').split( '&' );
    var objQueryString={};
    var key="",val="";
    if(typeof querystring == 'undefined')
    {
        return (typeof querystring);
    }
    for(i=0;i<querystring.length;i++)
    {
        key=querystring[i].split("=")[0];
        val=querystring[i].split("=")[1];
        objQueryString[key] = val;
    }
    return objQueryString;
}

واستخدام هذه الوظيفة يمكنك الكتابة

var obj= getQueryStringObject();
alert(obj.key1);
5
Imdad

وهنا بلدي تأخذ على هذا. تعمل هذه الوظيفة الأولى على فك شفرة سلسلة عناوين URL في كائن من أزواج الاسم/القيمة:

url_args_decode = function (url) {
  var args_enc, el, i, nameval, ret;
  ret = {};
  // use the DOM to parse the URL via an 'a' element
  el = document.createElement("a");
  el.href = url;
  // strip off initial ? on search and split
  args_enc = el.search.substring(1).split('&');
  for (i = 0; i < args_enc.length; i++) {
    // convert + into space, split on =, and then decode 
    args_enc[i].replace(/\+/g, ' ');
    nameval = args_enc[i].split('=', 2);
    ret[decodeURIComponent(nameval[0])]=decodeURIComponent(nameval[1]);
  }
  return ret;
};

وكعلاوة إضافية ، إذا قمت بتغيير بعض الحجج ، يمكنك استخدام هذه الوظيفة الثانية لإعادة صفيف الحجج إلى سلسلة URL:

url_args_replace = function (url, args) {
  var args_enc, el, name;
  // use the DOM to parse the URL via an 'a' element
  el = document.createElement("a");
  el.href = url;
  args_enc = [];
  // encode args to go into url
  for (name in args) {
    if (args.hasOwnProperty(name)) {
      name = encodeURIComponent(name);
      args[name] = encodeURIComponent(args[name]);
      args_enc.Push(name + '=' + args[name]);
    }
  }
  if (args_enc.length > 0) {
    el.search = '?' + args_enc.join('&');
  } else {
    el.search = '';
  }
  return el.href;
};
5
BMitch

فعلت مكتبة URL صغيرة لاحتياجاتي هنا: https://github.com/Mikhus/jsurl

إنها طريقة أكثر شيوعًا لمعالجة عناوين URL في JavaScript. وفي الوقت نفسه ، إنه خفيف الوزن حقًا (مصغر و gzipped <1 كيلو بايت) ويحتوي على واجهة برمجة تطبيقات بسيطة ونظيفة جدًا. وهي لا تحتاج إلى أي مكتبة أخرى للعمل.

فيما يتعلق بالسؤال الأولي ، من السهل جدًا القيام بما يلي:

var u = new Url; // Current document URL
// or
var u = new Url('http://user:[email protected]:8080/some/path?foo=bar&bar=baz#anchor');

// Looking for query string parameters
alert( u.query.bar);
alert( u.query.foo);

// Modifying query string parameters
u.query.foo = 'bla';
u.query.woo = ['hi', 'hey']

alert(u.query.foo);
alert(u.query.woo);
alert(u);
5
Mikhus

إذا كنت تريد معلمات نمط الصفيف URL.js تدعم معلمات نمط الصفيف المتداخلة بشكل تعسفي وكذلك فهارس السلسلة (خرائط). كما أنه يتعامل مع فك تشفير URL.

url.get("val[0]=zero&val[1]=one&val[2]&val[3]=&val[4]=four&val[5][0]=n1&val[5][1]=n2&val[5][2]=n3&key=val", {array:true});
// Result
{
    val: [
        'zero',
        'one',
        true,
        '',
        'four',
        [ 'n1', 'n2', 'n3' ]
    ]
    key: 'val'
}
4
Kevin Cox

هناك العديد من الحلول لاسترداد قيم استعلام URI ، وأنا أفضل هذا لأنها قصيرة وتعمل بشكل رائع:

function get(name){
   if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
      return decodeURIComponent(name[1]);
}
4
BlueMark

حل بسيط مع جافا سكريبت عادي و تعبيرات منتظمة :

alert(getQueryString("p2"));

function getQueryString (Param) {
    return decodeURI("http://www.example.com/?p1=p11&p2=p2222".replace(new RegExp("^(?:.*[&?]" + encodeURI(Param).replace(/[.+*]/g, "$&") + "(?:=([^&]*))?)?.*$", "i"), "$1"));
}

JsFiddle

4
Saidulu Buchhala

هناك فائدة url صغيرة لطيفة لهذا مع بعض التحلية الباردة:

http://www.example.com/path/index.html?silly=willy#chucky=cheese

url();            // http://www.example.com/path/index.html?silly=willy#chucky=cheese
url('domain');    // example.com
url('1');         // path
url('-1');        // index.html
url('?');         // silly=willy
url('?silly');    // willy
url('?poo');      // (an empty string)
url('#');         // chucky=cheese
url('#chucky');   // cheese
url('#poo');      // (an empty string)

تحقق من المزيد من الأمثلة وتنزيلها هنا: https://github.com/websanova/js-url#url

4
Rob

( هذه هي وظيفة JavaScript الأكثر بساطة وصغرًا للحصول على قيمة معلمة سلسلة int من URL

/* THIS FUNCTION IS TO FETCH INT PARAMETER VALUES */

function getParameterint(param) {
            var val = document.URL;
            var url = val.substr(val.indexOf(param))  
            var n=parseInt(url.replace(param+"=",""));
            alert(n); 
}
getParameteraint("page");
getParameteraint("pagee");

/*THIS FUNCTION IS TO FETCH STRING PARAMETER*/
function getParameterstr(param) {
            var val = document.URL;
            var url = val.substr(val.indexOf(param))  
            var n=url.replace(param+"=","");
            alert(n); 
}
getParameterstr("str");

المصدر والتجريبي: http://bloggerplugnplay.blogspot.in/2012/08/how-to-get-url-parameter-in-javascript.html

4
Code Spy

يوجد تطبيق قوي في مصدر Node.js
https://github.com/joyent/node/blob/master/lib/querystring.js

أيضا QS في QS لا المتداخلة تحليل بارام
https://github.com/visionmedia/node-querystring

4
clyfe

إذا كان لديك Underscore.js أو lodash ، طريقة سريعة وقذرة لإنجاز هذا هي:

_.object(window.location.search.slice(1).split('&').map(function (val) { return val.split('='); }));
4
acjay
var getUrlParameters = function (name, url) {
    if (!name) {
        return undefined;
    }

    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    url = url || location.search;

    var regex = new RegExp('[\\?&#]' + name + '=?([^&#]*)', 'gi'), result, resultList = [];

    while (result = regex.exec(url)) {
        resultList.Push(decodeURIComponent(result[1].replace(/\+/g, ' ')));
    }

    return resultList.length ? resultList.length === 1 ? resultList[0] : resultList : undefined;
};
4
kayz1

أخذت هذه الإجابة وأضفت دعمًا لتمرير عنوان URL اختياريًا كمعلمة ؛ يعود إلى window.location.search. من الواضح أن هذا مفيد للحصول على معلمات سلسلة الاستعلام من عناوين URL التي ليست الصفحة الحالية:

(function($, undef) {
  $.QueryString = function(url) {
    var pairs, qs = null, index, map = {};
    if(url == undef){
      qs = window.location.search.substr(1);
    }else{
      index = url.indexOf('?');
      if(index == -1) return {};
      qs = url.substring(index+1);
    }
    pairs = qs.split('&');
    if (pairs == "") return {};
    for (var i = 0; i < pairs.length; ++i)
    {
      var p = pairs[i].split('=');
      if(p.length != 2) continue;
      map[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    return map;
  };
})(jQuery);
4
mynameistechno

أعتقد أن هذه طريقة دقيقة وموجزة لتحقيق ذلك (تم تعديلها من http://css-tricks.com/snippets/javascript/get-url-variables/ ):

function getQueryVariable(variable) {

    var query = window.location.search.substring(1),            // Remove the ? from the query string.
        vars = query.split("&");                                // Split all values by ampersand.

    for (var i = 0; i < vars.length; i++) {                     // Loop through them...
        var pair = vars[i].split("=");                          // Split the name from the value.
        if (pair[0] == variable) {                              // Once the requested value is found...
            return ( pair[1] == undefined ) ? null : pair[1];   // Return null if there is no value (no equals sign), otherwise return the value.
        }
    }

    return undefined;                                           // Wasn't found.

}
4
Gabriel Ryan Nahmias

هذه طريقة بسيطة للغاية للحصول على قيمة المعلمة (سلسلة الاستعلام)

استخدم الدالة gV(para_name) لاسترداد قيمتها

var a=window.location.search;
a=a.replace(a.charAt(0),""); //Removes '?'
a=a.split("&");

function gV(x){
 for(i=0;i<a.length;i++){
  var b=a[i].substr(0,a[i].indexOf("="));
  if(x==b){
   return a[i].substr(a[i].indexOf("=")+1,a[i].length)}
3
Ankit_Shah55

إذا كنت لا ترغب في استخدام مكتبة JavaScript ، فيمكنك استخدام وظائف سلسلة JavaScript لتحليل window.location. احتفظ بهذا الكود في ملف .js خارجي ويمكنك استخدامه مرارًا وتكرارًا في مشاريع مختلفة.

// Example - window.location = "index.htm?name=bob";

var value = getParameterValue("name");

alert("name = " + value);

function getParameterValue(param)
{
    var url = window.location;
    var parts = url.split('?');
    var params = parts[1].split('&');
    var val = "";

    for ( var i=0; i<params.length; i++)
    {
        var paramNameVal = params[i].split('=');

        if ( paramNameVal[0] == param )
        {
            val = paramNameVal[1];
        }
    }
    return val;
}
3
Robert Bolton

معظم جميلة ولكن الأساسية:

data = {};
$.each(
    location.search.substr(1).split('&').filter(Boolean).map(function(kvpairs){
        return kvpairs.split('=')
    }),
    function(i,values) {
        data[values.shift()] = values.join('=')
    }
);

لا يتعامل مع قوائم القيم مثل ?a[]=1&a[]2

3
Damien

أوصي دار الدروس كمكون جيد. لقد عملت معها لفترة طويلة. يمكنك أيضا استخدام الكود التالي. وضع Jus var queryObj = {}; قبل المستند. جاهزًا ثم ضع الشفرة المرفقة في بداية المستند. بعد هذا الرمز ، يمكنك استخدام queryObj["queryObjectName"] لأي كائن استعلام لديك

var querystring = location.search.replace('?', '').split('&');
for (var i = 0; i < querystring.length; i++) {
    var name = querystring[i].split('=')[0];
    var value = querystring[i].split('=')[1];
    queryObj[name] = value;
}
2
farnoush resa

يبدو أن أقصر تعبير ممكن من حيث الحجم للحصول على كائن استعلام هو:

var params = {};
location.search.substr(1).replace(/([^&=]*)=([^&]*)&?/g,
  function () { params[decodeURIComponent(arguments[1])] = decodeURIComponent(arguments[2]); });

يمكنك الاستفادة من عنصر A لتحليل URI من سلسلة إلى مكوناته location- (للتخلص من #... ، على سبيل المثال):

var a = document.createElement('a');
a.href = url;
// Parse a.search.substr(1)... as above
2
daluege

استعمال:

  $(document).ready(function () {
      var urlParams = {};
      (function () {
          var match,
          pl = /\+/g, // Regex for replacing addition symbol with a space
              search = /([^&=]+)=?([^&]*)/g,
              decode = function (s) {
                  return decodeURIComponent(s.replace(pl, " "));
              },
              query = window.location.search.substring(1);

          while (match = search.exec(query))
              urlParams[decode(match[1])] = decode(match[2]);
      })();
      if (urlParams["q1"] === 1) {
          return 1;
      }

يرجى التحقق واسمحوا لي أن أعرف تعليقاتكم. راجع أيضًاكيفية الحصول على قيمة querystring باستخدام jQuery.

2
Pushkraj

سيؤدي ذلك إلى تحليل المتغيراتوالصفائف من سلسلة URL. يستخدم لا regex أو أي مكتبة خارجية.

function url2json(url) {
   var obj={};
   function arr_vals(arr){
      if (arr.indexOf(',') > 1){
         var vals = arr.slice(1, -1).split(',');
         var arr = [];
         for (var i = 0; i < vals.length; i++)
            arr[i]=vals[i];
         return arr;
      }
      else
         return arr.slice(1, -1);
   }
   function eval_var(avar){
      if (!avar[1])
          obj[avar[0]] = '';
      else
      if (avar[1].indexOf('[') == 0)
         obj[avar[0]] = arr_vals(avar[1]);
      else
         obj[avar[0]] = avar[1];
   }
   if (url.indexOf('?') > -1){
      var params = url.split('?')[1];
      if(params.indexOf('&') > 2){
         var vars = params.split('&');
         for (var i in vars)
            eval_var(vars[i].split('='));
      }
      else
         eval_var(params.split('='));
   }
   return obj;
}

مثال:

var url = "http://www.x.com?luckyNums=[31,21,6]&name=John&favFoods=[pizza]&noVal"
console.log(url2json(url));

انتاج:

[object]
   noVal: ""
   favFoods: "pizza"
   name:     "John"
   luckyNums:
      0: "31"
      1: "21"
      2: "6"
2
Pithikos

تقوم هذه الوظيفة بإرجاع كائن JavaScript محلل مع أي قيم متداخلة بشكل تعسفي باستخدام التكرار حسب الضرورة.

إليك jsfiddle مثال.

[
  '?a=a',
  '&b=a',
  '&b=b',
  '&c[]=a',
  '&c[]=b',
  '&d[a]=a',
  '&d[a]=x',
  '&e[a][]=a',
  '&e[a][]=b',
  '&f[a][b]=a',
  '&f[a][b]=x',
  '&g[a][b][]=a',
  '&g[a][b][]=b',
  '&h=%2B+%25',
  '&i[aa=b',
  '&i[]=b',
  '&j=',
  '&k',
  '&=l',
  '&abc=foo',
  '&def=%5Basf%5D',
  '&ghi=[j%3Dkl]',
  '&xy%3Dz=5',
  '&foo=b%3Dar',
  '&xy%5Bz=5'
].join('');

إعطاء أي من الأمثلة الاختبار أعلاه.

var qs = function(a) {
  var b, c, e;
  b = {};
  c = function(d) {
    return d && decodeURIComponent(d.replace(/\+/g, " "));
  };
  e = function(f, g, h) {
    var i, j, k, l;
    h = h ? h : null;
    i = /(.+?)\[(.+?)?\](.+)?/g.exec(g);
    if (i) {
      [j, k, l] = [i[1], i[2], i[3]]
      if (k === void 0) {
        if (f[j] === void 0) {
          f[j] = [];
        }
        f[j].Push(h);
      } else {
        if (typeof f[j] !== "object") {
          f[j] = {};
        }
        if (l) {
          e(f[j], k + l, h);
        } else {
          e(f[j], k, h);
        }
      }
    } else {
      if (f.hasOwnProperty(g)) {
        if (Array.isArray(f[g])) {
          f[g].Push(h);
        } else {
          f[g] = [].concat.apply([f[g]], [h]);
        }
      } else {
        f[g] = h;
      }
      return f[g];
    }
  };
  a.replace(/^(\?|#)/, "").replace(/([^#&=?]+)?=?([^&=]+)?/g, function(m, n, o) {
    n && e(b, c(n), c(o));
  });
  return b;
};
1
Peter T Bosse II

سيعمل هذا ... ستحتاج إلى استدعاء هذه الوظيفة حيث تحتاج إلى الحصول على المعلمة بتمرير اسمها ...

function getParameterByName(name)
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  alert(results[1]);
  if (results == null)
    return "";
  else
    return results[1];
}
1
sonorita

سريعة وسهلة وسريعة:

الوظيفة:

function getUrlVar() {
    var result = {};
    var location = window.location.href.split('#');
    var parts = location[0].replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        result [key] = value;
    });
    return result;
}

الاستخدام:

var varRequest = getUrlVar()["theUrlVarName"];
1
Shlomi Hassid

هنا هو تطبيق النموذج المتغير String:

String.prototype.getParam = function( str ){
    str = str.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regex = new RegExp( "[\\?&]*"+str+"=([^&#]*)" );    
    var results = regex.exec( this );
    if( results == null ){
        return "";
    } else {
        return results[1];
    }
}

مثال للاتصال:

var status = str.getParam("status")

str يمكن أن تكون سلسلة استعلام أو عنوان url

1
krisrak

انظر هذا بعد أو استخدم هذا:

<script type="text/javascript" language="javascript">
    $(document).ready(function()
    {
        var urlParams = {};
        (function ()
        {
            var match,
            pl= /\+/g,  // Regular expression for replacing addition symbol with a space
            search = /([^&=]+)=?([^&]*)/g,
            decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
            query  = window.location.search.substring(1);

            while (match = search.exec(query))
                urlParams[decode(match[1])] = decode(match[2]);
        })();

        if (urlParams["q1"] === 1)
        {
            return 1;
        }
    });
</script>
1
soheil bijavar

القيام بذلك بشكل موثوق هو أكثر انخراطا مما قد يعتقد المرء في البداية.

  1. location.search ، المستخدم في الإجابات الأخرى ، هش ويجب تجنبه - على سبيل المثال ، يتم إرجاعه فارغًا إذا قام شخص ما بالبراغي ووضع معرف #fragment قبل سلسلة ?query.
  2. هناك عدد من الطرق التي يتم بها اجتياز عناوين URL تلقائيًا في المتصفح ، مما يجعل decodeURIComponent إلزاميًا إلى حد كبير ، في رأيي.
  3. يتم إنشاء العديد من سلاسل الاستعلام من إدخال المستخدم ، مما يعني أن الافتراضات حول محتوى URL سيئة للغاية. بما في ذلك أشياء أساسية للغاية مثل أن كل مفتاح فريد أو حتى له قيمة.

لحل هذه المشكلة ، إليك واجهة برمجة تطبيقات قابلة للتهيئة مع جرعة صحية من البرمجة الدفاعية . لاحظ أنه يمكن جعله نصف الحجم إذا كنت على استعداد لترميز بعض المتغيرات ، أو إذا كان الإدخال لا يمكن أن يشمل hasOwnProperty ، إلخ.

الإصدار 1: إرجاع كائن بيانات بأسماء وقيم لكل معلمة. إنه يزيلها بشكل فعال ويحترم دائمًا أول واحد موجود من اليسار إلى اليمين.

function getQueryData(url, paramKey, pairKey, missingValue, decode) {

    var query, queryStart, fragStart, pairKeyStart, i, len, name, value, result;

    if (!url || typeof url !== 'string') {
        url = location.href; // more robust than location.search, which is flaky
    }
    if (!paramKey || typeof paramKey !== 'string') {
        paramKey = '&';
    }
    if (!pairKey || typeof pairKey !== 'string') {
        pairKey = '=';
    }
    // when you do not explicitly tell the API...
    if (arguments.length < 5) {
        // it will unescape parameter keys and values by default...
        decode = true;
    }

    queryStart = url.indexOf('?');
    if (queryStart >= 0) {
        // grab everything after the very first ? question mark...
        query = url.substring(queryStart + 1);
    } else {
        // assume the input is already parameter data...
        query = url;
    }
    // remove fragment identifiers...
    fragStart = query.indexOf('#');
    if (fragStart >= 0) {
        // remove everything after the first # hash mark...
        query = query.substring(0, fragStart);
    }
    // make sure at this point we have enough material to do something useful...
    if (query.indexOf(paramKey) >= 0 || query.indexOf(pairKey) >= 0) {
        // we no longer need the whole query, so get the parameters...
        query = query.split(paramKey);
        result = {};
        // loop through the parameters...
        for (i = 0, len = query.length; i < len; i = i + 1) {
            pairKeyStart = query[i].indexOf(pairKey);
            if (pairKeyStart >= 0) {
                name = query[i].substring(0, pairKeyStart);
            } else {
                name = query[i];
            }
            // only continue for non-empty names that we have not seen before...
            if (name && !Object.prototype.hasOwnProperty.call(result, name)) {
                if (decode) {
                    // unescape characters with special meaning like ? and #
                    name = decodeURIComponent(name);
                }
                if (pairKeyStart >= 0) {
                    value = query[i].substring(pairKeyStart + 1);
                    if (value) {
                        if (decode) {
                            value = decodeURIComponent(value);
                        }
                    } else {
                        value = missingValue;
                    }
                } else {
                    value = missingValue;
                }
                result[name] = value;
            }
        }
        return result;
    }
}

الإصدار 2: إرجاع كائن خريطة البيانات مع صفيفين طول متطابقة ، واحدة للأسماء وواحد للقيم ، مع فهرس لكل معلمة. هذا الاسم يدعم الأسماء المكررة ولا يتعمد حذفها ، لأن هذا هو السبب في أنك قد ترغب في استخدام هذا التنسيق.

function getQueryData(url, paramKey, pairKey, missingValue, decode) {

   var query, queryStart, fragStart, pairKeyStart, i, len, name, value, result;

   if (!url || typeof url !== 'string') {
       url = location.href; // more robust than location.search, which is flaky
   }
   if (!paramKey || typeof paramKey !== 'string') {
       paramKey = '&';
   }
   if (!pairKey || typeof pairKey !== 'string') {
       pairKey = '=';
   }
   // when you do not explicitly tell the API...
   if (arguments.length < 5) {
       // it will unescape parameter keys and values by default...
       decode = true;
   }

   queryStart = url.indexOf('?');
   if (queryStart >= 0) {
       // grab everything after the very first ? question mark...
       query = url.substring(queryStart + 1);
   } else {
       // assume the input is already parameter data...
       query = url;
   }
   // remove fragment identifiers...
   fragStart = query.indexOf('#');
   if (fragStart >= 0) {
       // remove everything after the first # hash mark...
       query = query.substring(0, fragStart);
   }
   // make sure at this point we have enough material to do something useful...
   if (query.indexOf(paramKey) >= 0 || query.indexOf(pairKey) >= 0) {
       // we no longer need the whole query, so get the parameters...
       query = query.split(paramKey);
       result = {
           names: [],
           values: []
       };
       // loop through the parameters...
       for (i = 0, len = query.length; i < len; i = i + 1) {
           pairKeyStart = query[i].indexOf(pairKey);
           if (pairKeyStart >= 0) {
               name = query[i].substring(0, pairKeyStart);
           } else {
               name = query[i];
           }
           // only continue for non-empty names...
           if (name) {
               if (decode) {
                   // unescape characters with special meaning like ? and #
                   name = decodeURIComponent(name);
               }
               if (pairKeyStart >= 0) {
                   value = query[i].substring(pairKeyStart + 1);
                   if (value) {
                       if (decode) {
                           value = decodeURIComponent(value);
                       }
                   } else {
                       value = missingValue;
                   }
               } else {
                   value = missingValue;
               }
               result.names.Push(name);
               result.values.Push(value);
           }
       }
       return result;
   }

}

1
Seth Holladay

لم ينجح هذا بالنسبة لي ، أريد أن أتطابق مع ?b لأن المعلمة b موجودة ، ولا تتطابق مع ?return كمعلمة r ، إليك حلي .

window.query_param = function(name) {
  var param_value, params;

  params = location.search.replace(/^\?/, '');
  params = _.map(params.split('&'), function(s) {
    return s.split('=');
  });

  param_value = _.select(params, function(s) {
    return s.first === name;
  })[0];

  if (param_value) {
    return decodeURIComponent(param_value[1] || '');
  } else {
    return null;
  }
};
1
Dorian
// Parse query string
var params = {}, queryString = location.hash.substring(1),
    regex = /([^&=]+)=([^&]*)/g,
    m;
while (m = regex.exec(queryString)) {
    params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
}
0
Konstantin Tarkus