Получить протокол, домен и порт из URL-адреса
Мне нужно извлечь полный протокол, домен и порт из данного URL. Например:
https://localhost:8181/ContactUs-1.0/contact?lang=it&report_type=consumer
>>>
https://localhost:8181
13 ответов:
сначала получить текущий адрес
var url = window.location.href
тогда просто разобрать эту строку
var arr = url.split("/");
Ваш url:
var result = arr[0] + "//" + arr[2]
надеюсь, что это помогает
ни один из этих ответов, похоже, не полностью решает вопрос, который требует произвольного url-адреса, а не конкретно url-адреса текущей страницы.
метод 1: Используйте URL API (предостережение: нет поддержки IE11)
можно использовать URL API (не поддерживается IE11, но доступно везде).
это также позволяет легко получить доступ к параметры поиска. Еще один бонус: его можно использовать в Сети Рабочий, так как это не зависит от 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('searchIndex'); // '1'
или получить все параметры:
Array.from(url.searchParams).reduce((accum, [key, val]) => { accum[key] = val; return accum; }, {}); // -> { startIndex: '1', pageSize: '10' }
если вы использовали метод 2 (старый способ), вы можете использовать что-то вроде этого:
// Simple object output (note: does NOT preserve duplicate keys). var parms = 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' }
по какой-то причине все ответы являются излишними. Это все, что нужно:
window.location.origin
более подробную информацию можно найти здесь:https://developer.mozilla.org/en-US/docs/Web/API/window.location#Properties
Как уже упоминалось есть еще не полностью поддерживается
window.location.origin
но вместо того, чтобы использовать его или создавать новую переменную для использования, я предпочитаю проверять ее, и если она не установлена, чтобы установить ее.например:
if (!window.location.origin) { window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: ''); }
Я на самом деле написал об этом несколько месяцев назад исправление для окна.местоположение.происхождение
хоста
var url = window.location.host;
возвращает
localhost:2679
хоста
var url = window.location.hostname;
возвращает
localhost
свойство protocol устанавливает или возвращает протокол текущего URL, включая двоеточие (:).
Это означает, что если вы хотите получить только часть HTTP / HTTPS, вы можете сделать что-то вроде этого:
var protocol = window.location.protocol.replace(/:/g,'')
для домена, вы можете использовать:
var domain = window.location.hostname;
для порта вы можете использовать:
var port = window.location.port;
имейте в виду, что порт будет пустой строкой, если он не отображается в URL. Для пример:
- http://example.com/ вернет "" для порта
- http://example.com:80/ вернет 80 для порта
Если вам нужно показать 80/443, когда у вас нет использования порта
var port = window.location.port || (protocol === 'https' ? '443' : '80');
действительно, окно.местоположение.происхождение отлично работает в браузерах, следующих стандартам, но угадайте, что. IE не соответствует стандартам.
Так из-за этого, это то, что работало для меня в IE, FireFox и Chrome:
var full = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');
но для возможных будущих улучшений, которые могут вызвать конфликты, я указал ссылку "окно" перед объектом "местоположение".
var full = window.location.protocol+'//'+window.location.hostname+(window.location.port ? ':'+window.location.port: '');
var http = location.protocol; var slashes = http.concat("//"); var host = slashes.concat(window.location.hostname);
var getBasePath = function(url) { var r = ('' + url).match(/^(https?:)?\/\/[^/]+/i); return r ? r[0] : ''; };
попробуйте использовать регулярное выражение (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]
теперь вы можете сделать проверку, а также.
стиль 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 }