La manera más sencilla de parsear URLs con Javascript

Uno de mis trucos favoritos de todos los tiempos es el de trocear una URL en partes (host, ruta, query...) que no requiere de ninguna librería o expresión regular avanzada. Para llevar a cabo esto solamente necesito la potencia del DOM, y en concreto, del elemento de ancla, es decir, el a.

Javascript

$(function(){

 // The URL we want to parse
 var url = 'http://programacion.net/articulo/procesamiento_de_imagenes_utilizando_python_1451';

 // The magic: create a new anchor element, and set the URL as its href attribute.
 // Notice that I am accessing the DOM element inside the jQuery object with [0]:
 var a = $('<a>', { href:url } )[0];

 $('#host').val(a.hostname);
 $('#path').val(a.pathname);
 $('#query').val(a.search);
 $('#hash').val(a.hash);

 // Even more:
 // a.port, a.protocol,
 // a.origin (not available in older IE versions)

});

HTML

<ul>
 <li><label for="host">Host:</label> <input type="text" id="host" /></li>
 <li><label for="path">Path:</label> <input type="text" id="path" /></li>
 <li><label for="query">Query String:</label> <input type="text" id="query" /></li>
 <li><label for="hash">Hash:</label> <input type="text" id="hash" /></li>
</ul>

CSS

html{
    background-color:#f4f4f4;
    font:14px/1.4 sans-serif;
    color:#666;
}

ul{
    list-style:none;
    width:300px;
    margin:50px auto;
}

li{
    padding:4px;
}

input{
    font:inherit;
    border:1px solid #ccc;
    border-radius:2px;
    padding:2px 5px;
}

label{
    width:90px;
    display:inline-block;
    text-align:right;
}

Utilizo jQuery por conveniencia, pero puedes utilizar sin problemas javascript puro para crear elementos a con var a = document.createElement('a'), y luego asignar la URL al a.href directamente. Aquí tienes un ejemplo un poco más complejo, que te permite escribir en un campo de texto y analizar la URL en tiempo real.

Javascript

$(function(){

 // Cache the fields
 var url = $('#url'), host = $('#host'), path = $('#path'), 
 query = $('#query'), hash = $('#hash');

 // Listen for the input event and update the fields

 url.on('input', function(){
 var a = $('<a>', { href:url.val() } )[0];

 host.val(a.hostname);
 path.val(a.pathname);
 query.val(a.search);
 hash.val(a.hash);
 });

 // Set a default URL 
 url.val('http://programacion.net/articulo/procesamiento_de_imagenes_utilizando_python_1451');

 // Trigger the input event
 url.trigger('input');
});

HTML

<div>
 <label for="url">Enter a URL:</label> <input type="text" id="url" size="50" />
</div>

<ul id="parts">
 <li><label for="host">Host:</label> <input type="text" id="host" /></li>
 <li><label for="path">Path:</label> <input type="text" id="path" /></li>
 <li><label for="query">Query String:</label> <input type="text" id="query" /></li>
 <li><label for="hash">Hash:</label> <input type="text" id="hash" /></li>
</ul>

CSS

html{
    background-color:#f4f4f4;
    font:14px/1.4 sans-serif;
    color:#666;
}

ul{
    list-style:none;
    width:300px;
    margin:0 auto;
}

li{
    padding:4px;
}

input{
    font:inherit;
    border:1px solid #ccc;
    border-radius:2px;
    padding:2px 5px;
}

label{
    width:90px;
    display:inline-block;
    text-align:right;
}

div{
    padding:40px;
    text-align:center;
}

La mayor diferencia aquí es que detecto el evento input que notifica al event listener de cada cambio de valor en el campo.

Personalizar de manera distinta los enlaces externos

Un uso muy útil de esta técnica es tratar los enlaces externos de manera diferente. Puedes añadir un icono al lado de cada enlace que apunte fuera del sitio web, o incluso puedes mostrar algún tipo de página intermedia que alerte a las visitantes de que están siendo redirigidos a un sitio web de terceros. Para detectar los enlaces externos, vamos a comparar las propiedades del elemento DOM y del objeto location:

Javascript

$(function(){

 // Get only the external links:
 var external = $('a[href]').filter(function(){
 return this.hostname != location.hostname;
 });

 // In the return above, you may also compare the protocol 
 // property if you wish to distinguish http from https links.

 external.addClass('external');

});

HTML

<a href="?page=123">Page 1</a>
<a href="/page2.html">Page 2</a>
<a href="http://programacion.net/articulo/7_excelentes_webs_para_aprender_sass_1443">Page 3</a>
<a href="http://programacion.net/articulos/1">Page 4</a>
<a href="http://google.com/">Page 5</a>

CSS

html{
    background-color:#f4f4f4;
    font:15px/1.4 sans-serif;
    color:#666;
}

body{
    padding:50px;
    text-align:center;
}

a{
    color:#999;
}

a.external{
    color:green;
}

a.external:after{
    content:' ⇲';
}

Fuente: tutorialzine.com