Получить экранированный параметр 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.