Есть ли способ без плагинов получить строку запроса через jQuery (или без)?

Если да, то как? Если нет, есть ли плагин, который может это сделать?

Ответы

Ответ 1

Обновление: сентябрь-2018

Вы можете использовать URLSearchParams, который прост и имеет достойную (но не полную) поддержку браузера.

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

Оригинал

Вам не нужен jQuery для этой цели. Вы можете использовать только чистый 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' в RegExp

Это обновление, основанное на новых спецификациях URLSearchParams, для более быстрого достижения того же результата. См. ответ под названием "URLSearchParams" ниже.

Ответ 2

Некоторые из размещенных здесь решений неэффективны. Повторение поиска регулярных выражений каждый раз, когда script необходимо получить доступ к параметру, совершенно не нужно, достаточно одной отдельной функции для разделения параметров в объект стиля ассоциативного массива. Если вы не работаете с API истории HTML 5, это необходимо только один раз на загрузку страницы. Другие предложения здесь также не могут правильно декодировать 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]);
})();

Пример querystring:

?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 Я не буду загрязнять этот ответ исходным кодом. Для тех, кто интересуется "загрязненной" версией, посмотрите на answerbeln ответ ниже.

Кроме того, как указано в комментариях, ; является законным разделителем для пар key=value. Это потребует более сложного регулярного выражения для обработки ; или &, что, я думаю, не нужно, потому что редко используется ;, и я бы сказал, что еще более маловероятно, что оба будут использоваться. Если вам нужно поддерживать ; вместо &, просто замените их в регулярном выражении.

Если вы используете язык предварительной обработки на стороне сервера, вы можете использовать его собственные функции JSON для выполнения тяжелой работы для вас. Например, в PHP вы можете написать:

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

Намного проще!

Ответ 3

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

Без jQuery

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 обработкой экранирования и знаком +. Этот объект похож на мой, у него такое же поведение.

Мой метод как плагин 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 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 location bar with the $.QueryString object
history.replaceState({}, '', "?" + $.param($.QueryString));
//-or-
history.pushState({}, '', "?" + $.param($.QueryString));

Тест производительности (метод разделения на метод регулярных выражений) (jsPerf)

Код подготовки: объявление методов

Сплит тестовый код

var qs = window.GetQueryString(query);

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

Тестовый код Regex

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% быстрее
Метод регулярных выражений: 13,891 ± 0,85% | На 90% медленнее

Ответ 4

Улучшенная версия Ответ Артема Баргера:

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/

Ответ 5

URLSearchParams

Firefox 44+, Opera 36+, Edge 17+, Safari 10. 3+ и Chrome 49+ поддерживают API URLSearchParams :

Для стабильных версий IE есть URLSearchParams polyfill, предложенный Google.

Он не стандартизирован W3C, но является стандартом жизни WhatWG.

Вы можете использовать его на location:

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

Вы также можете получить параметры, используя сокращенное свойство .searchParams для объекта URL, например:

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

Вы читаете/устанавливаете параметры через API get(KEY), set(KEY, VALUE), append(KEY, VALUE). Вы также можете перебирать все значения for (let p of params) {}.

справочная реализация и пример страницы доступны для аудита и тестирования.

Ответ 6

Еще одна рекомендация. Плагин Пурл позволяет извлекать все части URL, включая якорь, хост и т.д.

Он может использоваться с jQuery или без него.

Использование очень простое и классное:

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'

Ответ 7

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-coalescing" , оценка короткого замыкания
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]})

Правильно обрабатывает пустые ключи.
Переопределяет несколько ключей с найденным значением last.

"?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() не вызывается значениями undefined. (См. "Полное решение" вверху.)

v = v && decodeURIComponent(v);

Если querystring пуст (location.search == ""), результат несколько вводит в заблуждение qd == {"": undefined}. Перед запуском функции синтаксического анализа рекомендуется проверить запрос:

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

Ответ 8

Рошамбо на snipplr.com имеет простой script для достижения описанного в Получить параметры URL с помощью jQuery | Улучшение. С помощью script вы также легко можете вытащить только нужные параметры.

Здесь суть:

$.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/query была xyz.com/index.html?lang=de.

Просто позвоните var langval = $.urlParam('lang');, и у вас его есть.

UZBEKJON имеет отличную запись в блоге, а Получить параметры и значения URL с помощью jQuery.

Ответ 9

Если вы используете jQuery, вы можете использовать библиотеку, такую как jQuery BBQ: Back Button и библиотека запросов.

... 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();
                  
            }
        };

Ответ 10

Просто используйте два раскола:

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.

Или, если у вас есть контроль над querystring и может гарантировать, что значение, которое вы пытаетесь получить, никогда не будет содержать URL-код символы (имеющие эти значения в качестве плохой идеи) - вы можете использовать следующая немного упрощенная и читаемая версия 1-го варианта:
    function getQueryStringValueByName(name) {
        var queryStringFromStartOfValue = location.search.split(name + '=')[1];
         return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split('&')[0] : null;

Ответ 11

Здесь мой удар по созданию превосходного решения Andy E в полноценном плагине jQuery:

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

Лучшее из обоих миров!

Ответ 12

Если вы делаете больше манипуляций с URL-адресами, чем просто разбираете запрос, вы можете найти URI.js. Это библиотека для манипулирования URL-адресами - и поставляется со всеми звонками и свистами. (Извините за саморекламу здесь)

чтобы преобразовать ваш запрос в карту:

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)

Ответ 13

Мне нравится решение Райана Фелана. Но я не вижу смысла расширять jQuery для этого? Там нет использования функциональности 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];
  };
}

