Получить экранированный параметр URL


302

Я ищу плагин jQuery, который может получать параметры URL и поддерживать эту строку поиска без вывода ошибки JavaScript: «неправильная последовательность URI». Если не существует плагина jQuery, который поддерживает это, мне нужно знать, как изменить его для поддержки этого.

?search=%E6%F8%E5

Значение параметра URL при декодировании должно быть:

æøå

(персонажи норвежские).

У меня нет доступа к серверу, поэтому я не могу ничего изменить на нем.



1
Причина, по которой вы получаете «неправильно сформированную последовательность URI», заключается в том, что большинство функций используют decodeURIComponent(). Норвежские символы, скорее всего, были закодированы с использованием чего-то подобного, escape()и изменение decodeURIComponent()вызова unescape()должно помочь.
— Кевин М

Смотрите мой ответ для современного решения: stackoverflow.com/a/19992436/64949
— Синдре Сорхус

Ответы:


418
function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}

33
С name = 'bar', я думаю, это регулярное выражение будет соответствовать 'foobar=10'и вернуться '10'. Может быть, вы могли бы добавить '[?|&]'в начале вашего регулярного выражения. Ура!
— Себастьян РоккаСерра

34
эта функция возвращает «ноль» вместо «ноль», когда параметр не определен ... радость от js ...
— Дамьен

12
вы можете захотеть использовать «decodeURIComponent ()» вместо «decodeURI ()», особенно если вы передаете интересные данные, такие как URL-адреса возврата, в качестве параметра URL-адреса
— perfectionist

25
Это хорошо, но decodeURIComponent лучше, например, в моем параметре был хэштег (% 23), который будет игнорироваться decodeURI. И я бы не возвратил ноль, но "", потому что decodeURI (null) === "нуль", что является странным возвращаемым значением, "" лучше; вы можете сделать if (! getURLParameter ("param")) вместо if (getURLParameter ("param") === "null"). Итак, моя улучшенная версия: decodeURIComponent ((RegExp (name + '=' + '(. +?) (& | $)'). Exec (location.search) || [, ""]) [1])
— standup75

3
Голосование "вниз", поскольку это возвращает строку, независимо от того, был ли найден результат или нет, и независимо от того, что вы указали в качестве альтернативного массива, например, [, null], поскольку результат был заключен в decodeURI, который превратил что-либо в строку, Санджив был прав, но его код не был проверен правильно, и простое копирование и вставка не работает. function getURLParameter(name) { var p = RegExp(name + '=' + '(.+?)(&|$)').exec(location.search); if(!!p) { p = decodeURI(p[1]); } return p; }
— Лукаш 'Severiaan' Grela

295

Ниже приведено то, что я создал из комментариев здесь, а также исправление ошибок, не упомянутых (например, возвращение нуля, а не нуля):

function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}

6
Как насчет добавления newперед RegExp? Меньше предупреждений от ворса.
— ripper234

18
Это должен быть принятый ответ. Возвращение реального нуля вместо «нуля» намного лучше.
— Art

11
Если кому-то нужно это преобразовать в coffeescript: getURLParameter: (name) -> return decodeURIComponent ((new RegExp ("[? | &] # {Name} = ([^ &;] +?) (& | ## |; | $) "). exec (location.search) || [null," "]) [1] .replace (/ \ + / g, '% 20')) || null;
— Redbeard

1
@Redbeard - разве ваша функция не должна иметь знак '=' после определения метода вместо двойного двоеточия?
— Зиппи

1
Это единственная версия функции get-URL-parameter, которая работает для меня со строкой UTF8.
— конечно же

107

Что вам действительно нужно, так это плагин jQuery URL Parser . С помощью этого плагина получение значения определенного параметра URL (для текущего URL) выглядит следующим образом:

$.url().param('foo');

Если вам нужен объект с именами параметров в качестве ключей и значениями параметров в качестве значений, вы просто должны вызвать param()без аргумента, например:

$.url().param();

Эта библиотека также работает с другими URL-адресами, а не только с текущим:

$.url('http://allmarkedup.com?sky=blue&grass=green').param();
$('#myElement').url().param(); // works with elements that have 'src', 'href' or 'action' attributes

Поскольку это целая библиотека для разбора URL, вы также можете получить другую информацию из URL, например, указанный порт, путь, протокол и т. Д.

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

У него также есть и другие функции. Посетите его домашнюю страницу , чтобы узнать больше документации и примеров.

Вместо того чтобы писать свой собственный URI анализатор для этой конкретной цели , что вроде работает в большинстве случаев, использовать фактический URI анализатор. В зависимости от ответа, код из других ответов может возвращаться 'null'вместо null, не работает с пустыми параметрами ( ?foo=&bar=x), не может анализировать и возвращать все параметры сразу, повторяет работу, если вы неоднократно запрашиваете URL для параметров и т. Д.

Используйте фактический парсер URI, не изобретайте свой собственный.

Для тех, кто не любит jQuery, есть версия плагина, которая представляет собой чистый JS .


