Как извлечь базовый URL из строки в JavaScript?
Я пытаюсь найти относительно простой и надежный способ извлечения базового URL из строковой переменной с помощью JavaScript (или jQuery).
например, что-то вроде:
http://www.sitename.com/article/2009/09/14/this-is-an-article/
Я хотел бы получить:
http://www.sitename.com/
регулярное выражение Лучше? Если да, то какой оператор я могу использовать для присвоения базового URL, извлеченного из данной строки, новой переменной?
Я сделал несколько поиск, но все что я нахожу в Мир JavaScript, похоже, вращается вокруг сбора этой информации из фактического URL-адреса документа с помощью расположение.хозяин или аналогичные.
18 ответов:
Edit: некоторые жалуются, что он не учитывает протокол. Поэтому я решил обновить код, так как он помечен как ответ. Для тех, кто любит однострочный код... ну извините, почему мы используем минимизаторы кода, код должен быть читаемым человеком, и этот способ лучше... на мой взгляд.
var pathArray = location.href.split( '/' ); var protocol = pathArray[0]; var host = pathArray[2]; var url = protocol + '//' + host;или использовать решение Давидс снизу.
браузеры на основе WebKit, Firefox с версии 21 и текущие версии Internet Explorer (IE 10 и 11) реализуют
location.origin.
location.originвключает в себя протокол на домен и дополнительно порт из URL.например,
location.originиз URLhttp://www.sitename.com/article/2009/09/14/this-is-an-article/иhttp://www.sitename.com.для целевых браузеров без поддержки
location.originиспользуйте следующий краткий полифилл:if (typeof location.origin === 'undefined') location.origin = location.protocol + '//' + location.host;
нет смысла делать шпагат, чтобы получить путь, имя, и т. д. Из строки, которая является ссылкой. Вам просто нужно использовать ссылку
//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.
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"круто!
Если вы используете jQuery, это своего рода классный способ манипулировать элементами в javascript без добавления их в DOM:
var myAnchor = $("<a />"); //set href myAnchor.attr('href', 'http://example.com/path/to/myfile') //your link's features var hostname = myAnchor.attr('hostname'); // http://example.com var pathname = myAnchor.attr('pathname'); // /path/to/my/file //...etc
легкий, но полный подход к получению базовых значений из строкового представления 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');
Я использую простое регулярное выражение, которое извлекает хост из url:
function get_host(url){ return url.replace(/^((\w+:)?\/\/[^\/]+\/?).*$/,''); }и использовать его в таком виде
var url = 'http://www.sitename.com/article/2009/09/14/this-is-an-article/' var host = get_host(url);обратите внимание, если
urlне заканчивается/thehostне будет/.вот некоторые тесты:
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/'); }); });
вы можете использовать приведенные ниже коды для получения различных параметров текущего 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);
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, chrome и firefox.
если вы извлекаете информацию из окна.местоположение.href (адресная строка), затем используйте этот код, чтобы получить
http://www.sitename.com/:var loc = location; var url = loc.protocol + "//" + loc.host + "/";если у вас есть строка,
str, то есть произвольный URL (не окно.местоположение.href), затем используйте регулярные выражения:var url = str.match(/^(([a-z]+:)?(\/\/)?[^\/]+\/).*$/)[1];Я, как и все во Вселенной, ненавижу читать регулярные выражения, поэтому я разбил его на английском языке:
- найти ноль или более букв, за которым следует двоеточие (протокол, который можно опустить)
- за ним следует / / (также можно опустить)
- за которым следуют любые символы, кроме / (имя хоста и порт)
- затем /
- за ним следует что угодно (путь, меньше начала /).
нет необходимости создавать элементы DOM или делать что-то сумасшедшее.
вместо того, чтобы учитывать окно.местоположение.протокол и окно.местоположение.происхождение и, возможно, отсутствует указанный номер порта и т. д., просто возьмите все до 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); }
вы можете сделать это с помощью регулярного выражения :
/(http:\/\/)?(www)[^\/]+\//iподойдет ли он ?
это работает для меня:
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] + '/'; } } };
var tilllastbackslashregex = новое регулярное выражение ( / ^.*//); baseUrl = tilllastbackslashregex.метод exec(окна.местоположение.href);
Ну URL API object позволяет избежать разделения и построения url-адреса вручную.
let url = new URL('https://stackoverflow.com/questions/1420881'); alert(url.origin);
Comments