Ejemplo de codificación de URL de JavaScript: cómo utilizar encodeURIcomponent () y encodeURI ()

Programación

Podrías pensar eso encodeURIy encodeURIComponenthacer lo mismo, al menos por sus nombres. Y puede confundirse cuál usar y cuándo.

En este artículo, desmitificaré la diferencia entre encodeURIy encodeURIComponent.

¿Qué es un URI y en qué se diferencia de una URL?

URI son las siglas de Uniform Resource Identifier.

URL son las siglas de Uniform Resource Locator.

Todo lo que identifique de forma única un recurso es su URI, como id, nombre o número ISBN. Una URL especifica un recurso y cómo se puede acceder a él (el protocolo). Todas las URL son URI, pero no todas las URI son URL.

¿Por qué necesitamos codificar?

Las URL solo pueden tener ciertos caracteres del conjunto ASCII estándar de 128 caracteres. Los caracteres reservados que no pertenecen a este conjunto deben estar codificados.

Esto significa que debemos codificar estos caracteres al pasar a una URL. Los caracteres especiales tales como &, space, !cuando entró en una necesidad URL que se escaparon, de lo contrario pueden causar situaciones impredecibles.

Casos de uso:

  1. El usuario ha enviado valores en un formulario que puede estar en formato de cadena y debe pasarse, como campos de URL.
  2. Necesita aceptar parámetros de cadena de consulta para realizar solicitudes GET.

¿Cuál es la diferencia entre encodeURI y encodeURIComponent?

encodeURIy encodeURIComponentse utilizan para codificar identificadores uniformes de recursos (URI) reemplazando ciertos caracteres por una, dos, tres o cuatro secuencias de escape que representan la codificación UTF-8 del carácter.

encodeURIComponentdebe usarse para codificar un componente URI , una cadena que se supone que es parte de una URL.

encodeURIdebe usarse para codificar un URI o una URL existente.

Aquí hay una práctica tabla de la diferencia en la codificación de caracteres.

¿Qué caracteres están codificados?

encodeURI() no codificará: [email protected]#$&*()=:/,;?+'

encodeURIComponent() no codificará: ~!*()'

Los personajes A-Z a-z 0-9 - _ . ! ~ * ' ( )no se escapan.

Ejemplos

const url = '//www.twitter.com' console.log(encodeURI(url)) ////www.twitter.com console.log(encodeURIComponent(url)) //https%3A%2F%2Fwww.twitter.com const paramComponent = '?q=search' console.log(encodeURIComponent(paramComponent)) //"%3Fq%3Dsearch" console.log(url + encodeURIComponent(paramComponent)) ////www.twitter.com%3Fq%3Dsearch

Cuando codificar

  1. Al aceptar una entrada que puede tener espacios.

    encodeURI("//www.mysite.com/a file with spaces.html") ////www.mysite.com/a%20file%20with%20spaces.html

  2. Al crear una URL a partir de parámetros de cadena de consulta.

     let param = encodeURIComponent('mango') let url = "//mysite.com/?search=" + param + "&length=99"; ////mysite.com/?search=mango&length=99

  3. Al aceptar parámetros de consulta que pueden tener caracteres reservados.

 let params = encodeURIComponent('mango & pineapple') let url = "//mysite.com/?search=" + params; ////mysite.com/?search=mango%20%26%20pineapple

Resumen

Si tiene una URL completa, utilice encodeURI. Pero si tiene parte de una URL, use encodeURIComponent.

¿Interesado en más tutoriales y JSBytes de mi parte? Inscríbete a mi boletín de noticias. o sígueme en Twitter