javascript - строки - убрать get параметры из url js




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

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

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


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

Срывая код 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'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));

Тест производительности (метод разделения на метод регулярных выражений) ( 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% медленнее

URLSearchParams

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

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

Он не стандартизирован 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" 

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

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


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

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 адреса решение Бруно возвращает объект без ключей, а мой возвращает объект с ключом param и undefined значением.


Вот расширенная версия связанной версии «Обрабатывать строки запроса в стиле массива» Энди Е. Исправлена ​​ошибка ( ?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, указанное значение добавляется в существующий список значений, разделенных запятыми, в виде «значение1, значение2, значение3».

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

Код:

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

Код гольф:

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

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

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

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

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

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

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

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

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

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

var params = Arg.all();

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


Это функция, которую я создал некоторое время назад, и я вполне доволен. Это не чувствительно к регистру - что удобно. Также, если запрошенный 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);
}

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

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

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 .


Вот быстрый способ получить объект, похожий на массив 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"
}

Вот мой пример превращения превосходного решения Энди Э в полноценный плагин 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');

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


Если вы выполняете больше манипуляций с URL- URI.js чем просто анализируете URI.js запроса, вы можете найти 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& to ?foo&bar=baz )


Если вы используете jQuery, вы можете использовать библиотеку, такую ​​как jQuery BBQ: кнопка Back & 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();
                  
            }
        };

Если вы хотите просто использовать простой JavaScript, вы можете использовать ...

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

})();​

Благодаря новому API истории HTML, в частности history.pushState() и history.replaceState() , URL-адрес может измениться, что приведет к аннулированию кэша параметров и их значений.

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


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

Это может быть легко улучшено для обработки строк запроса в стиле массива. Пример этого here , но так как параметры стиля массива не определены в RFC 3986, я не буду загрязнять этот ответ исходным кодом. Для тех, кто заинтересован в «загрязненной» версии, посмотрите ответ Кэмпбелна ниже .

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

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

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

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


Просто еще одна рекомендация. Плагин Purl позволяет извлекать все части 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. Подобный код выглядел бы как таковой, более полные документы here :

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'

Сохраняйте это простым в простом коде 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');


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

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




query-string