contenido 25 de julio de 2014 a las 13.06
   Imprimir artículo
elWebmaster.com

La forma fácil de procesar URLs con Javacript


javascript-logo-wideUno de los mejores trucos de Javascript es una técnica para procesar URLs en partes (host, la ruta, string consulta, etc) que no requiere de ninguna biblioteca o expresiones regulares avanzadas. Se utiliza sólo la potencia de la DOM, y, más precisamente, el elemento de anclaje <a>.
Como parte de la serie regular de las propiedades que los navegadores asignan para anclar elementos, hay algunos más que imitan las propiedades del objeto de ubicación. Veamos la demostración:

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>

Javascript

$(function(){

// Ruta que deseamos procesar

var url = ‘http://tutorialzine.com/2013/07/quick-tip-parse-urls/?key=value#comments’;

// La magia: crear un nuevo elemento ancla, y configurar el URL como su atributo href.

// Ve que se está accediendo al elemento DOM dentro del objeto jQuery con [0]:

var a = $(‘<a>’, { href:url } )[0];

$(‘#host’).val(a.hostname);

$(‘#path’).val(a.pathname);

$(‘#query’).val(a.search);

$(‘#hash’).val(a.hash);

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;

}

Se está utilizando jQuery aquí por conveniencia, pero se puede usar con la misma facilidad con JavaScript puro mediante la creación del elemento de anclaje con var a = document.createElement (‘a’), y luego la asignación de la dirección URL para a.href directamente.

Y aquí está otro ejemplo un poco más complejo, lo que te permite escribir en un campo de texto y analiza la URL en tiempo real:

Javascript

$(function(){

// Coloca en cache los campos

var url = $(‘#url’), host = $(‘#host’), path = $(‘#path’),

query = $(‘#query’), hash = $(‘#hash’);

// Escucha por el evento de entrada y actualiza los campos

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);

});

// Configura una URL por defecto

url.val(‘http://tutorialzine.com/2013/07/quick-tip-parse-urls/?key=value#comments’);

// Dispara el evento de entrada

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 única diferencia importante es que estoy escuchando en el evento de entrada (no se admite en versiones antiguas de Internet explorer, tendrá que utilizar keypress allí) que notifica al detector de eventos en cada cambio del valor del campo.

Dar estilo a los enlaces externos de manera diferente

Una aplicación útil de esta técnica es tratar a los enlaces externos de manera diferente. Puedes agregar un icono al lado de cada enlace que apunta fuera del sitio, o incluso se puede mostrar algún tipo de página intermedia que avisa a la gente que están siendo redirigidos a un sitio web de terceros. Para detectar los enlaces externos, vamos a comparar las propiedades de nombre de host del elemento DOM y el objeto de la propiedad:

Javascript

$(function(){

// Obtiene solo los enlaces externos:

var external = $(‘a[href]’).filter(function(){

return this.hostname != location.hostname;

});

// En el retorno anterior, puedes comparar la propiedad del protocolo si deseas distinguir los enlaces http de los https

external.addClass(‘external’);

});

HTML

<a href=”?page=123″>Page 1</a>

<a href=”/page2.html”>Page 2</a>

<a href=”http://demo.tutorialzine.com/”>Page 3</a>

<a href=”http://tutorialzine.com/page3.html”>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 original del artículo: tutorialzine

Traducción realizada por elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder