Me gustaria tomar una cuerda
var a = "http://example.com/aa/bb/"
y procesarlo en un objeto tal que
a.hostname == "example.com"
y
a.pathname == "/aa/bb"
Me gustaria tomar una cuerda
var a = "http://example.com/aa/bb/"
y procesarlo en un objeto tal que
a.hostname == "example.com"
y
a.pathname == "/aa/bb"
Respuestas:
La forma moderna:
new URL("http://example.com/aa/bb/")
Devuelve un objeto con propiedades hostname
y pathname
, junto con algunos otros .
El primer argumento es una URL relativa o absoluta; si es relativo, debe especificar el segundo argumento (la URL base). Por ejemplo, para una URL relativa a la página actual:
new URL("/aa/bb/", location)
Además de los navegadores, esta API también está disponible en Node.js desde v7 hasta 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
elimina la barra inclinada principal, mientras que los otros navegadores no. Entonces terminará con /path
o path
, dependiendo de su navegador.
encontrado aquí: 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;
y todas las líneas siguientes funcionan. Lo probé en Chrome e IE9 justo ahora.
pathname
no incluye la barra inclinada principal en IE. Imagínate. : D
http:
incluso si pasa solo domain.com
a href (sin ningún protocolo). Quería usar esto para verificar si faltaba el protocolo y, de ser así, podría agregarlo, pero supone que http: por lo tanto, no pude usarlo para este propósito.
Aquí hay una función simple que usa una expresión regular que imita el a
comportamiento de etiqueta.
Pros
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:
Aquí hay un desglose de la expresión 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"
devuelve el currentUrl.
Si desea pasar su propia cadena como una URL ( no funciona en IE11 ):
var loc = new URL("http://example.com:3000/pathname/?search=test#hash")
Entonces puedes analizarlo 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"
La respuesta de freddiefujiwara es bastante buena, pero también necesitaba admitir URL relativas dentro de Internet Explorer. Se me ocurrió la siguiente solución:
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;
};
Ahora úselo para obtener las propiedades necesarias:
var a = getLocation('http://example.com/aa/bb/');
document.write(a.hostname);
document.write(a.pathname);
Ejemplo de JSFiddle: http://jsfiddle.net/6AEAB/
var locationHost = (location.port !== '80' && location.port !== '443') ? location.host : location.hostname;
var locationOrigin = location.protocol + '//' + locationHost;
js-uri (disponible en Google Code) toma una URL de cadena y resuelve un objeto URI a partir de ella:
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
¿Qué pasa con la expresión regular simple?
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
y verá por qué la expresión regular simple no lo corta. Ahora, arroje algo inválido y también debería rescatarse de manera predecible.
hoy me encuentro con este problema y encontré: URL - API web MDN
var url = new URL("http://test.example.com/dir/subdir/file.html#hash");
Este regreso:
{ 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: "" }
¡Espero que mi primera contribución te ayude!
Aquí hay una versión que copié de https://gist.github.com/1847816 , pero la reescribí para que sea más fácil de leer y depurar. El propósito de copiar los datos de anclaje a otra variable llamada "resultado" es porque los datos de anclaje son bastante largos, por lo que copiar un número limitado de valores al resultado ayudará a simplificar el 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;
}
El análisis de URL de navegador cruzado , resuelve el problema de ruta relativa para IE 6, 7, 8 y 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 ( demostración JSFiddle aquí ):
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 aquellos que buscan una solución moderna que funcione en IE, Firefox y Chrome:
Ninguna de estas soluciones que usan un elemento de hipervínculo funcionará igual en Chrome.Si pasa una URL no válida (o en blanco) a Chrome, siempre devolverá el host desde donde se llama el script. Entonces, en IE, quedará en blanco, mientras que en Chrome obtendrá localhost (o lo que sea).
Si está tratando de mirar al referente, esto es engañoso. Deberás asegurarte de que el host que recibiste estaba en la URL original para lidiar con esto:
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 : '';
}
La forma AngularJS: violín aquí: 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
y $window
servicios
Solución simple y robusta utilizando el patrón del módulo. Esto incluye una solución para IE donde pathname
no siempre tiene una barra diagonal ( /
).
He creado un Gist junto con un JSFiddle que ofrece un analizador más dinámico. Le recomiendo que lo revise y envíe sus comentarios.
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 esto
var t = parserURI("http://user:pass@example.com:8080/directory/file.ext?query=1&next=4&sed=5#anchor");
¿Por qué no lo usas?
$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 ) );
También puede usar la parse_url()
función del proyecto Locutus (anteriormente 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 con URL absolutas y relativas.
abc://username:password@example.com:123/path/data?key=value&key2=value2#fragid1
Deja de reinventar la rueda. 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");
Simplemente use la biblioteca url.js (para web y 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...
un simple truco con la primera respuesta
var getLocation = function(href=window.location.href) {
var l = document.createElement("a");
l.href = href;
return l;
};
esto puede usarse incluso sin argumento para averiguar el nombre de host actual getLocation (). hostname dará el nombre de host actual
hostname
ypathname
directamente desde ellocation
objeto.