Как извлечь базовый URL из строки в JavaScript?
Я пытаюсь найти относительно простой и надежный метод для извлечения базового URL-адреса из строковой переменной с использованием JavaScript (или jQuery).
Например, если что-то вроде:
http://www.sitename.com/article/2009/09/14/this-is-an-article/
Я хотел бы получить:
http://www.sitename.com/
Является ли регулярное выражение лучшей ставкой? Если да, то какой оператор я могу использовать для назначения базового URL-адреса, извлеченного из данной строки, в новую переменную?
Я сделал несколько поисков по этому поводу, но все, что я нахожу в мире JavaScript, похоже, вращается вокруг сбора этой информации из фактического URL документа с помощью location.host или подобного.
Ответы
Ответ 1
Изменение: Некоторые жалуются, что он не учитывает протокол. Поэтому я решил обновить код, так как он помечен как ответ. Для тех, кто любит однострочный код... ну, извините, поэтому мы используем минимизаторы кода, код должен быть удобочитаемым, и этот способ лучше... на мой взгляд.
var pathArray = "https://somedomain.com".split( '/' );
var protocol = pathArray[0];
var host = pathArray[2];
var url = protocol + '//' + host;
Или используйте решение Дэвидса снизу.
Ответ 2
Браузеры на основе WebKit, Firefox с версии 21 и текущие версии Internet Explorer (IE 10 и 11) реализуют location.origin
.
location.origin
включает протокол, домен и необязательно порт URL.
Например, location.origin
URL http://www.sitename.com/article/2009/09/14/this-is-an-article/
- http://www.sitename.com
.
Для целевых браузеров без поддержки location.origin
используйте следующую краткую polyfill:
if (typeof location.origin === 'undefined')
location.origin = location.protocol + '//' + location.host;
Ответ 3
Не нужно использовать jQuery, просто используйте
location.hostname
Ответ 4
Нет причин делать разрывы, чтобы получить путь, имя хоста и т.д. из строки, которая является ссылкой. Вам просто нужно использовать ссылку
//create a new element link with your link
var a = document.createElement("a");
a.href="http://www.sitename.com/article/2009/09/14/this-is-an-article/";
//hide it from view when it is added
a.style.display="none";
//add it
document.body.appendChild(a);
//read the links "features"
alert(a.protocol);
alert(a.hostname)
alert(a.pathname)
alert(a.port);
alert(a.hash);
//remove it
document.body.removeChild(a);
Вы можете легко сделать это с помощью jQuery, добавляющего элемент и считывающего его attr.
Ответ 5
var host = location.protocol + '//' + location.host + '/';
Ответ 6
String.prototype.url = function() {
const a = $('<a />').attr('href', this)[0];
// or if you are not using jQuery 👇🏻
// const a = document.createElement('a'); a.setAttribute('href', this);
let origin = a.protocol + '//' + a.hostname;
if (a.port.length > 0) {
origin = `${origin}:${a.port}`;
}
const {host, hostname, pathname, port, protocol, search, hash} = a;
return {origin, host, hostname, pathname, port, protocol, search, hash};
}
Тогда:
'http://mysite:5050/pke45#23'.url()
//OUTPUT : {host: "mysite:5050", hostname: "mysite", pathname: "/pke45", port: "5050", protocol: "http:",hash:"#23",origin:"http://mysite:5050"}
Для вашего запроса вам необходимо:
'http://mysite:5050/pke45#23'.url().origin
Обзор 07-2017: он также может быть более элегантным и имеет больше функций
const parseUrl = (string, prop) => {
const a = document.createElement('a');
a.setAttribute('href', string);
const {host, hostname, pathname, port, protocol, search, hash} = a;
const origin = `${protocol}//${hostname}${port.length ? `:${port}`:''}`;
return prop ? eval(prop) : {origin, host, hostname, pathname, port, protocol, search, hash}
}
Тогда
parseUrl('http://mysite:5050/pke45#23')
// {origin: "http://mysite:5050", host: "mysite:5050", hostname: "mysite", pathname: "/pke45", port: "5050"…}
parseUrl('http://mysite:5050/pke45#23', 'origin')
// "http://mysite:5050"
Круто!
Ответ 7
Если вы используете jQuery, это классный способ манипулировать элементами в javascript, не добавляя их в DOM:
var myAnchor = $("<a />");
//set href
myAnchor.attr('href', 'http://example.com/path/to/myfile')
//your link features
var hostname = myAnchor.attr('hostname'); // http://example.com
var pathname = myAnchor.attr('pathname'); // /path/to/my/file
//...etc
Ответ 8
Легкий, но полный подход к получению базовых значений из строкового представления URL-адреса является правилом регулярного выражения Дугласа Крокфорда:
var yourUrl = "http://www.sitename.com/article/2009/09/14/this-is-an-article/";
var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;
var parts = parse_url.exec( yourUrl );
var result = parts[1]+':'+parts[2]+parts[3]+'/' ;
Если вы ищете более мощный инструментарий для манипулирования URL, попробуйте URI.js Он поддерживает геттеры, сеттер, нормализацию URL и т.д. все с приятным сцепившимся api.
Если вы ищете плагин jQuery, то jquery.url.js должен помочь вам
Более простой способ сделать это - использовать элемент привязки, как предлагал @epascarello. Это имеет тот недостаток, что вам нужно создать элемент DOM. Однако это можно кэшировать в закрытии и повторно использовать для нескольких URL-адресов:
var parseUrl = (function () {
var a = document.createElement('a');
return function (url) {
a.href = url;
return {
host: a.host,
hostname: a.hostname,
pathname: a.pathname,
port: a.port,
protocol: a.protocol,
search: a.search,
hash: a.hash
};
}
})();
Используйте его так:
paserUrl('http://google.com');
Ответ 9
Вы можете использовать нижеприведенные коды для получения разных параметров текущего URL
alert("document.URL : "+document.URL);
alert("document.location.href : "+document.location.href);
alert("document.location.origin : "+document.location.origin);
alert("document.location.hostname : "+document.location.hostname);
alert("document.location.host : "+document.location.host);
alert("document.location.pathname : "+document.location.pathname);
Ответ 10
Я использую простое регулярное выражение, которое извлекает форму узла URL:
function get_host(url){
return url.replace(/^((\w+:)?\/\/[^\/]+\/?).*$/,'$1');
}
и используйте его так:
var url = 'http://www.sitename.com/article/2009/09/14/this-is-an-article/'
var host = get_host(url);
Обратите внимание, что если url
не заканчивается на /
, host
не заканчивается на /
.
Вот несколько тестов:
describe('get_host', function(){
it('should return the host', function(){
var url = 'http://www.sitename.com/article/2009/09/14/this-is-an-article/';
assert.equal(get_host(url),'http://www.sitename.com/');
});
it('should not have a / if the url has no /', function(){
var url = 'http://www.sitename.com';
assert.equal(get_host(url),'http://www.sitename.com');
});
it('should deal with https', function(){
var url = 'https://www.sitename.com/article/2009/09/14/this-is-an-article/';
assert.equal(get_host(url),'https://www.sitename.com/');
});
it('should deal with no protocol urls', function(){
var url = '//www.sitename.com/article/2009/09/14/this-is-an-article/';
assert.equal(get_host(url),'//www.sitename.com/');
});
it('should deal with ports', function(){
var url = 'http://www.sitename.com:8080/article/2009/09/14/this-is-an-article/';
assert.equal(get_host(url),'http://www.sitename.com:8080/');
});
it('should deal with localhost', function(){
var url = 'http://localhost/article/2009/09/14/this-is-an-article/';
assert.equal(get_host(url),'http://localhost/');
});
it('should deal with numeric ip', function(){
var url = 'http://192.168.18.1/article/2009/09/14/this-is-an-article/';
assert.equal(get_host(url),'http://192.168.18.1/');
});
});
Ответ 11
Итак, объект URL API позволяет избежать разбиения и создания URL-адреса вручную.
let url = new URL('https://stackoverflow.com/questions/1420881');
alert(url.origin);
Ответ 12
Если вы извлекаете информацию из окна .location.href(адресную строку), используйте этот код для получения http://www.sitename.com/
:
var loc = location;
var url = loc.protocol + "//" + loc.host + "/";
Если у вас есть строка, str
, это произвольный URL (не window.location.href), а затем используйте регулярные выражения:
var url = str.match(/^(([a-z]+:)?(\/\/)?[^\/]+\/).*$/)[1];
Я, как и все во Вселенной, ненавижу читать регулярные выражения, поэтому я сломаю его на английском языке:
- Найдите нулевые или более альфа-символы, за которыми следует двоеточие (протокол, который можно опустить)
- Далее следует//(также может быть опущено)
- Далее следуют любые символы, кроме/(имя хоста и порт)
- Далее /
- За ним следуют все (путь, меньше начало /).
Не нужно создавать элементы DOM или делать что-то безумное.
Ответ 13
function getBaseURL() {
var url = location.href; // entire url including querystring - also: window.location.href;
var baseURL = url.substring(0, url.indexOf('/', 14));
if (baseURL.indexOf('http://localhost') != -1) {
// Base Url for localhost
var url = location.href; // window.location.href;
var pathname = location.pathname; // window.location.pathname;
var index1 = url.indexOf(pathname);
var index2 = url.indexOf("/", index1 + 1);
var baseLocalUrl = url.substr(0, index2);
return baseLocalUrl + "/";
}
else {
// Root Url for domain name
return baseURL + "/";
}
}
Затем вы можете использовать его так:
var str = 'http://en.wikipedia.org/wiki/Knopf?q=1&t=2';
var url = str.toUrl();
Значение url будет...
{
"original":"http://en.wikipedia.org/wiki/Knopf?q=1&t=2",<br/>"protocol":"http:",
"domain":"wikipedia.org",<br/>"host":"en.wikipedia.org",<br/>"relativePath":"wiki"
}
"var url" также содержит два метода.
var paramQ = url.getParameter('q');
В этом случае значение paramQ будет равно 1.
var allParameters = url.getParameters();
Значение allParameters будет только именами параметров.
["q","t"]
Проверено на IE, хром и firefox.
Ответ 14
Вместо того, чтобы иметь учетную запись window.location.protocol и window.location.origin и, возможно, не указывать указанный номер порта и т.д., просто возьмите все до 3-го "/":
// get nth occurrence of a character c in the calling string
String.prototype.nthIndex = function (n, c) {
var index = -1;
while (n-- > 0) {
index++;
if (this.substring(index) == "") return -1; // don't run off the end
index += this.substring(index).indexOf(c);
}
return index;
}
// get the base URL of the current page by taking everything up to the third "/" in the URL
function getBaseURL() {
return document.URL.substring(0, document.URL.nthIndex(3,"/") + 1);
}
Ответ 15
Вы можете сделать это с помощью регулярного выражения:
/(http:\/\/)?(www)[^\/]+\//i
подходит ли он?
Ответ 16
Это работает:
location.href.split(location.pathname)[0];
Ответ 17
Чтобы получить источник любого URL, включая пути внутри веб-сайта (/my/path
) или без схемы (//example.com/my/path
), или полный (http://example.com/my/path
), я собрал быструю функцию.
В приведенном ниже фрагменте все три вызова должны регистрироваться https://stacksnippets.net
.
function getOrigin(url)
{
if(/^\/\//.test(url))
{ // no scheme, use current scheme, extract domain
url = window.location.protocol + url;
}
else if(/^\//.test(url))
{ // just path, use whole origin
url = window.location.origin + url;
}
return url.match(/^([^/]+\/\/[^/]+)/)[0];
}
console.log(getOrigin('https://stacksnippets.net/my/path'));
console.log(getOrigin('//stacksnippets.net/my/path'));
console.log(getOrigin('/my/path'));
Ответ 18
Это работает для меня:
var getBaseUrl = function (url) {
if (url) {
var parts = url.split('://');
if (parts.length > 1) {
return parts[0] + '://' + parts[1].split('/')[0] + '/';
} else {
return parts[0].split('/')[0] + '/';
}
}
};
Ответ 19
var tilllastbackslashregex = new RegExp(/^.*\//);
baseUrl = tilllastbackslashregex.exec(window.location.href);
window.location.href выдает текущий URL-адрес из адресной строки браузера
это может быть любая вещь, например, https://stackoverflow.com/abc/xyz или https://www.google.com/search?q=abc tilllastbackslashregex.exec(), запустить regex и повторить соответствующую строку до последнего обратного слеша, т.е. https://stackoverflow.com/abc/ или https://www.google.com/ соответственно