Отримати параметр 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.