que - obtener parametros url javascript

JavaScript: obtenga una porción de la ruta URL

Question

¿Cuál es la forma correcta de extraer solo el camino de una URL usando JavaScript?

Ejemplo:
Tengo URL
http://www.somedomain.com/account/search?filter=a#top
pero me gustaría obtener esta porción
/ cuenta / búsqueda

Estoy usando jQuery si hay algo allí que pueda aprovecharse.

Answer 1

Las otras respuestas usan document.createElement o window.location que no son compatibles con entornos como node, así que escribí un component que funcionará tanto con javascript en el lado del servidor como en navegadores.

Puede usar parseUrl () para obtener un objeto similar al de la respuesta de Nicole:

var url = ''http://www.somedomain.com/account/search?filter=a#top'';
var urlObject = parseUrl(url);

urlObject.href         // ''http://www.somedomain.com/account/search?filter=a#top''
urlObject.searchParams // { filter: ''a'' }
urlObject.hash         // ''#top''
urlObject.search       // ''?filter=a''
urlObject.protocol     // ''http:''
urlObject.host         // ''www.somedomain.com''
urlObject.hostname     // ''www.somedomain.com''
urlObject.port.        // ''''
urlObject.path         // ''/account/search''

Siéntase libre de importar el componente para usar el método parseUrl ().

Answer 2

Si esta es la url actual use window.location.pathname de lo contrario use esta expresión regular:

var reg = /.+?/:////.+?(//.+?)(?:#|/?|$)/;
var pathname = reg.exec( ''http://www.somedomain.com/account/search?filter=a#top'' )[1];

Answer 3

Hay una propiedad del objeto window.location incorporado que proporcionará eso para la ventana actual.

// If URL is http://www.somedomain.com/account/search?filter=a#top

window.location.pathname // /account/search

// For reference:

window.location.host     // www.somedomain.com (includes port if there is one)
window.location.hostname // www.somedomain.com
window.location.hash     // #top
window.location.href     // http://www.somedomain.com/account/search?filter=a#top
window.location.port     // (empty string)
window.location.protocol // http:
window.location.search   // ?filter=a  

Actualiza, usa las mismas propiedades para cualquier URL:

Resulta que este esquema está siendo estandarizado como una interfaz llamada URLUtils , y ¿adivinen qué? Tanto el objeto window.location existente como los elementos de anclaje implementan la interfaz.

De modo que puede usar las mismas propiedades anteriores para cualquier URL , solo cree un ancla con la URL y acceda a las propiedades:

var el = document.createElement(''a'');
el.href = "http://www.somedomain.com/account/search?filter=a#top";

el.host        // www.somedomain.com (includes port if there is one[1])
el.hostname    // www.somedomain.com
el.hash        // #top
el.href        // http://www.somedomain.com/account/search?filter=a#top
el.pathname    // /account/search
el.port        // (port if there is one[1])
el.protocol    // http:
el.search      // ?filter=a

[1]: el soporte del navegador para las propiedades que incluyen el puerto no es consistente, consulte: http://jessepollak.me/chrome-was-wrong-ie-was-right

Esto funciona en las últimas versiones de Chrome y Firefox . No tengo versiones de Internet Explorer para probar, por lo tanto, pruébelo con el ejemplo de JSFiddle.

Ejemplo JSFiddle

También hay un próximo objeto de URL que ofrecerá este soporte para las propias URL, sin el elemento de anclaje. Parece que no hay navegadores estables que lo soporten en este momento, pero se dice que viene en Firefox 26. Cuando creas que podrías tener soporte, pruébalo aquí .

Answer 4

window.location.href.split(''/'');

Le dará una matriz que contiene todas las partes de la URL, a las que puede acceder como una matriz normal.

O una solución cada vez más elegante sugerida por @Dylan, con solo las partes de ruta:

window.location.pathname.split(''/'');