ultimo - ¿Cómo extraer URL base de una cadena en JavaScript?
split javascript ejemplo (17)
Estoy tratando de encontrar un método relativamente fácil y confiable para extraer la URL base de una variable de cadena usando JavaScript (o jQuery).
Por ejemplo, dado algo como:
http://www.sitename.com/article/2009/09/14/this-is-an-article/
Me gustaría obtener:
http://www.sitename.com/
Es una expresión regular la mejor apuesta? De ser así, ¿qué enunciado podría usar para asignar la URL base extraída de una cadena dada a una nueva variable?
He hecho algunas búsquedas sobre esto, pero todo lo que encuentro en el mundo de JavaScript parece girar en torno a la recopilación de esta información de la URL real del documento usando location.host o similar.
Editar: Algunos se quejan de que no tiene en cuenta el protocolo. Así que decidí actualizar el código, ya que está marcado como respuesta. Para aquellos a los que les gusta el código de una línea ... bien, lo siento por eso usamos minimizadores de código, el código debe ser legible por humanos y de esta manera es mejor ... en mi opinión.
var pathArray = location.href.split( ''/'' );
var protocol = pathArray[0];
var host = pathArray[2];
var url = protocol + ''//'' + host;
O usa la solución de David desde abajo.
En lugar de tener que dar cuenta de window.location.protocol y window.location.origin, y posiblemente perder un número de puerto específico, etc., simplemente tome todo hasta el 3er "/":
// 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);
}
Esto funciona:
location.href.split(location.pathname)[0];
Esto, funciona para mí:
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] + ''/'';
}
}
};
Los navegadores basados en WebKit, Firefox a partir de la versión 21 y las versiones actuales de Internet Explorer (IE 10 y 11) implementan location.origin .
location.origin incluye el protocolo , el dominio y opcionalmente el puerto de la URL.
Por ejemplo, location.origin de la URL http://www.sitename.com/article/2009/09/14/this-is-an-article/ es http://www.sitename.com .
Para orientar navegadores sin soporte para location.origin use el siguiente policrisel conciso:
if (typeof location.origin === ''undefined'')
location.origin = location.protocol + ''//'' + location.host;
No hay ninguna razón para hacer divisiones para obtener la ruta, el nombre de host, etc. de una cadena que sea un enlace. Solo necesitas usar un enlace
//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);
Puedes hacerlo fácilmente con jQuery añadiendo el elemento y leyendo su atributo.
No necesita usar jQuery, solo use
location.hostname
Puede usar los códigos a continuación para obtener diferentes parámetros de la URL actual
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);
Puedes hacerlo usando una expresión regular:
/(http:////)?(www)[^//]+///i
encaja ?
Si está extrayendo información de window.location.href (la barra de direcciones), utilice este código para obtener http://www.sitename.com/ :
var loc = location;
var url = loc.protocol + "//" + loc.host + "/";
Si tiene una cadena, str , que es una URL arbitraria (no window.location.href), entonces use expresiones regulares:
var url = str.match(/^(([a-z]+:)?(////)?[^//]+//).*$/)[1];
Yo, como todos en el Universo, odio leer expresiones regulares, así que lo analizaré en inglés:
- Encuentra cero o más caracteres alfabéticos seguidos de dos puntos (el protocolo, que puede omitirse)
- Seguido por // (también se puede omitir)
- Seguido de cualquier caracter excepto / (el nombre de host y el puerto)
- Seguido por /
- Seguido por lo que sea (el camino, menos el comienzo /).
No es necesario crear elementos DOM o hacer nada loco.
Si está utilizando jQuery, esta es una forma genial de manipular elementos en javascript sin agregarlos al 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
Un enfoque lightway pero completo para obtener valores básicos de una representación de cadena de una URL es la regla de expresiones regulares de Douglas Crockford:
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]+''/'' ;
Si está buscando un kit de herramientas de manipulación de URL más potente, intente con URI.js Admite getters, setter, url, normalización, etc. todo con una buena API encadenable.
Si está buscando un complemento jQuery, entonces jquery.url.js debería ayudarlo
Una forma más sencilla de hacerlo es mediante el uso de un elemento de anclaje, como sugirió @epascarello. Esto tiene la desventaja de que debe crear un elemento DOM. Sin embargo, esto se puede almacenar en caché en un cierre y reutilizar para varias 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
};
}
})();
Úselo así:
paserUrl(''http://google.com'');
Utilizo una expresión regular simple que extrae el host de la url:
function get_host(url){
return url.replace(/^((/w+:)?////[^//]+//?).*$/,''$1'');
}
y úsalo así
var url = ''http://www.sitename.com/article/2009/09/14/this-is-an-article/''
var host = get_host(url);
Tenga en cuenta que si la url no termina con a / el host no terminará en un / .
Aquí hay algunas pruebas:
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/'');
});
});
var tilllastbackslashregex = new RegExp (/^.*//); baseUrl = tilllastbackslashregex.exec (window.location.href);
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};
}
Entonces :
''http://mysite:5050/pke45#23''.url()
//OUTPUT : {host: "mysite:5050", hostname: "mysite", pathname: "/pke45", port: "5050", protocol: "http:",hash:"#23",origin:"http://mysite:5050"}
Para su solicitud, necesita:
''http://mysite:5050/pke45#23''.url().origin
Revisión 07-2017: también puede ser más elegante y tiene más características
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}
}
Entonces
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"
¡Guay!
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 + "/";
}
}
Entonces puedes usarlo así ...
var str = ''http://en.wikipedia.org/wiki/Knopf?q=1&t=2'';
var url = str.toUrl();
El valor de url será ...
{
"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"
}
El "var url" también contiene dos métodos.
var paramQ = url.getParameter(''q'');
En este caso, el valor de paramQ será 1.
var allParameters = url.getParameters();
El valor de allParameters será solo el nombre de los parámetros.
["q","t"]
Probado en IE, Chrome y Firefox.
var host = location.protocol + ''//'' + location.host + ''/'';