logo

Rychlý tip:Nejjednodušší způsob, jak analyzovat adresy URL pomocí JavaScriptu

Jedním z mých nejoblíbenějších triků JavaScriptu je technika pro analýzu adres URL na části (hostitel, cesta, řetězec dotazu atd.), která nevyžaduje žádné knihovny ani pokročilé regulární výrazy. Využívá pouze sílu DOM, přesněji kotevní prvek <a> .

Jako součást běžné sady vlastností, které prohlížeče přiřazují kotevním prvkům, existuje několik dalších, které napodobují vlastnosti location objekt. Dovolte mi demonstrovat:

$(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;
}

Pro pohodlí zde používám jQuery, ale můžete stejně snadno použít čistý JavaScript vytvořením prvku kotvy s var a = document.createElement('a') a poté přiřazením adresy URL a.href přímo.

A zde je další, trochu složitější příklad, který vám umožní psát do textového pole a analyzovat URL v reálném čase:

$(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;
}

Jediný zásadní rozdíl je v tom, že poslouchám na vstup událost (ve starších IE není podporována, tam budete muset stisknout klávesu), která upozorní posluchače události na každou změnu hodnoty pole.

Upravte externí odkazy jinak

Jednou z užitečných aplikací této techniky je zacházet s externími odkazy odlišně. Vedle každého odkazu můžete přidat ikonu, která ukazuje mimo web, nebo můžete dokonce zobrazit nějakou přechodnou stránku, která lidi upozorní, že jsou přesměrováni na web třetí strany. Pro detekci externích odkazů porovnáme vlastnosti hostname prvku DOM a objektu location:

$(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:' ⇲';
}

Tímto končí dnešní rychlý tip! Doufám, že vám tato technika bude užitečná. Víte o dalších skvělých věcech, kterých lze dosáhnout pomocí DOM? Podělte se o ně v sekci komentářů.


No