Получить протокол, домен и порт из URL

301

Мне нужно извлечь полный протокол, домен и порт из заданного URL. Например:

https://localhost:8181/ContactUs-1.0/contact?lang=it&report_type=consumer
>>>
https://localhost:8181
yelo3
источник
9
Для тех читателей, которые ищут ответ, где URL-адрес не является текущим, посмотрите ниже принятого ответа
Гай Шалнат,

Ответы:

150

сначала получить текущий адрес

var url = window.location.href

Затем просто разобрать эту строку

var arr = url.split("/");

Ваш URL-адрес:

var result = arr[0] + "//" + arr[2]

Надеюсь это поможет

wezzy
источник
8
Это работает со строкой URL, где locationобъект недоступен (js вне браузера!)
Thamme Gowda
Ответ Дэвида Кэлхуна использует встроенный синтаксический анализатор (как location), но может использоваться для любого URL. Проверьте это аккуратно.
Стейн де Витт
6
Или просто превратить его в однострочник:window.location.href.split('/').slice(0, 3).join('/')
Райан
и как бы вы сделали это на узле?
DDD
5
window.location.origin
int soumen
576
var full = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');
Shef
источник
3
@Randomblue А как насчет этого? Вы получите about://. Тем не менее, мне любопытно узнать, для чего нужен вариант использования about:blank? Я не уверен, что какой-либо браузер внедряет ресурсы плагинов about:blank, но похоже, что это может быть единственным вариантом использования.
Shef
3
Это не работает вообще, если у вас есть строка URL, верно? (т. е. вам нужно быть на месте, location чтобы это работало)
Ник Т
1
Извините за поздний ответ, @NickT. Да, это не так. Пожалуйста, используйте хорошее решение, предоставленное Дэвидом для этого.
Шеф
1
Этот ответ должен быть выбран в качестве правильного ответа. Он чистый и использует стандартный объект местоположения.
Мохит Ганград
14
Вы не можете использовать location.hostвместо location.hostname+ location.port?
c24w
180

Похоже, что ни один из этих ответов не полностью отвечает на вопрос, который требует произвольного URL, а не конкретно URL текущей страницы.

Метод 1: Используйте API URL (предостережение: нет поддержки IE11)

Вы можете использовать URL API (не поддерживается IE11, но доступен везде ).

Это также облегчает доступ к параметрам поиска . Еще один бонус: его можно использовать в Web Worker, поскольку он не зависит от DOM.

const url = new URL('http://example.com:12345/blog/foo/bar?startIndex=1&pageSize=10');

Способ 2 (по старинке): используйте встроенный в DOM парсер браузера

Используйте это, если вам это нужно, чтобы работать и в старых браузерах.

//  Create an anchor element (note: no need to append this element to the document)
const url = document.createElement('a');
//  Set href to any path
url.setAttribute('href', 'http://example.com:12345/blog/foo/bar?startIndex=1&pageSize=10');

Это оно!

Встроенный в браузер парсер уже сделал свою работу. Теперь вы можете просто взять нужные вам части (обратите внимание, что это работает для обоих методов выше):

//  Get any piece of the url you're interested in
url.hostname;  //  'example.com'
url.port;      //  12345
url.search;    //  '?startIndex=1&pageSize=10'
url.pathname;  //  '/blog/foo/bar'
url.protocol;  //  'http:'

Бонус: поиск параметров

Скорее всего, вам, вероятно, захочется разбить также и параметры URL-адреса поиска, поскольку «? StartIndex = 1 & pageSize = 10» не слишком полезен сам по себе.

Если вы использовали метод 1 (URL API) выше, вы просто используете геттеры searchParams:

url.searchParams.get('startIndex');  // '1'

Или получить все параметры:

function searchParamsToObj(searchParams) {
  const paramsMap = Array
    .from(url.searchParams)
    .reduce((params, [key, val]) => params.set(key, val), new Map());
  return Object.fromEntries(paramsMap);
}
searchParamsToObj(url.searchParams);
// -> { startIndex: '1', pageSize: '10' }

Если вы использовали метод 2 (старый способ), вы можете использовать что-то вроде этого:

// Simple object output (note: does NOT preserve duplicate keys).
var params = url.search.substr(1); // remove '?' prefix
params
    .split('&')
    .reduce((accum, keyval) => {
        const [key, val] = keyval.split('=');
        accum[key] = val;
        return accum;
    }, {});
