@Randomblue А как насчет этого? Вы получите about://. Тем не менее, мне любопытно узнать, для чего нужен вариант использования about:blank? Я не уверен, что какой-либо браузер внедряет ресурсы плагинов about:blank, но похоже, что это может быть единственным вариантом использования.
Shef
3
Это не работает вообще, если у вас есть строка URL, верно? (т. е. вам нужно быть на месте,location чтобы это работало)
Способ 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:
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
Почему-то все ответы все излишни. Это все, что нужно:
К вашему сведению, я уверен, что это будет здорово в будущем, когда все популярные браузеры внедрили его, однако в настоящее время это не так: developer.mozilla.org/en-US/docs/Web/API/… At На момент написания статьи только последние версии браузеров Firefox и WebKit поддерживают свойство origin согласно моим исследованиям.
Здравствуйте, с 2015 года. К сожалению, URLUtils все еще не реализован должным образом во всех браузерах, согласно этой таблице совместимости в MDN. Тем не менее, кажется, что свойство origin поддерживается немного лучше, чем в 2013 году, оно все еще не подходит для производства, так как не реализовано должным образом в Safari. Извините, ребята :(
totallyNotLizards
Обновление: до сих пор не поддерживается многими браузерами (в том числе и сафари) :( :(
Ахмад Хамза
Он также не работает в IE, он возвращает "undefined".
Сиддхартха Чаудхури
53
Как уже упоминалось, есть еще не полностью поддерживаемая, window.location.originно вместо того, чтобы использовать ее или создавать новую переменную для использования, я предпочитаю проверять ее, и если она не установлена для ее установки.
При добавлении ответа на более старый вопрос с существующими ответами полезно объяснить, какую новую информацию приносит ваш ответ, и признать, что время влияет на ответ.
Джейсон Аллер
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:'');
рассмотрите возможность объяснения вашего ответа. Не думайте, что 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 =newArray();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]
/**
* 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.
*/exportconst 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],)thrownewTypeError('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
}
Ответы:
сначала получить текущий адрес
Затем просто разобрать эту строку
Ваш URL-адрес:
Надеюсь это поможет
источник
location
объект недоступен (js вне браузера!)location
), но может использоваться для любого URL. Проверьте это аккуратно.window.location.href.split('/').slice(0, 3).join('/')
источник
about://
. Тем не менее, мне любопытно узнать, для чего нужен вариант использованияabout:blank
? Я не уверен, что какой-либо браузер внедряет ресурсы плагиновabout:blank
, но похоже, что это может быть единственным вариантом использования.location
чтобы это работало)location.host
вместоlocation.hostname
+location.port
?Похоже, что ни один из этих ответов не полностью отвечает на вопрос, который требует произвольного URL, а не конкретно URL текущей страницы.
Метод 1: Используйте API URL (предостережение: нет поддержки IE11)
Вы можете использовать URL API (не поддерживается IE11, но доступен везде ).
Это также облегчает доступ к параметрам поиска . Еще один бонус: его можно использовать в Web Worker, поскольку он не зависит от DOM.
Способ 2 (по старинке): используйте встроенный в DOM парсер браузера
Используйте это, если вам это нужно, чтобы работать и в старых браузерах.
Это оно!
Встроенный в браузер парсер уже сделал свою работу. Теперь вы можете просто взять нужные вам части (обратите внимание, что это работает для обоих методов выше):
Бонус: поиск параметров
Скорее всего, вам, вероятно, захочется разбить также и параметры URL-адреса поиска, поскольку «? StartIndex = 1 & pageSize = 10» не слишком полезен сам по себе.
Если вы использовали метод 1 (URL API) выше, вы просто используете геттеры searchParams:
Или получить все параметры:
Если вы использовали метод 2 (старый способ), вы можете использовать что-то вроде этого:
источник
var link = document.createElement('a'); link.setAttribute('href', 'google.com'); console.log(link.protocol)
http
странице, возможно? Если он не указан, он будет «наследоваться» от текущего местоположенияhost
и другоеhostname
. Первый включает в себя порт (напримерlocalhost:3000
), а второй - только имя хоста (напримерlocalhost
).Почему-то все ответы все излишни. Это все, что нужно:
Более подробную информацию можно найти здесь: https://developer.mozilla.org/en-US/docs/Web/API/window.location#Properties
источник
URLUtils
интерфейс, который определен в WHATWG и включаетorigin
атрибут.Как уже упоминалось, есть еще не полностью поддерживаемая,
window.location.origin
но вместо того, чтобы использовать ее или создавать новую переменную для использования, я предпочитаю проверять ее, и если она не установлена для ее установки.Например;
Я на самом деле написал об этом несколько месяцев назад . Исправление для window.location.origin.
источник
window.location.origin
что существует. Спасибо. ^^хозяин
возвращается
localhost:2679
имя хоста
возвращается
localhost
источник
localhost/
вместоlocalhost:3000
.window.location.origin
будет достаточно, чтобы получить то же самое.источник
Это означает, что если вы хотите получить только часть HTTP / HTTPS, вы можете сделать что-то вроде этого:
Для домена вы можете использовать:
Для порта вы можете использовать:
Имейте в виду, что порт будет пустой строкой, если он не виден в URL. Например:
Если вам нужно показать 80/443, когда у вас нет использования порта
источник
Почему бы не использовать:
источник
Действительно, window.location.origin отлично работает в браузерах, следующих стандартам, но угадайте, что. IE не соответствует стандартам.
Поэтому из-за этого у меня сработали IE, FireFox и Chrome:
но для возможных будущих улучшений, которые могли бы вызвать конфликты, я указал ссылку "window" перед объектом "location".
источник
Вот решение, которое я использую:
РЕДАКТИРОВАТЬ:
Чтобы добавить кросс-браузерную совместимость, используйте следующее:
источник
window.location.host
возможно, не лучший кросс-браузеристочник
источник
Попробуйте использовать регулярное выражение (Regex), которое будет весьма полезно, когда вы хотите проверить / извлечь материал или даже сделать простой анализ в javascript.
Регулярное выражение:
Демонстрация:
Теперь вы также можете сделать проверку.
источник
Простой ответ, который работает для всех браузеров:
источник
Стиль ES6 с настраиваемыми параметрами.
источник
window.location.protocol + '//' + window.location.host
источник