Как мне разобрать URL в имя хоста и путь в JavaScript?

Question

Я бы хотел взять строку

var a = "http://example.com/aa/bb/"

и обработать его в объект так, чтобы

a.hostname == "example.com"

и

a.pathname == "/aa/bb"

Answer 1

var getLocation = function(href) {
    var l = document.createElement("a");
    l.href = href;
    return l;
};
var l = getLocation("http://example.com/path");
console.debug(l.hostname)
>> "example.com"
console.debug(l.pathname)
>> "/path"

Answer 2

Современный способ:

new URL("http://example.com/aa/bb/")

Возвращает объект со свойствами hostname и pathname, наряду с , несколькими другими .

Первый аргумент - это относительный или абсолютный URL; если он относительный, то вам нужно указать второй аргумент (базовый URL). Например, для URL относительно текущей страницы:

new URL("/aa/bb/", location)

В дополнение к браузерам, этот API также доступен в Node.js начиная с v7, до require('url').URL.

Answer 3

найдено здесь: https://gist.github.com/jlong/2428561

var parser = document.createElement('a');
parser.href = "http://example.com:3000/pathname/?search=test#hash";

parser.protocol; // => "http:"
parser.host;     // => "example.com:3000"
parser.hostname; // => "example.com"
parser.port;     // => "3000"
parser.pathname; // => "/pathname/"
parser.hash;     // => "#hash"
parser.search;   // => "?search=test"
parser.origin;   // => "http://example.com:3000"

Answer 4

Вот простая функция, использующая регулярное выражение, имитирующее поведение тега a.

За

• предсказуемое поведение (нет проблем с несколькими браузерами)
• не нуждается в DOM
• это действительно коротко.

Минусы

• Регулярное выражение немного трудно читать

-

function getLocation(href) {
    var match = href.match(/^(https?\:)\/\/(([^:\/?#]*)(?:\:([0-9]+))?)([\/]{0,1}[^?#]*)(\?[^#]*|)(#.*|)$/);
    return match && {
        href: href,
        protocol: match[1],
        host: match[2],
        hostname: match[3],
        port: match[4],
        pathname: match[5],
        search: match[6],
        hash: match[7]
    }
}

-

getLocation("http://example.com/");
/*
{
    "protocol": "http:",
    "host": "example.com",
    "hostname": "example.com",
    "port": undefined,
    "pathname": "/"
    "search": "",
    "hash": "",
}
*/

getLocation("http://example.com:3000/pathname/?search=test#hash");
/*
{
    "protocol": "http:",
    "host": "example.com:3000",
    "hostname": "example.com",
    "port": "3000",
    "pathname": "/pathname/",
    "search": "?search=test",
    "hash": "#hash"
}
*/

EDIT:

Вот разбивка регулярного выражения

var reURLInformation = new RegExp([
    '^(https?:)//', // protocol
    '(([^:/?#]*)(?::([0-9]+))?)', // host (hostname and port)
    '(/{0,1}[^?#]*)', // pathname
    '(\\?[^#]*|)', // search
    '(#.*|)$' // hash
].join(''));
var match = href.match(reURLInformation);

Answer 5

Ответ freddiefujiwara довольно хороший, но мне также нужно было поддерживать относительные URL в Internet Explorer. Я придумал следующее решение:

function getLocation(href) {
    var location = document.createElement("a");
    location.href = href;
    // IE doesn't populate all link properties when setting .href with a relative URL,
    // however .href will return an absolute URL which then can be used on itself
    // to populate these additional fields.
    if (location.host == "") {
      location.href = location.href;
    }
    return location;
};

Теперь используйте его, чтобы получить необходимые свойства:

var a = getLocation('http://example.com/aa/bb/');
document.write(a.hostname);
document.write(a.pathname);

Пример JSFiddle: http://jsfiddle.net/6AEAB/

Answer 6

var loc = window.location;  // => "http://example.com:3000/pathname/?search=test#hash"

возвращает значение currentUrl.

Если вы хотите передать свою собственную строку как URL ( не работает в IE11 ):

var loc = new URL("http://example.com:3000/pathname/?search=test#hash")

Тогда вы можете разобрать это как:

loc.protocol; // => "http:"
loc.host;     // => "example.com:3000"
loc.hostname; // => "example.com"
loc.port;     // => "3000"
loc.pathname; // => "/pathname/"
loc.hash;     // => "#hash"
loc.search;   // => "?search=test"

Answer 7

js-uri (доступно в коде Google) берет строковый URL и разрешает из него объект URI:

var some_uri = new URI("http://www.example.com/foo/bar");

alert(some_uri.authority); // www.example.com
alert(some_uri);           // http://www.example.com/foo/bar

var blah      = new URI("blah");
var blah_full = blah.resolve(some_uri);
alert(blah_full);         // http://www.example.com/foo/blah

Answer 8

А как насчет простого регулярного выражения?

url = "http://www.example.com/path/to/somwhere";
urlParts = /^(?:\w+\:\/\/)?([^\/]+)(.*)$/.exec(url);
hostname = urlParts[1]; // www.example.com
path = urlParts[2]; // /path/to/somwhere

Answer 9

Вот версия, которую я скопировал с https://gist.github.com/1847816,, но переписал, чтобы ее было легче читать и отлаживать. Цель копирования данных привязки в другую переменную с именем «result» заключается в том, что данные привязки довольно длинные, и поэтому копирование ограниченного числа значений в результат поможет упростить результат.

/**
 * See: https://gist.github.com/1847816
 * Parse a URI, returning an object similar to Location
 * Usage: var uri = parseUri("hello?search#hash")
 */
function parseUri(url) {

  var result = {};

  var anchor = document.createElement('a');
  anchor.href = url;

  var keys = 'protocol hostname host pathname port search hash href'.split(' ');
  for (var keyIndex in keys) {
    var currentKey = keys[keyIndex]; 
    result[currentKey] = anchor[currentKey];
  }

  result.toString = function() { return anchor.href; };
  result.requestUri = result.pathname + result.search;  
  return result;

}

Answer 10

сегодня я столкнулся с этой проблемой и обнаружил: URL - веб-API MDN

var url = new URL("http://test.example.com/dir/subdir/file.html#hash");

Это возвращение:

{ hash:"#hash", host:"test.example.com", hostname:"test.example.com", href:"http://test.example.com/dir/subdir/file.html#hash", origin:"http://test.example.com", password:"", pathname:"/dir/subdir/file.html", port:"", protocol:"http:", search: "", username: "" }

Надеюсь, мой первый вклад поможет вам!