Проаналізуйте URL-адресу в JavaScript


76

Як проаналізувати URL-адресу за допомогою JavaScript (також з jQuery)?

Наприклад, у мене це є в моєму рядку,

url = "http://example.com/form_image_edit.php?img_id=33"

Я хочу отримати значення img_id

Я знаю, що це легко зробити за допомогою PHP parse_url(), але я хочу знати, як це можливо за допомогою JavaScript.


4
З php вам не потрібно використовувати функцію parse_url (), щоб отримати img_id, просто використовуйте $ _GET ['img_id]
mdaguerre


2
Правильна відповідь нижче є абсолютно смішною, коли все, що вам потрібно window.location.search.split('=')[1]. Не можу повірити, що за це він набрав 75 ​​голосів !!
Адам Спенс,

3
@AdamSpence window.location працює лише для URL-адреси сторінки, а не довільного рядка URL-адреси.
Фрейзер Харріс,

Відповіді:


121

Ви можете використовувати трюк створення a-element, додати до нього URL-адресу, а потім використовувати його об'єкт Location .

function parseUrl( url ) {
    var a = document.createElement('a');
    a.href = url;
    return a;
}

parseUrl('http://example.com/form_image_edit.php?img_id=33').search

Що виведе: ?img_id=33


Ви також можете використовувати php.js, щоб отримати функцію parse_url у JavaScript .


Оновлення (05.07.2012)

Я б рекомендував використовувати чудову бібліотеку URI.js, якщо вам потрібно зробити щось більше, ніж надзвичайно просту обробку URL-адрес.


4
Що еквівалентно url.match(/\?.+/)[0], дещо коротше і, швидше за все, набагато швидше.
RobG

9
вау, ніколи не знав про цей трюк, це зробило мій день після перебору усіх найгірших регулярних виразів у світі =)
Грег Гуйда

2
@Christophe Ні, це показує вам, які властивості доступні. Коли ви призначаєте URL-адресу властивості href якірного елемента, вона отримує всі властивості об'єкта Location.
Sindre Sorhus

1
@SindreSorhus Дивовижно! Не могли б ви поділитися посиланням, яке пояснює це, та докладним описом підтримки браузера? Чи справедливо це також для елементів, які мають атрибут src (посилання, iframe)?
Крістоф,

1
window.location.search
Адам Спенс,

36

Якщо ваш рядок викликається sтоді

var id = s.match(/img_id=([^&]+)/)[1]

дасть тобі.


10

Спробуйте це:

var url = window.location;
var urlAux = url.split('=');
var img_id = urlAux[1]

За допомогою цього методу, як я можу знайти, на скільки це було розділено, будь ласка?
Тім Маршалл



5

отримав це від google, спробуйте скористатися цим методом

function getQuerystring2(key, default_) 
{ 
    if (default_==null) 
    { 
        default_=""; 
    } 
    var search = unescape(location.search); 
    if (search == "") 
    { 
        return default_; 
    } 
    search = search.substr(1); 
    var params = search.split("&"); 
    for (var i = 0; i < params.length; i++) 
    { 
        var pairs = params[i].split("="); 
        if(pairs[0] == key) 
        { 
            return pairs[1]; 
        } 
    } 


return default_; 
}

