Отримати параметр URL-адреси, що ухиляється


302

Я шукаю плагін jQuery, який може отримати параметри URL-адреси, і підтримую цю пошукову рядок без виведення помилки JavaScript: "неправильно сформована URI послідовність". Якщо немає плагіна jQuery, який підтримує це, мені потрібно знати, як його змінити, щоб підтримати це.

?search=%E6%F8%E5

Значення параметра URL-адреси при розшифровці повинно бути:

æøå

(символи норвезькі).

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



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

Дивіться моя відповідь для сучасного рішення: stackoverflow.com/a/19992436/64949
— Sindre Sorhus

Відповіді:


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

33
З name = 'bar', я думаю, що це регулярне вираження збігається 'foobar=10'і повертається '10'. Можливо, ви могли б додати '[?|&]'на початку свого регулярного покажчика. Ура!
— Sébastien RoccaSerra

34
ця функція повертає 'null' замість null, коли параметр не визначений ... радість js ...
— Дамієн

12
ви можете захотіти "decodeURIComponent ()" замість "decodeURI ()", особливо якщо ви передаєте цікаві дані, такі як повернення URL-адрес, як параметр URL
— перфекціоніст

25
Це добре, але decodeURIComponent краще, наприклад, у мене в параметрі був хештег (% 23), який би ігнорувався decodeURI. І я б не повертав null, але "", тому що decodeURI (null) === "null", що є дивним значенням повернення, "" краще; ви можете зробити, якщо (! getURLParameter ("парам")) замість if (getURLParameter ("param") === "null"). Отже, моя покращена версія: decodeURIComponent ((RegExp (ім'я + '=' + '(. +?) (& | $)'). 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; }
— Лукаш 'Северіан' Грела

295

Нижче наведено те, що я створив з коментарів тут, а також виправлення помилок, які не згадані (наприклад, фактично повернення null, а не 'null'):

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

6
Як щодо додавання newперед RegExp? Менше попереджень про підошву.
— ripper234

18
Це має бути прийнятою відповіддю. Повернення реального нуля замість "null" набагато краще.
— Мистецтво

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

1
@Redbeard - Чи не має у вашій функції знак "=" після визначення методу замість подвійної двокрапки?
— Zippie

1
Це єдина версія функції get-URL-параметра, яка працює для мене зі строкою UTF8.
— certainlyakey

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-ish, на відміну від деяких інших відповідей.
— Ehtesh Choudhury

Чи плагін обробляє кодування 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
Це набагато чистіше і читабельніше (і, ймовірно, більше помилок), ніж усі ці одноразові лайнери.
— Timmmm

8
Я пропоную використовувати decodeURIComponent () замість unescape ()
— freedev

+1 це працює для сучасних браузерів, але з деякими розробниками потрібно працювати з ...: | IE8: S.
— brunoais

25

Виходячи з відповіді 999 року :

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

Зміни:

  • decodeURI() замінюється на decodeURIComponent()
  • [?|&] додається на початку regexp

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
— Кев

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

Виправити:

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.