logo

Snelle tip:de eenvoudigste manier om URL's te ontleden met JavaScript

Een van mijn favoriete JavaScript-trucs aller tijden is een techniek voor het ontleden van URL's in delen (host, pad, queryreeks enz.) waarvoor geen bibliotheken of geavanceerde reguliere expressies nodig zijn. Het gebruikt alleen de kracht van de DOM, en meer precies, het ankerelement <a> .

Als onderdeel van de reguliere set eigenschappen die browsers toewijzen aan ankerelementen, zijn er nog een paar die de eigenschappen van de location nabootsen object. Laat me demonstreren:

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

Ik gebruik hier jQuery voor het gemak, maar je kunt net zo gemakkelijk pure JavaScript gebruiken door het ankerelement te maken met var a = document.createElement('a') , en dan de URL toe te wijzen aan a.href rechtstreeks.

En hier is nog een, wat complexer voorbeeld, waarmee je in een tekstveld kunt typen en de URL in realtime kunt parseren:

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

Het enige grote verschil hier is dat ik luister naar de invoer event (niet ondersteund in oudere IE's, u zult daar de toetsaanslag moeten gebruiken) die de gebeurtenislistener op de hoogte stelt bij elke wijziging van de waarde van het veld.

Externe links anders stylen

Een nuttige toepassing van deze techniek is om externe links anders te behandelen. U kunt een pictogram toevoegen naast elke link die naar buiten de site verwijst, of u kunt zelfs een soort tussenpagina weergeven die mensen waarschuwt dat ze worden omgeleid naar een website van een derde partij. Om externe links te detecteren, zullen we de hostnaam-eigenschappen van het DOM-element en het locatie-object vergelijken:

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

Hiermee is de snelle tip van vandaag afgesloten! Ik hoop dat je deze techniek nuttig vindt. Weet je nog andere leuke dingen die met de DOM kunnen worden bereikt? Deel ze in het commentaargedeelte.


No