logo
 JavaScript >> Javascript tutorial >  >> Tags >> URL

Hurtigt tip:Den nemmeste måde at parse URL'er med JavaScript

Et af mine alle tiders yndlings JavaScript-tricks er en teknik til at parse URL'er i dele (vært, sti, forespørgselsstreng osv.), der ikke kræver nogen biblioteker eller avancerede regulære udtryk. Det bruger kun kraften fra DOM, og mere præcist, ankerelementet <a> .

Som en del af det almindelige sæt egenskaber, som browsere tildeler til ankerelementer, er der nogle flere, der efterligner egenskaberne for location objekt. Lad mig demonstrere:

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

Jeg bruger jQuery her for nemheds skyld, men du kan lige så nemt bruge ren JavaScript ved at oprette ankerelementet med var a = document.createElement('a') , og derefter tildele URL'en til a.href direkte.

Og her er et andet, lidt mere komplekst eksempel, som lader dig skrive i et tekstfelt og analysere URL'en i realtid:

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

Den eneste store forskel her er, at jeg lytter efter input hændelse (understøttes ikke i ældre IE'er, du bliver nødt til at bruge tastetryk der), som underretter hændelseslytteren ved hver ændring af feltets værdi.

Stil eksterne links anderledes

En nyttig anvendelse af denne teknik er at behandle eksterne links anderledes. Du kan tilføje et ikon ud for hvert link, der peger væk fra webstedet, eller du kan endda vise en slags mellemside, der advarer folk om, at de bliver omdirigeret til et tredjepartswebsted. For at opdage eksterne links sammenligner vi egenskaberne for værtsnavne for DOM-elementet og lokationsobjektet:

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

Dette afslutter dagens hurtige tip! Jeg håber, at du finder denne teknik nyttig. Kender du til andre fede ting, der kan opnås med DOM? Del dem i kommentarfeltet.


No