Эта функция более или менее от Райана Фелана, но она заключена в другую: чистое имя и отсутствие зависимостей от других библиотек JavaScript. Подробнее об этой функции в моем блоге.

Ответ 14

Вот быстрый способ получить объект, похожий на массив PHP $_ GET:

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

Ответ 15

Держите его простым в простом 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');

Ответ 16

Все это отличные ответы, но мне нужно было что-то более надежное, и подумал, что всем вам может понравиться то, что я создал.

Это простой библиотечный метод, который выполняет вскрытие и манипулирование параметрами 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>');

Ответ 17

Из MDN:

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

alert(loadPageVar("name"));

Ответ 18

Код гольфа:

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

Ответ 19

Я использую регулярные выражения много, но не для этого.

Мне кажется проще и эффективнее прочитать строку запроса один раз в моем приложении и построить объект из всех пар ключ/значение, например:

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.

Ответ 20

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

Ответ 21

Метод jQuery Roshambo не заботился о расшифровке URL

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

Просто добавлена эта возможность при добавлении в оператор return

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

Теперь вы можете найти обновленную версию:

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

Ответ 22

Здесь мое редактирование на этот отличный ответ - с добавленной возможностью анализировать строки запроса с ключами без значений.

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-адрес. Вы можете использовать последнюю строку из ответа Бруно для анализа текущего URL-адреса.

Итак, что именно изменилось? С url http://sb.com/reg/step1?param= результаты будут одинаковыми. Но с url http://sb.com/reg/step1?param решение Bruno возвращает объект без ключей, а мой возвращает объект с ключом param и undefined.

Ответ 23

Мне нравится этот (взято из jquery-howto.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;
}

Отлично работает для меня.

Ответ 24

Мне нужен был объект из строки запроса, и я ненавижу много кода. Это не может быть самым надежным во вселенной, но это всего лишь несколько строк кода.

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

Ответ 25

Это функция, которую я создал некоторое время назад, и я очень доволен. Это не чувствительно к регистру - это удобно. Кроме того, если запрошенное QS не существует, оно просто возвращает пустую строку.

Я использую сжатую версию этого. Я отправляю несжатые для новичков типы, чтобы лучше объяснить, что происходит.

Я уверен, что это может быть оптимизировано или сделано по-другому, чтобы работать быстрее, но он всегда отлично работал для того, что мне нужно.

Enjoy.

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

Ответ 26

Здесь расширенная версия Andy E, связанная с цепочками запросов "Обработка массива в стиле массива" - версия. Исправлена ошибка (?key=1&key[]=2&key[]=3; 1 потеряна и заменена на [2,3]), сделала несколько незначительных улучшений производительности (повторное декодирование значений, пересчет "[" позиция и т.д.) И добавлено несколько улучшений ( функционализация, поддержка ?key=1&key=2, поддержка разделителей ;). Я оставил переменные досадно короткими, но добавил комментарии в изобилии, чтобы сделать их читаемыми (о, и я повторно использовал v внутри локальных функций, извините, если это запутывает;).

Он будет обрабатывать следующие запросы...

?
тест = Hello & человек = 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 NameValueCollection.Add):

Если указанный ключ уже существует в целевом NameValueCollection экземпляр, указанное значение добавляется к существующей разделенной запятой список значений в форме "value1, value2, value3".

Кажется, что присяжные несколько выходят на повторные ключи, так как нет спецификации. В этом случае несколько ключей сохраняются как (поддельный) массив. Но обратите внимание, что я не обрабатывает значения на основе запятых в массивах.

Код:

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) array
            //#     NOTE: This may or may not be 100% logical to do... but it 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) 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) array
            else { Array.prototype.push.call(r[k], v); }
        }
    }

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

Ответ 27

Проблема с верхним ответом на этот вопрос заключается в том, что он не поддерживает параметры, размещенные после #, но иногда также необходимо получить это значение.

Я изменил ответ, чтобы он также анализировал полную строку запроса с помощью символа hash:

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

Ответ 28

Мы только что выпустили arg.js - проект, направленный на решение этой проблемы раз и навсегда. Это традиционно было так сложно, но теперь вы можете сделать:

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

или получить всю партию:

var params = Arg.all();

и если вам нужна разница между ?query=true и #hash=true, вы можете использовать методы Arg.query() и Arg.hash().

Ответ 29

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

Ответ 30

Если вы используете 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 Руководство и документация

РЕДАКТИРОВАТЬ: Вы можете использовать интерфейс URL, он довольно широко распространен практически во всех новых браузерах, и если код будет работать в старом браузере, вы можете использовать полифилл, как этот. Вот пример кода о том, как использовать интерфейс 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"

Как получить значения строки запроса в JavaScript?

Ответы

Ответ 1

Ответ 2

Ответ 3

ES2015 (ES6)

Без jQuery

Метод Google

Тест производительности (метод разделения на метод регулярных выражений) (jsPerf)

Сплит тестовый код

Тестовый код Regex

Ответ 4

Ответ 5

URLSearchParams

Ответ 6

Ответ 7

TL;DR

Подробнее... о решении Vanilla JavaScript.

Самое простое (фиктивное) решение

Многозначные ключи

Кодированные символы?

Из комментариев

Ответ 8

Ответ 9

Ответ 10

Ответ 11

Ответ 12

Ответ 13

Ответ 14

Ответ 15

Ответ 16

Ответ 17

Ответ 18

Ответ 19

Ответ 20

Ответ 21

Ответ 22

Ответ 23

Ответ 24

Ответ 25

Ответ 26

Ответ 27

Ответ 28

Ответ 29

Ответ 30