// -> { startIndex: '1', pageSize: '10' }
Дэвид Кэлхун
источник
link.protocol возвращает мне «http:», если я проверяю анкер с помощью «google.com» :-(var link = document.createElement('a'); link.setAttribute('href', 'google.com'); console.log(link.protocol)
eXe
Вы делаете это на httpстранице, возможно? Если он не указан, он будет «наследоваться» от текущего местоположения
Stijn de Witt
4
Это фантастический ответ, и он должен получить больше голосов, потому что этот ответ не ограничивается только текущим местоположением, но работает для любого URL , а также потому, что в этом ответе используется встроенный в браузер синтаксический анализатор вместо того, чтобы создавать его самостоятельно (чего мы не можем надеюсь сделать так же или так быстро!).
Стейн де Витт
Спасибо за этот хитрый трюк! Я хотел бы добавить одну вещь: есть и то hostи другое hostname. Первый включает в себя порт (например localhost:3000), а второй - только имя хоста (например localhost).
кодер
Это хорошо работает в случае абсолютного URL. Сбой в случае относительного URL и кросс-браузер. Какие-либо предложения?
Гурурадж
133

Почему-то все ответы все излишни. Это все, что нужно:

window.location.origin

Более подробную информацию можно найти здесь: https://developer.mozilla.org/en-US/docs/Web/API/window.location#Properties

Pijusn
источник
19
К вашему сведению, я уверен, что это будет здорово в будущем, когда все популярные браузеры внедрили его, однако в настоящее время это не так: developer.mozilla.org/en-US/docs/Web/API/… At На момент написания статьи только последние версии браузеров Firefox и WebKit поддерживают свойство origin согласно моим исследованиям.
Зак Сет
2
Просто для завершения: местоположение определено в HTML5, и оно реализует URLUtilsинтерфейс, который определен в WHATWG и включает originатрибут.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
5
Здравствуйте, с 2015 года. К сожалению, URLUtils все еще не реализован должным образом во всех браузерах, согласно этой таблице совместимости в MDN. Тем не менее, кажется, что свойство origin поддерживается немного лучше, чем в 2013 году, оно все еще не подходит для производства, так как не реализовано должным образом в Safari. Извините, ребята :(
totallyNotLizards
Обновление: до сих пор не поддерживается многими браузерами (в том числе и сафари) :( :(
Ахмад Хамза
Он также не работает в IE, он возвращает "undefined".
Сиддхартха Чаудхури
53

Как уже упоминалось, есть еще не полностью поддерживаемая, window.location.originно вместо того, чтобы использовать ее или создавать новую переменную для использования, я предпочитаю проверять ее, и если она не установлена ​​для ее установки.

Например;

if (!window.location.origin) {
  window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
}

Я на самом деле написал об этом несколько месяцев назад . Исправление для window.location.origin.

Тоби
источник
1
Это первый раз, когда я знаю, window.location.originчто существует. Спасибо. ^^
EThaizone Jo
33

хозяин

var url = window.location.host;

возвращается localhost:2679

имя хоста

var url = window.location.hostname;

возвращается localhost

Мирослав Холец
источник
Спасибо!!! Я не мог понять, почему localhost показывал localhost/вместо localhost:3000.
Тайлер Янгблад
23

window.location.origin будет достаточно, чтобы получить то же самое.

Int Soumen
источник
1
Это решило мою проблему легко. Спасибо @intsoumen
Turker Tunali
14

Свойство protocol устанавливает или возвращает протокол текущего URL, включая двоеточие (:).

Это означает, что если вы хотите получить только часть HTTP / HTTPS, вы можете сделать что-то вроде этого:

var protocol = window.location.protocol.replace(/:/g,'')

Для домена вы можете использовать:

var domain = window.location.hostname;

Для порта вы можете использовать:

var port = window.location.port;

Имейте в виду, что порт будет пустой строкой, если он не виден в URL. Например:

Если вам нужно показать 80/443, когда у вас нет использования порта

var port = window.location.port || (protocol === 'https' ? '443' : '80');
Дамян Станчев
источник
9

Почему бы не использовать:

let full = window.location.origin
Майк де Круиф
источник
3
При добавлении ответа на более старый вопрос с существующими ответами полезно объяснить, какую новую информацию приносит ваш ответ, и признать, что время влияет на ответ.
Джейсон Аллер
8

Действительно, window.location.origin отлично работает в браузерах, следующих стандартам, но угадайте, что. IE не соответствует стандартам.

Поэтому из-за этого у меня сработали IE, FireFox и Chrome:

var full = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');

но для возможных будущих улучшений, которые могли бы вызвать конфликты, я указал ссылку "window" перед объектом "location".

var full = window.location.protocol+'//'+window.location.hostname+(window.location.port ? ':'+window.location.port: '');
ЦПУ
источник
6

Вот решение, которое я использую:

const result = `${ window.location.protocol }//${ window.location.host }`;

РЕДАКТИРОВАТЬ:

Чтобы добавить кросс-браузерную совместимость, используйте следующее:

const result = `${ window.location.protocol }//${ window.location.hostname + (window.location.port ? ':' + window.location.port: '') }`;
JulienRioux
источник
1
Проголосовал, но, window.location.hostвозможно, не лучший кросс-браузер
Натанфранке
1
Спасибо, я добавил кросс-браузерную совместимость в свой оригинальный ответ.
JulienRioux
3
var http = location.protocol;
var slashes = http.concat("//");
var host = slashes.concat(window.location.hostname);
Elankeeran
источник
3
var getBasePath = function(url) {
    var r = ('' + url).match(/^(https?:)?\/\/[^/]+/i);
    return r ? r[0] : '';
};
Haipeng
источник
2
рассмотрите возможность объяснения вашего ответа. Не думайте, что OP может понять значение различных частей вашего кода.
ADyson
3

Попробуйте использовать регулярное выражение (Regex), которое будет весьма полезно, когда вы хотите проверить / извлечь материал или даже сделать простой анализ в javascript.

Регулярное выражение:

/([a-zA-Z]+):\/\/([\-\w\.]+)(?:\:(\d{0,5}))?/

Демонстрация:

function breakURL(url){

     matches = /([a-zA-Z]+):\/\/([\-\w\.]+)(?:\:(\d{0,5}))?/.exec(url);

     foo = new Array();

     if(matches){
          for( i = 1; i < matches.length ; i++){ foo.push(matches[i]); }
     }

     return foo
}

url = "https://www.google.co.uk:55699/search?q=http%3A%2F%2F&oq=http%3A%2F%2F&aqs=chrome..69i57j69i60l3j69i65l2.2342j0j4&sourceid=chrome&ie=UTF-8"


breakURL(url);       // [https, www.google.co.uk, 55699] 
breakURL();          // []
breakURL("asf");     // []
breakURL("asd://");  // []
breakURL("asd://a"); // [asd, a, undefined]

Теперь вы также можете сделать проверку.

ed9w2in6
источник
«Действительная схема URL RFC 3986 должна состоять из» буквы и сопровождаемой любой комбинацией букв, цифр, плюс («+»), точки («.») Или дефиса («-»). »- stackoverflow. com / a / 9142331/188833 (Вот урна: ietf: rfc: 3897 (URI) / urn: ietf: rfc: 3897 (IRI) регулярное выражение для схемы: часть URI / IRI в Python: github.com/dgerber /rfc3987/blob/master/rfc3987.py#L147 )
Уэс Тернер
2

Простой ответ, который работает для всех браузеров:

let origin;

if (!window.location.origin) {
  origin = window.location.protocol + "//" + window.location.hostname + 
     (window.location.port ? ':' + window.location.port: '');
}

origin = window.location.origin;
Майк Хос
источник
1

Стиль ES6 с настраиваемыми параметрами.

/**
 * Get the current URL from `window` context object.
 * Will return the fully qualified URL if neccessary:
 *   getCurrentBaseURL(true, false) // `http://localhost/` - `https://localhost:3000/`
 *   getCurrentBaseURL(true, true) // `http://www.example.com` - `https://www.example.com:8080`
 *   getCurrentBaseURL(false, true) // `www.example.com` - `localhost:3000`
 *
 * @param {boolean} [includeProtocol=true]
 * @param {boolean} [removeTrailingSlash=false]
 * @returns {string} The current base URL.
 */
export const getCurrentBaseURL = (includeProtocol = true, removeTrailingSlash = false) => {
  if (!window || !window.location || !window.location.hostname || !window.location.protocol) {
    console.error(
      `The getCurrentBaseURL function must be called from a context in which window object exists. Yet, window is ${window}`,
      [window, window.location, window.location.hostname, window.location.protocol],
    )
    throw new TypeError('Whole or part of window is not defined.')
  }

  const URL = `${includeProtocol ? `${window.location.protocol}//` : ''}${window.location.hostname}${
    window.location.port ? `:${window.location.port}` : ''
  }${removeTrailingSlash ? '' : '/'}`

  // console.log(`The URL is ${URL}`)

  return URL
}
Себастьен
источник
0

window.location.protocol + '//' + window.location.host

Code_Worm
источник