Codificar URL en JavaScript
¿Cómo se codifica de forma segura una URL utilizando JavaScript de modo que pueda colocarse en una cadena GET?
var myUrl = "http://example.com/index.html?param=1&anotherParam=2";
var myOtherUrl = "http://example.com/index.html?url=" + myUrl;
¿ Supongo que necesitas codificar la myUrlvariable en esa segunda línea?
Consulte las funciones integradas encodeURIComponent(str) y encodeURI(str) .
En tu caso esto debería funcionar:
var myOtherUrl =
"http://example.com/index.html?url=" + encodeURIComponent(myUrl);
Tienes tres opciones:
escape()no codificará:@*/+encodeURI()no codificará:~!@#$&*()=:/,;?+'encodeURIComponent()no codificará:~!*()'
Pero en su caso, si desea pasar una URL a un GETparámetro de otra página, debe usar escapeo encodeURIComponent, pero no encodeURI.
Consulte la pregunta de desbordamiento de pila Mejores prácticas: escape o encodeURI / encodeURIComponent para obtener más información.
Seguir con encodeURIComponent(). La función encodeURI()no se molesta en codificar muchos caracteres que tienen importancia semántica en las URL (por ejemplo, "#", "?" y "&"). escape()está en desuso y no se molesta en codificar caracteres "+", que se interpretarán como espacios codificados en el servidor (y, como señalaron otros aquí, no codifica correctamente en URL caracteres que no sean ASCII).
Hay una buena explicación de la diferencia entre encodeURI()yencodeURIComponent() otros lugares. Si desea codificar algo para que pueda incluirse de forma segura como un componente de un URI (por ejemplo, como un parámetro de cadena de consulta), debe utilizar encodeURIComponent().
La mejor respuesta es usar valoresencodeURIComponent en la cadena de consulta (y en ningún otro lugar).
Sin embargo, encuentro que muchas API más antiguas quieren reemplazar " " con "+", por lo que tuve que usar lo siguiente:
const value = encodeURIComponent(value).replaceAll('%20','+');
const url = 'http://example.com?lang=en&key=' + value
escapese implementa de manera diferente en diferentes navegadores y encodeURIno codifica muchos caracteres (como # e incluso /); está diseñado para usarse en un URI/URL completo sin romperlo, lo cual no es muy útil ni seguro.
Y como @Jochem señala a continuación, es posible que desee utilizar encodeURIComponent()un nombre de carpeta (cada uno), pero por alguna razón estas API no parecen querer +nombres de carpeta, por lo que lo antiguo encodeURIComponentfunciona muy bien.
Ejemplo:
const escapedValue = encodeURIComponent(value).replaceAll('%20','+');
const escapedFolder = encodeURIComponent('My Folder'); // no replace
const url = `http://example.com/${escapedFolder}/?myKey=${escapedValue}`;
