Sådan koder du en URL ved hjælp af JavaScript

URL-kodning , også kendt som procent-kodning , er en proces med indkodning af specialtegn i en URL for at gøre de overførte data mere sikre og pålidelige. Det hjælper med at undgå angreb på tværs af websteder, mens du kalder en ekstern webtjeneste.

Der kan være to typer tegn i en URL:reserveret og ureserveret . De reserverede tegn er de tegn, der har en særlig betydning i en URL. For eksempel ? , / , # , : , osv. er reserverede tegn, og de må ikke være en del af forespørgselsstrenge eller stisegmenter. Ureserverede tegn har ingen speciel betydning. Ved hjælp af URL-kodning konverteres disse tegn til specielle tegnsekvenser.

I denne artikel lærer du, hvordan du koder en URL ved hjælp af JavaScript indbyggede funktioner. JavaScript giver to funktioner til at hjælpe dig med at kode en URL:encodeURI() og encodeURIComponent() . Begge disse metoder er beregnet til at blive brugt til forskellige anvendelsestilfælde. Lad os starte med det første.

encodeURI()

encodeURI() metode er beregnet til at kode en komplet URL. Det antager, at inputtet er en fuld URL med nogle specialtegn, der skal indkodes. Derfor gør den ikke indkode de reserverede tegn (~!$&@#*()=:/,;?+ ).

Lad os se på et eksempel:

const url = 'http://example.com/!learn javascript$/';

// encode complete URL
const encodedUrl = encodeURI(url);

// print encoded URL
console.log(encodedUrl);

// output: http://example.com/!learn%20javascript$/

encodeURIComponent()

encodeURIComponent funktion skal bruges til at kode en enkelt URL-komponent (som forespørgselsstrengparameter) i stedet for den komplette URL. Den bruger UTF-8 indkodningsskema og koder alle tegn med speciel betydning undtagen -_.!~*'() .

Hvis du bruger encodeURIComponent() for at kode en fuld URL, alt inklusive sti-separatorer (/ ) vil blive kodet som vist nedenfor:

const url = 'http://example.com/!learn javascript$/';

// encode complete URL
const encodedUrl = encodeURIComponent(url);

// print encoded URL
console.log(encodedUrl);

// output: http%3A%2F%2Fexample.com%2F!learn%20javascript%24%2F

Ideelt set bør du bruge encodeURIComponent() metode kun til kodning af forespørgselsstrengparametre eller stisegmenter. Her er et eksempel:

const baseUrl = 'http://www.google.com/search?q=';
const query = 'Nodejs & JavaScript'

// encode query string
const encodedQuery = encodeURIComponent(query);

// build full URL
const url = baseUrl + encodedQuery;

// print full URL
console.log(url);

// output
// http://www.google.com/search?q=Nodejs%20%26%20JavaScript

Du skal ringe til encodeURIComponent() metode for hver enkelt forespørgselsstrengparameter, som kan indeholde specialtegn for at undgå netværksfejl og uventet svar.

Bemærk: MDN foreslår en forbedring for at overholde RFC 3986-standarden (som forbeholder sig ! , ' , ( , ) og * tegn) ved at implementere følgende metode:

const fixedEncodeURIComponent = (str) => {
    return encodeURIComponent(str).replace(/[!'()*]/g, (c) => {
        return '%' + c.charCodeAt(0).toString(16);
    });
}

console.log(fixedEncodeURIComponent('node * ! javascript'));

// output: node%20%2a%20%21%20javascript

Læs næste: Sådan afkoder du en URL ved hjælp af JavaScript