logo

Sugerencia rápida:la forma más fácil de analizar URL con JavaScript

Uno de mis trucos de JavaScript favoritos de todos los tiempos es una técnica para analizar URL en partes (host, ruta, cadena de consulta, etc.) que no requiere bibliotecas ni expresiones regulares avanzadas. Utiliza solo el poder del DOM, y más precisamente, el elemento ancla <a> .

Como parte del conjunto habitual de propiedades que los navegadores asignan a los elementos de anclaje, hay algunas más que imitan las propiedades del location objeto. Déjame demostrarte:

$(function(){

    // The URL we want to parse
    var url = 'https://tutorialzine.com/2013/07/quick-tip-parse-urls/?key=value#comments';

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

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

Estoy usando jQuery aquí por conveniencia, pero podrías usar JavaScript puro fácilmente creando el elemento ancla con var a = document.createElement('a') y luego asignando la URL a a.href directamente.

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

$(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('https://tutorialzine.com/2013/07/quick-tip-parse-urls/?key=value#comments');

    // Trigger the input event
    url.trigger('input');
});
<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>
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 gran diferencia aquí es que estoy escuchando la entrada evento (no compatible con IE anteriores, tendrá que presionar una tecla allí) que notifica al detector de eventos cada cambio en el valor del campo.

Estilo de enlaces externos diferente

Una aplicación útil de esta técnica es tratar los enlaces externos de manera diferente. Puede agregar un ícono al lado de cada enlace que apunte fuera del sitio, o incluso puede mostrar algún tipo de página intermedia que avise a las personas de que están siendo redirigidos a un sitio web de terceros. Para detectar enlaces externos, compararemos las propiedades del nombre de host del elemento DOM y el objeto de ubicación:

$(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');

});
<a href="?page=123">Page 1</a>
<a href="/page2.html">Page 2</a>
<a href="https://demo.tutorialzine.com/">Page 3</a>
<a href="https://tutorialzine.com/page3.html">Page 4</a>
<a href="https://google.com/">Page 5</a>
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:' ⇲';
}

¡Esto concluye el consejo rápido de hoy! Espero que encuentres útil esta técnica. ¿Conoces otras cosas geniales que se pueden lograr con el DOM? Compártelas en la sección de comentarios.


No