23
Вопрос в том, чтобы получить параметр URL с помощью jQuery. Мой ответ отвечает на вопрос. Другие ответы инструктируют пользователя в основном писать свой собственный анализатор URI для этого конкретного варианта использования, что является ужасной идеей. Разбор URI сложнее, чем думают люди.
— Лукас

2
Это ответ, который я искал, и он очень jQuery-иш, в отличие от некоторых других ответов.
— Этеш Чоудхури

Плагин обрабатывает кодировку URI или мне нужно декодировать его вручную?
— Роберто Линарес

Вопрос говорит «javascript» (я думаю, что это означает DOM напрямую) или jQuery. Так что любой другой сделает.
— Brunoais

43

Если вы не знаете, какими будут параметры URL, и хотите получить объект с ключами и значениями в параметрах, вы можете использовать это:

function getParameters() {
  var searchString = window.location.search.substring(1),
      params = searchString.split("&"),
      hash = {};

  if (searchString == "") return {};
  for (var i = 0; i < params.length; i++) {
    var val = params[i].split("=");
    hash[unescape(val[0])] = unescape(val[1]);
  }
  return hash;
}

Вызов getParameters () с URL-адресом вроде /posts?date=9/10/11&author=nilbusбы вернет:

{
  date:   '9/10/11',
  author: 'nilbus'
}

Я не буду включать здесь код, так как он еще дальше от вопроса, но weareon.net опубликовал библиотеку, которая также позволяет манипулировать параметрами в URL:


1
Да, это лучше, чтобы получить все параметры. Все остальные решения, перечисленные здесь, повторяют регулярное выражение для каждого параметра.
— Бернард

Эта функция возвращает неудобный объект: {"": undefined}когда в URL нет параметров. Лучше всего возвращать пустой объект, используя if(searchString=='') return {};сразу после searchStringприсваивания.
— Джордан Арсено

40

Вы можете использовать в браузере нативное свойство location.search :

function getParameter(paramName) {
  var searchString = window.location.search.substring(1),
      i, val, params = searchString.split("&");

  for (i=0;i<params.length;i++) {
    val = params[i].split("=");
    if (val[0] == paramName) {
      return unescape(val[1]);
    }
  }
  return null;
}

Но есть несколько плагинов jQuery, которые могут вам помочь:


4
Это намного чище и более читабельно (и, вероятно, более безошибочно), чем все эти регулярные выражения.
— Тимммм

8
Я предложу использовать decodeURIComponent () вместо
— unescape

+1 это работает для современных браузеров, но некоторые разработчики должны работать с ...: | IE8: S.
— Brunoais

25

Основываясь на ответе 999 :

function getURLParameter(name) {
    return decodeURIComponent(
        (location.search.match(RegExp("[?|&]"+name+'=(.+?)(&|$)'))||[,null])[1]
    );  
}

Изменения:

  • decodeURI() заменяется на decodeURIComponent()
  • [?|&] добавляется в начале регулярного выражения

3
Может быть полезным для других, если бы вы могли объяснить, почему вы сделали эти изменения. Thx
— Тим

3
Не обрабатывать пустую Params: ?a=&b=1. Лучше регулярное выражение будет:"[?&]"+name+"=([^&]*)"
— Серж

6

Нужно добавить параметр i, чтобы сделать его нечувствительным к регистру:

  function getURLParameter(name) {
    return decodeURIComponent(
      (RegExp(name + '=' + '(.+?)(&|$)', 'i').exec(location.search) || [, ""])[1]
    );
  }

3

После прочтения всех ответов я получил эту версию с + второй функцией для использования параметров в качестве флагов

function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)','i').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}

function isSetURLParameter(name) {
    return (new RegExp('[?|&]' + name + '(?:[=|&|#|;|]|$)','i').exec(location.search) !== null)
}

2
Хороший ответ, только одно предупреждение. Согласно JSHint, [, ""] может вызвать проблемы для старых браузеров. Итак, используйте вместо этого [null, ""] или [undefined, ""]. Некоторые из нас все еще недовольны тем, что поддерживают IE8 и, смею сказать, IE7.
— Делиция Браммитт

2
$.urlParam = function(name){
  var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(top.window.location.href); 
  return (results !== null) ? results[1] : 0;
}

$.urlParam("key");

2

Например, функция, которая возвращает значение любой переменной параметра.

