Cómo codificar una URL usando JavaScript

Codificación de URL , también conocido como codificación porcentual , es un proceso de codificación de caracteres especiales en una URL para que los datos transmitidos sean más seguros y confiables. Ayuda a evitar ataques entre sitios al llamar a un servicio web remoto.

Puede haber dos tipos de caracteres en una URL:reservados y sin reservas . Los caracteres reservados son aquellos caracteres que tienen un significado especial dentro de una URL. Por ejemplo, ? , / , # , : , etc. son caracteres reservados y no deben formar parte de cadenas de consulta o segmentos de ruta. Los caracteres no reservados no tienen un significado especial. Mediante la codificación de URL, estos caracteres se convierten en secuencias de caracteres especiales.

En este artículo, aprenderá a codificar una URL utilizando funciones integradas de JavaScript. JavaScript proporciona dos funciones para ayudarlo a codificar una URL:encodeURI() y encodeURIComponent() . Ambos métodos están destinados a ser utilizados para diferentes casos de uso. Comencemos con el primero.

encodeURI()

Los encodeURI() El método está destinado a codificar una URL completa. Asume que la entrada es una URL completa con algunos caracteres especiales que necesitan codificación. Por lo tanto, no codificar los caracteres reservados (~!$&@#*()=:/,;?+ ).

Veamos un ejemplo:

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

El encodeURIComponent La función debe usarse para codificar un solo componente de URL (como un parámetro de cadena de consulta) en lugar de la URL completa. Utiliza el UTF-8 esquema de codificación y codifica todos los caracteres con significado especial excepto -_.!~*'() .

Si usa encodeURIComponent() para codificar una URL completa, todo incluido los separadores de ruta (/ ) se codificará como se muestra a continuación:

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

Idealmente, deberías usar el encodeURIComponent() método solo para codificar parámetros de cadena de consulta o segmentos de ruta. Aquí hay un ejemplo:

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

Debes llamar al encodeURIComponent() para cada parámetro de cadena de consulta individual, que puede incluir caracteres especiales para evitar errores de red y respuestas inesperadas.

Nota: MDN sugiere una mejora para adherirse al estándar RFC 3986 (que se reserva ! , ' , ( , ) y * caracteres) implementando el siguiente método:

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

Leer a continuación: Cómo decodificar una URL usando JavaScript