2
Це не вдасться, якщо значення параметра запиту містить '% 3D' ('=') або '% 26' ('&'). Щоб виправити, використовуйте це всередині циклу for: `` `if (pair.shift () == key) {return pair.join ('='); } `` `` і виконайте перехід після поділу на '&'.
michielbdejong

3

Це повинно виправити кілька випадків краю у відповіді Кобе:

function getQueryParam(url, key) {
  var queryStartPos = url.indexOf('?');
  if (queryStartPos === -1) {
    return;
  }
  var params = url.substring(queryStartPos + 1).split('&');
  for (var i = 0; i < params.length; i++) {
    var pairs = params[i].split('=');
    if (decodeURIComponent(pairs.shift()) == key) {
      return decodeURIComponent(pairs.join('='));
    }
  }
}

getQueryParam('http://example.com/form_image_edit.php?img_id=33', 'img_id');
// outputs "33"

2

Я написав бібліотеку синтаксичного аналізу URL-адреси javascript, URL.js , ви можете використовувати її для цього.

Приклад:

url.parse("http://mysite.com/form_image_edit.php?img_id=33").get.img_id === "33"

Ні, я ніколи раніше не чув про purl.js.
Кевін Кокс,

Відповідь трохи вище вашої. Ваш код у 28 разів швидший і набагато чистіший, ніж виворітний, але я не можу використовувати його в його поточному стані. Я створив випуск на github, на який ви можете подивитися. Дякую
Стівен Вашон

2
Ви просто забуваєте запустити крок побудови. Однак нова версія більше не вимагає кроку збірки, тому зараз не потрібно про це турбуватися: D
Кевін Кокс

2

Щось подібне має спрацювати для вас. Навіть якщо є кілька значень рядка запиту, ця функція повинна повертати значення бажаного ключа.

function getQSValue(url) 
{
    key = 'img_id';
    query_string = url.split('?');
    string_values = query_string[1].split('&');
    for(i=0;  i < string_values.length; i++)
    {
        if( string_values[i].match(key))
            req_value = string_values[i].split('=');    
    }
    return req_value[1];
}


1
function parse_url(str, component) {
  //       discuss at: http://phpjs.org/functions/parse_url/
  //      original by: Steven Levithan (http://blog.stevenlevithan.com)
  // reimplemented by: Brett Zamir (http://brett-zamir.me)
  //         input by: Lorenzo Pisani
  //         input by: Tony
  //      improved by: Brett Zamir (http://brett-zamir.me)
  //             note: original by http://stevenlevithan.com/demo/parseuri/js/assets/parseuri.js
  //             note: blog post at http://blog.stevenlevithan.com/archives/parseuri
  //             note: demo at http://stevenlevithan.com/demo/parseuri/js/assets/parseuri.js
  //             note: Does not replace invalid characters with '_' as in PHP, nor does it return false with
  //             note: a seriously malformed URL.
  //             note: Besides function name, is essentially the same as parseUri as well as our allowing
  //             note: an extra slash after the scheme/protocol (to allow file:/// as in PHP)
  //        example 1: parse_url('http://username:password@hostname/path?arg=value#anchor');
  //        returns 1: {scheme: 'http', host: 'hostname', user: 'username', pass: 'password', path: '/path', query: 'arg=value', fragment: 'anchor'}

  var query, key = ['source', 'scheme', 'authority', 'userInfo', 'user', 'pass', 'host', 'port',
      'relative', 'path', 'directory', 'file', 'query', 'fragment'
    ],
    ini = (this.php_js && this.php_js.ini) || {},
    mode = (ini['phpjs.parse_url.mode'] &&
      ini['phpjs.parse_url.mode'].local_value) || 'php',
    parser = {
      php: /^(?:([^:\/?#]+):)?(?:\/\/()(?:(?:()(?:([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?))?()(?:(()(?:(?:[^?#\/]*\/)*)()(?:[^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,
      strict: /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,
      loose: /^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/\/?)?((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/ // Added one optional slash to post-scheme to catch file:/// (should restrict this)
    };

  var m = parser[mode].exec(str),
    uri = {},
    i = 14;
  while (i--) {
    if (m[i]) {
      uri[key[i]] = m[i];
    }
  }

  if (component) {
    return uri[component.replace('PHP_URL_', '')
      .toLowerCase()];
  }
  if (mode !== 'php') {
    var name = (ini['phpjs.parse_url.queryKey'] &&
      ini['phpjs.parse_url.queryKey'].local_value) || 'queryKey';
    parser = /(?:^|&)([^&=]*)=?([^&]*)/g;
    uri[name] = {};
    query = uri[key[12]] || '';
    query.replace(parser, function($0, $1, $2) {
      if ($1) {
        uri[name][$1] = $2;
      }
    });
  }
  delete uri.source;
  return uri;
}

посилання



Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.