Eu gostaria de pegar uma corda
var a = "http://example.com/aa/bb/"
e processá-lo em um objeto tal que
a.hostname == "example.com"
e
a.pathname == "/aa/bb"
Eu gostaria de pegar uma corda
var a = "http://example.com/aa/bb/"
e processá-lo em um objeto tal que
a.hostname == "example.com"
e
a.pathname == "/aa/bb"
Respostas:
A maneira moderna:
new URL("http://example.com/aa/bb/")
Retorna um objeto com propriedades hostname
e pathname
, junto com alguns outros .
O primeiro argumento é uma URL relativa ou absoluta; se for relativo, você precisará especificar o segundo argumento (o URL base). Por exemplo, para um URL relativo à página atual:
new URL("/aa/bb/", location)
Além dos navegadores, esta API também está disponível no Node.js. desde a v7 até require('url').URL
.
new URL('/stuff?foo=bar#baz')
->SyntaxError: Failed to construct 'URL': Invalid URL
var getLocation = function(href) {
var l = document.createElement("a");
l.href = href;
return l;
};
var l = getLocation("http://example.com/path");
console.debug(l.hostname)
>> "example.com"
console.debug(l.pathname)
>> "/path"
pathname
remove a barra principal, enquanto os outros navegadores não. Então, você terminará com /path
ou path
, dependendo do seu navegador.
encontrado aqui: https://gist.github.com/jlong/2428561
var parser = document.createElement('a');
parser.href = "http://example.com:3000/pathname/?search=test#hash";
parser.protocol; // => "http:"
parser.host; // => "example.com:3000"
parser.hostname; // => "example.com"
parser.port; // => "3000"
parser.pathname; // => "/pathname/"
parser.hash; // => "#hash"
parser.search; // => "?search=test"
parser.origin; // => "http://example.com:3000"
parser = location;
e todas as linhas a seguir funcionam. Tentei no Chrome e IE9 agora.
pathname
não inclui a barra principal no IE. Vai saber. : D
http:
mesmo se você passar apenas domain.com
para href (sem nenhum protocolo). Eu queria usar isso para verificar se o protocolo estava ausente e, se sim, poderia adicioná-lo, mas ele pressupõe que http: portanto, não foi possível usá-lo para esse fim.
Aqui está uma função simples usando um regexp que imita o a
comportamento da tag.
Prós
Contras
-
function getLocation(href) {
var match = href.match(/^(https?\:)\/\/(([^:\/?#]*)(?:\:([0-9]+))?)([\/]{0,1}[^?#]*)(\?[^#]*|)(#.*|)$/);
return match && {
href: href,
protocol: match[1],
host: match[2],
hostname: match[3],
port: match[4],
pathname: match[5],
search: match[6],
hash: match[7]
}
}
-
getLocation("http://example.com/");
/*
{
"protocol": "http:",
"host": "example.com",
"hostname": "example.com",
"port": undefined,
"pathname": "/"
"search": "",
"hash": "",
}
*/
getLocation("http://example.com:3000/pathname/?search=test#hash");
/*
{
"protocol": "http:",
"host": "example.com:3000",
"hostname": "example.com",
"port": "3000",
"pathname": "/pathname/",
"search": "?search=test",
"hash": "#hash"
}
*/
EDITAR:
Aqui está um detalhamento da expressão regular
var reURLInformation = new RegExp([
'^(https?:)//', // protocol
'(([^:/?#]*)(?::([0-9]+))?)', // host (hostname and port)
'(/{0,1}[^?#]*)', // pathname
'(\\?[^#]*|)', // search
'(#.*|)$' // hash
].join(''));
var match = href.match(reURLInformation);
var loc = window.location; // => "http://example.com:3000/pathname/?search=test#hash"
retorna o currentUrl.
Se você deseja passar sua própria string como um URL ( não funciona no IE11 ):
var loc = new URL("http://example.com:3000/pathname/?search=test#hash")
Então você pode analisá-lo como:
loc.protocol; // => "http:"
loc.host; // => "example.com:3000"
loc.hostname; // => "example.com"
loc.port; // => "3000"
loc.pathname; // => "/pathname/"
loc.hash; // => "#hash"
loc.search; // => "?search=test"
A resposta de freddiefujiwara é muito boa, mas eu também precisava oferecer suporte a URLs relativos no Internet Explorer. Eu vim com a seguinte solução:
function getLocation(href) {
var location = document.createElement("a");
location.href = href;
// IE doesn't populate all link properties when setting .href with a relative URL,
// however .href will return an absolute URL which then can be used on itself
// to populate these additional fields.
if (location.host == "") {
location.href = location.href;
}
return location;
};
Agora use-o para obter as propriedades necessárias:
var a = getLocation('http://example.com/aa/bb/');
document.write(a.hostname);
document.write(a.pathname);
Exemplo do JSFiddle: http://jsfiddle.net/6AEAB/
var locationHost = (location.port !== '80' && location.port !== '443') ? location.host : location.hostname;
var locationOrigin = location.protocol + '//' + locationHost;
js-uri (disponível no Google Code) pega um URL de string e resolve um objeto URI a partir dele:
var some_uri = new URI("http://www.example.com/foo/bar");
alert(some_uri.authority); // www.example.com
alert(some_uri); // http://www.example.com/foo/bar
var blah = new URI("blah");
var blah_full = blah.resolve(some_uri);
alert(blah_full); // http://www.example.com/foo/blah
E a expressão regular simples?
url = "http://www.example.com/path/to/somwhere";
urlParts = /^(?:\w+\:\/\/)?([^\/]+)(.*)$/.exec(url);
hostname = urlParts[1]; // www.example.com
path = urlParts[2]; // /path/to/somwhere
//user:password@example.com/path/x?y=z
e você verá por que a expressão regular simples não é suficiente. Agora jogue algo inválido e deve sair de maneira previsível também.
hoje eu encontrei esse problema e encontrei: URL - MDN Web APIs
var url = new URL("http://test.example.com/dir/subdir/file.html#hash");
Este retorno:
{ hash:"#hash", host:"test.example.com", hostname:"test.example.com", href:"http://test.example.com/dir/subdir/file.html#hash", origin:"http://test.example.com", password:"", pathname:"/dir/subdir/file.html", port:"", protocol:"http:", search: "", username: "" }
Esperando que minha primeira contribuição o ajude!
Aqui está uma versão que copiei de https://gist.github.com/1847816 , mas reescrevi para facilitar a leitura e a depuração. O objetivo de copiar os dados da âncora para outra variável chamada "resultado" é porque os dados da âncora são bastante longos e, portanto, copiar um número limitado de valores para o resultado ajudará a simplificar o resultado.
/**
* See: https://gist.github.com/1847816
* Parse a URI, returning an object similar to Location
* Usage: var uri = parseUri("hello?search#hash")
*/
function parseUri(url) {
var result = {};
var anchor = document.createElement('a');
anchor.href = url;
var keys = 'protocol hostname host pathname port search hash href'.split(' ');
for (var keyIndex in keys) {
var currentKey = keys[keyIndex];
result[currentKey] = anchor[currentKey];
}
result.toString = function() { return anchor.href; };
result.requestUri = result.pathname + result.search;
return result;
}
A análise de URL entre navegadores , soluciona o problema de caminho relativo para o IE 6, 7, 8 e 9:
function ParsedUrl(url) {
var parser = document.createElement("a");
parser.href = url;
// IE 8 and 9 dont load the attributes "protocol" and "host" in case the source URL
// is just a pathname, that is, "/example" and not "http://domain.com/example".
parser.href = parser.href;
// IE 7 and 6 wont load "protocol" and "host" even with the above workaround,
// so we take the protocol/host from window.location and place them manually
if (parser.host === "") {
var newProtocolAndHost = window.location.protocol + "//" + window.location.host;
if (url.charAt(1) === "/") {
parser.href = newProtocolAndHost + url;
} else {
// the regex gets everything up to the last "/"
// /path/takesEverythingUpToAndIncludingTheLastForwardSlash/thisIsIgnored
// "/" is inserted before because IE takes it of from pathname
var currentFolder = ("/"+parser.pathname).match(/.*\//)[0];
parser.href = newProtocolAndHost + currentFolder + url;
}
}
// copies all the properties to this object
var properties = ['host', 'hostname', 'hash', 'href', 'port', 'protocol', 'search'];
for (var i = 0, n = properties.length; i < n; i++) {
this[properties[i]] = parser[properties[i]];
}
// pathname is special because IE takes the "/" of the starting of pathname
this.pathname = (parser.pathname.charAt(0) !== "/" ? "/" : "") + parser.pathname;
}
Uso ( demo JSFiddle aqui ):
var myUrl = new ParsedUrl("http://www.example.com:8080/path?query=123#fragment");
Resultado:
{
hash: "#fragment"
host: "www.example.com:8080"
hostname: "www.example.com"
href: "http://www.example.com:8080/path?query=123#fragment"
pathname: "/path"
port: "8080"
protocol: "http:"
search: "?query=123"
}
Para quem procura uma solução moderna que funcione no IE, Firefox e Chrome:
Nenhuma dessas soluções que usam um elemento de hiperlink funcionará da mesma maneira no chrome. Se você passar um URL inválido (ou em branco) para o chrome, ele sempre retornará o host de onde o script é chamado. Portanto, no IE, você ficará em branco, enquanto no Chrome, você receberá o host local (ou o que for).
Se você está tentando olhar para o referenciador, isso é enganoso. Você quer ter certeza de que o host que você voltou estava no URL original para lidar com isso:
function getHostNameFromUrl(url) {
// <summary>Parses the domain/host from a given url.</summary>
var a = document.createElement("a");
a.href = url;
// Handle chrome which will default to domain where script is called from if invalid
return url.indexOf(a.hostname) != -1 ? a.hostname : '';
}
A maneira do AngularJS - brinque aqui: http://jsfiddle.net/PT5BG/4/
<!DOCTYPE html>
<html>
<head>
<title>Parse URL using AngularJS</title>
</head>
<body ng-app ng-controller="AppCtrl" ng-init="init()">
<h3>Parse URL using AngularJS</h3>
url: <input type="text" ng-model="url" value="" style="width:780px;">
<ul>
<li>href = {{parser.href}}</li>
<li>protocol = {{parser.protocol}}</li>
<li>host = {{parser.host}}</li>
<li>hostname = {{parser.hostname}}</li>
<li>port = {{parser.port}}</li>
<li>pathname = {{parser.pathname}}</li>
<li>hash = {{parser.hash}}</li>
<li>search = {{parser.search}}</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script>
function AppCtrl($scope) {
$scope.$watch('url', function() {
$scope.parser.href = $scope.url;
});
$scope.init = function() {
$scope.parser = document.createElement('a');
$scope.url = window.location;
}
}
</script>
</body>
</html>
$document
e $window
serviços
Solução simples e robusta usando o padrão do módulo. Isso inclui uma correção para o IE, na qual pathname
nem sempre há uma barra invertida ( /
).
Eu criei um Gist junto com um JSFiddle que oferece um analisador mais dinâmico. Eu recomendo que você dê uma olhada e forneça feedback.
var URLParser = (function (document) {
var PROPS = 'protocol hostname host pathname port search hash href'.split(' ');
var self = function (url) {
this.aEl = document.createElement('a');
this.parse(url);
};
self.prototype.parse = function (url) {
this.aEl.href = url;
if (this.aEl.host == "") {
this.aEl.href = this.aEl.href;
}
PROPS.forEach(function (prop) {
switch (prop) {
case 'hash':
this[prop] = this.aEl[prop].substr(1);
break;
default:
this[prop] = this.aEl[prop];
}
}, this);
if (this.pathname.indexOf('/') !== 0) {
this.pathname = '/' + this.pathname;
}
this.requestUri = this.pathname + this.search;
};
self.prototype.toObj = function () {
var obj = {};
PROPS.forEach(function (prop) {
obj[prop] = this[prop];
}, this);
obj.requestUri = this.requestUri;
return obj;
};
self.prototype.toString = function () {
return this.href;
};
return self;
})(document);
{
"protocol": "https:",
"hostname": "www.example.org",
"host": "www.example.org:5887",
"pathname": "/foo/bar",
"port": "5887",
"search": "?a=1&b=2",
"hash": "section-1",
"href": "https://www.example.org:5887/foo/bar?a=1&b=2#section-1",
"requestUri": "/foo/bar?a=1&b=2"
}
{
"protocol": "ftp:",
"hostname": "www.files.com",
"host": "www.files.com:22",
"pathname": "/folder",
"port": "22",
"search": "?id=7",
"hash": "",
"href": "ftp://www.files.com:22/folder?id=7",
"requestUri": "/folder?id=7"
}
Use https://www.npmjs.com/package/uri-parse-lib para isso
var t = parserURI("http://user:pass@example.com:8080/directory/file.ext?query=1&next=4&sed=5#anchor");
Por que não o usa?
$scope.get_location=function(url_str){
var parser = document.createElement('a');
parser.href =url_str;//"http://example.com:3000/pathname/?search=test#hash";
var info={
protocol:parser.protocol,
hostname:parser.hostname, // => "example.com"
port:parser.port, // => "3000"
pathname:parser.pathname, // => "/pathname/"
search:parser.search, // => "?search=test"
hash:parser.hash, // => "#hash"
host:parser.host, // => "example.com:3000"
}
return info;
}
alert( JSON.stringify( $scope.get_location("http://localhost:257/index.php/deploy/?asd=asd#asd"),null,4 ) );
Você também pode usar a parse_url()
função do projeto Locutus (antigo php.js).
Código:
parse_url('http://username:password@hostname/path?arg=value#anchor');
Resultado:
{
scheme: 'http',
host: 'hostname',
user: 'username',
pass: 'password',
path: '/path',
query: 'arg=value',
fragment: 'anchor'
}
function parseUrl(url) {
var m = url.match(/^(([^:\/?#]+:)?(?:\/\/((?:([^\/?#:]*):([^\/?#:]*)@)?([^\/?#:]*)(?::([^\/?#:]*))?)))?([^?#]*)(\?[^#]*)?(#.*)?$/),
r = {
hash: m[10] || "", // #asd
host: m[3] || "", // localhost:257
hostname: m[6] || "", // localhost
href: m[0] || "", // http://username:password@localhost:257/deploy/?asd=asd#asd
origin: m[1] || "", // http://username:password@localhost:257
pathname: m[8] || (m[1] ? "/" : ""), // /deploy/
port: m[7] || "", // 257
protocol: m[2] || "", // http:
search: m[9] || "", // ?asd=asd
username: m[4] || "", // username
password: m[5] || "" // password
};
if (r.protocol.length == 2) {
r.protocol = "file:///" + r.protocol.toUpperCase();
r.origin = r.protocol + "//" + r.host;
}
r.href = r.origin + r.pathname + r.search + r.hash;
return m && r;
};
parseUrl("http://username:password@localhost:257/deploy/?asd=asd#asd");
Funciona com URLs absolutos e relativos
abc://username:password@example.com:123/path/data?key=value&key2=value2#fragid1
Pare de reinventar a roda. Use https://github.com/medialize/URI.js/
var uri = new URI("http://example.org:80/foo/hello.html");
// get host
uri.host(); // returns string "example.org:80"
// set host
uri.host("example.org:80");
Basta usar a biblioteca url.js (para web e node.js).
https://github.com/websanova/js-url
url: http://example.com?param=test#param=again
url('?param'); // test
url('#param'); // again
url('protocol'); // http
url('port'); // 80
url('domain'); // example.com
url('tld'); // com
etc...
um hack simples com a primeira resposta
var getLocation = function(href=window.location.href) {
var l = document.createElement("a");
l.href = href;
return l;
};
isso pode ser usado mesmo sem argumento para descobrir o nome do host atual getLocation (). nome do host fornecerá o nome do host atual
hostname
epathname
diretamente dolocation
objeto.