function GetURLParameter(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://example.com/?technology=jquery&blog=jquerybyexample".

var tech = GetURLParameter('technology');
var blog = GetURLParameter('blog');

Таким образом, в приведенном выше коде переменная «tech» будет иметь значение «jQuery», а переменная «blog» будет «jquerybyexample».


2

Вы не должны использовать jQuery для чего-то подобного!
Современный способ - использовать небольшие модули многократного использования через менеджер пакетов, такой как Bower.

Я создал крошечный модуль, который может анализировать строку запроса в объект. Используйте это так:

// parse the query string into an object and get the property
queryString.parse(unescape(location.search)).search;
//=> æøå

Если вы говорите, что это не современно - это нормально. Но, на мой взгляд, фреймворки действительно имеют свое место. JQuery выглядит все менее привлекательным для меня, хотя.
— Lodewijk

0

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

    /*
    *   @param      string      parameter to return the value of.
    *   @return     string      value of chosen parameter, if found.
    */
    function get_param(return_this)
    {
        return_this = return_this.replace(/\?/ig, "").replace(/=/ig, ""); // Globally replace illegal chars.

        var url = window.location.href;                                   // Get the URL.
        var parameters = url.substring(url.indexOf("?") + 1).split("&");  // Split by "param=value".
        var params = [];                                                  // Array to store individual values.

        for(var i = 0; i < parameters.length; i++)
            if(parameters[i].search(return_this + "=") != -1)
                return parameters[i].substring(parameters[i].indexOf("=") + 1).split("+");

        return "Parameter not found";
    }

console.log(get_param("parameterName"));

Regex не является основным и конечным решением, для этого типа проблем простое манипулирование строками может работать намного эффективнее. Исходный код .


0
<script type="text/javascript">
function getURLParameter(name) {
        return decodeURIComponent(
            (location.search.toLowerCase().match(RegExp("[?|&]" + name + '=(.+?)(&|$)')) || [, null])[1]
        );
    }

</script>

getURLParameter(id)или getURLParameter(Id)работает так же :)


0

Фрагмент кода jQuery, чтобы получить динамические переменные, хранящиеся в URL-адресе в качестве параметров, и сохранить их в виде переменных JavaScript, готовых для использования с вашими сценариями:

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

example.com?param1=name&param2=&id=6

$.urlParam('param1'); // name
$.urlParam('id');        // 6
$.urlParam('param2');   // null

//example params with spaces
http://www.jquery4u.com?city=Gold Coast
console.log($.urlParam('city'));  
//output: Gold%20Coast

console.log(decodeURIComponent($.urlParam('city'))); 
//output: Gold Coast

-1
function getURLParameters(paramName) 
{
        var sURL = window.document.URL.toString();  
    if (sURL.indexOf("?") > 0)
    {
       var arrParams = sURL.split("?");         
       var arrURLParams = arrParams[1].split("&");      
       var arrParamNames = new Array(arrURLParams.length);
       var arrParamValues = new Array(arrURLParams.length);     
       var i = 0;
       for (i=0;i<arrURLParams.length;i++)
       {
        var sParam =  arrURLParams[i].split("=");
        arrParamNames[i] = sParam[0];
        if (sParam[1] != "")
            arrParamValues[i] = unescape(sParam[1]);
        else
            arrParamValues[i] = "No Value";
       }

       for (i=0;i<arrURLParams.length;i++)
       {
                if(arrParamNames[i] == paramName){
            //alert("Param:"+arrParamValues[i]);
                return arrParamValues[i];
             }
       }
       return "No Parameters Found";
    }

}

-1

Я создал простую функцию для получения параметра URL в JavaScript из URL, например так:

.....58e/web/viewer.html?page=*17*&getinfo=33


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

ВЫВОД: 18


2
Будьте осторожны при публикации копируй и вставляй шаблонные / дословные ответы на несколько вопросов, они, как правило, помечаются сообществом как «спам». Если вы делаете это, то это обычно означает, что вопросы являются дубликатами, поэтому пометьте их как таковые: stackoverflow.com/a/11808489/419
— Kev

-1

На всякий случай, если у вас есть URL, например localhost / index.xsp? A = 1 #, вам нужно получить параметр, а не хеш.

var vars = [], hash, anchor;
var q = document.URL.split('?')[1];
if(q != undefined){
    q = q.split('&');
    for(var i = 0; i < q.length; i++){
        hash = q[i].split('=');
        anchor = hash[1].split('#');
        vars.push(anchor[0]);
        vars[hash[0]] = anchor[0];
    }
}

-1

Небольшая модификация ответа от @pauloppenheim, так как он не будет правильно обрабатывать имена параметров, которые могут быть частью других имен параметров.

Например: если у вас есть параметры "appenv" и "env", переопределение значения для "env" может привести к значению "appenv".

Fix:

var urlParamVal = function (name) {
    var result = RegExp("(&|\\?)" + name + "=(.+?)(&|$)").exec(location.search);
    return result ? decodeURIComponent(result[2]) : "";
};

-2

Это может помочь.

<script type="text/javascript">
    $(document).ready(function(){
        alert(getParameterByName("third"));
    });
    function getParameterByName(name){
        var url     = document.URL,
            count   = url.indexOf(name);
            sub     = url.substring(count);
            amper   = sub.indexOf("&"); 

        if(amper == "-1"){
            var param = sub.split("=");
            return param[1];
        }else{
            var param = sub.substr(0,amper).split("=");
            return param[1];
        }

    }
</script>

1
Этот код не проверен хорошо. Угадайте, что происходит с запросом?twothrids=text
— Lyth
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.