¿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 el myUrl variable en esa segunda línea?

preguntado el 02 de diciembre de 08 a las 00:12

Intenta mirar en encodeURI () y decodeURI (). -

Puede utilizar esta herramienta aquí: phillihp.com/toolz/url-encode-decode -

encodeURIComponent () -

20 Respuestas

Echa un vistazo a la función incorporada encodeURIComponent (str) y encodeURI (str).
En su caso, esto debería funcionar:

var myOtherUrl = 
       "http://example.com/index.html?url=" + encodeURIComponent(myUrl);

Respondido 22 Abr '19, 08:04

¿Qué tal si agregas la explicación que dio @cms? escape también es una opción válida. - hitautodestruct

según @CMS encodeURI no es realmente seguro para la codificación de URL. - Si no

@AnaelFavre porque está destinado a codificar la URL completa, lo que no permite caracteres como :, /, @ etc. Estos 2 métodos no se deben usar de manera intercambiable, debe saber lo que está codificando para usar el método correcto. - buu nguyen

Como se mencionó en otra respuesta en esta página, este sitio detalla muy bien la razón para usar este método: brad parques

Tienes tres opciones:

  • escape() no codificará: @*/+

  • encodeURI() no codificará: ~!@#$&*()=:/,;?+'

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

Pero en tu caso, si quieres pasar un Enlance en un GET parámetro de otra página, debe usar escape or encodeURIComponent, Pero no encodeURI.

Ver la pregunta de Stack Overflow Práctica recomendada: escape o encodeURI / encodeURIComponent para mayor discusión.

contestado el 23 de mayo de 17 a las 13:05

La codificación de caracteres utilizada con escape es variable. Quédese con encodeURI y encodeURIComponent, que utilizan UTF-8. - erickson

Ten cuidado. Ese escape convierte caracteres que no son ASCII en sus secuencias de escape Unicode, como %uxxx. - opteron

Estoy usando encodeURIComponent y me doy cuenta de que no codifica los caracteres de tubería | - kevzettler

@kevzettler - ¿por qué debería hacer eso? Las tuberías no tienen importancia semántica en una URI. - apodo

@GiovanniP: Personas que permiten caracteres alemanes, franceses, japoneses, chinos, árabes como entrada y pasan estos parámetros a través de GET o POST. - Tseng

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 han señalado otros aquí, no codifica correctamente los caracteres que no son ASCII en URL).

Hay un lindo explicación de la diferencia entre encodeURI() y encodeURIComponent() en otra parte. Si desea codificar algo para que se pueda incluir de forma segura como un componente de un URI (por ejemplo, como un parámetro de cadena de consulta), desea utilizar encodeURIComponent().

contestado el 23 de mayo de 17 a las 13:05

La mejor respuesta es usar encodeURIComponent on valores en la cadena de consulta (y en ningún otro lugar).

Sin embargo, encuentro que muchas API quieren reemplazar "" con "+", así que tuve que usar lo siguiente:

const value = encodeURIComponent(value).replace('%20','+');
const url = 'http://example.com?lang=en&key=' + value

escape se implementa de manera diferente en diferentes navegadores y encodeURI no codifica muchos caracteres (como # e incluso /); está hecho 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() en un nombre de carpeta (cada), pero por alguna razón estas API no parecen querer + en los nombres de las carpetas tan simple y viejo encodeURIComponent funciona muy bien.

Ejemplo:

const escapedValue = encodeURIComponent(value).replace('%20','+');
const escapedFolder = encodeURIComponent('My Folder'); // no replace
const url = `http://example.com/${escapedFolder}/?myKey=${escapedValue}`;

Respondido 21 ago 19, 17:08

Tenga en cuenta que solo debe reemplazar% 20 con + símbolos después del primer signo de interrogación (que es la parte de 'consulta' de la URL). Digamos que quiero navegar a http://somedomain/this dir has spaces/info.php?a=this has also spaces. Debería convertirse a: http://somedomain/this%20dir%20has%spaces/info.php?a=this%20has%20also%20spaces pero muchas implementaciones permiten que '% 20' en la cadena de consulta sea reemplazado por '+'. Sin embargo, no puede reemplazar '% 20' con '+' en la sección de ruta de la URL, esto dará como resultado un error No encontrado a menos que tenga un directorio con un + en lugar de un espacio. - Jochem Kuijpers

@Jochem Kuijpers, definitivamente, no pondrías "+" en un directorio. Solo aplicaría esto a los valores de los parámetros de consulta en sí mismos (o claves si es necesario), no a la URL completa, ni siquiera a la cadena de consulta completa. - Ryan Taylor

Reemplazaría en valor en lugar de en el resultado de la codificación: njzk2

@ njzk2 desafortunadamente encodeURIComponent('+') te daría %2B, entonces tendrías que usar dos expresiones regulares ... que supongo que es la razón por la que esto funciona, porque '+' son '' se codifican de manera diferente al final. - Ryan Taylor

No hay ninguna razón para traducir% 20 a "+". La secuencia de escape válida para el espacio ASCII es% 20, no "+", que no se menciona en RFC 3986 (tools.ietf.org/html/rfc3986). "+" se utilizó en la década de 1990; ahora está obsoleto y solo se admite por razones heredadas. No lo use. - xhienne

Sugeriría usar paquete qs npm

qs.stringify({a:"1=2", b:"Test 1"}); // gets a=1%3D2&b=Test+1

es más fácil de usar con el objeto JS y le brinda la codificación de URL adecuada para todos los parámetros

Si está utilizando jQuery, iría por $.param método. Su URL codifica un objeto que asigna campos a valores, lo que es más fácil de leer que llamar a un método de escape en cada valor.

$.param({a:"1=2", b:"Test 1"}) // gets a=1%3D2&b=Test+1

Respondido el 23 de Septiembre de 20 a las 01:09

Creo que el ejemplo proporcionado es suficiente. Si necesita más información sobre $ .param en api.jquery.com/jquery.param - Maksim Kozlenko

Casi todo el mundo usa jQuery y me siento más cómodo con esto en lugar de encoreURIComponent - Cyril Duchon-Doris

encodeURIComponent () es el camino a seguir.

var myOtherUrl = "http://example.com/index.html?url=" + encodeURIComponent(myUrl);

PERO debes tener en cuenta que existen pequeñas diferencias con la versión de php urlencode() y como mencionó @CMS, no codificará todos los caracteres. Chicos en http://phpjs.org/functions/urlencode/ hizo js equivalente a phpencode():

function urlencode(str) {
  str = (str + '').toString();

  // Tilde should be allowed unescaped in future versions of PHP (as reflected below), but if you want to reflect current
  // PHP behavior, you would need to add ".replace(/~/g, '%7E');" to the following.
  return encodeURIComponent(str)
    .replace('!', '%21')
    .replace('\'', '%27')
    .replace('(', '%28')
    .replace(')', '%29')
    .replace('*', '%2A')
    .replace('%20', '+');
}

Respondido 21 ago 19, 17:08

Para codificar una URL, como se ha dicho antes, tiene dos funciones:

encodeURI()

y

encodeURIComponent()

La razón por la que ambos existen es que el primero conserva la URL con el riesgo de dejar demasiadas cosas sin escapar, mientras que el segundo codifica todo lo necesario.

Con el primero, podría copiar la URL recién escaneada en la barra de direcciones (por ejemplo) y funcionaría. Sin embargo, sus '&' sin escape interferirían con los delimitadores de campo, los '=' interferirían con los nombres y valores de los campos, y los '+' se verían como espacios. Pero para datos simples cuando desea preservar la naturaleza de la URL de lo que está escapando, esto funciona.

El segundo es todo lo que necesita hacer para asegurarse de que nada en su cadena interfiera con una URL. Deja varios caracteres sin importancia sin escapar para que la URL siga siendo lo más legible posible por humanos sin interferencias. Una URL codificada de esta manera ya no funcionará como una URL sin eliminar su escape.

Entonces, si puede tomarse el tiempo, siempre debe usar encodeURIComponent (); antes de agregar pares de nombre / valor, codifique tanto el nombre como el valor usando esta función antes de agregarlo a la cadena de consulta.

Me está costando encontrar razones para usar encodeURI (). Eso se lo dejo a las personas más inteligentes.

Respondido el 26 de enero de 17 a las 21:01

Manera elegante

En mi humilde opinión, la forma más elegante de codificar parámetros de consulta es crear un objeto con parámetros como

const queryParams = { param1: 'value1', param2: 'value2' }

y luego codifíquelo usando:

const queryString = new URLSearchParams(queryParams).toString()

como se menciona en esta respuesta: https://stackoverflow.com/a/53171438/7284582

Respondido el 09 de enero de 20 a las 13:01

Tipo de cosa similar que probé con javascript normal

function fixedEncodeURIComponent(str){
     return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
}

contestado el 14 de mayo de 13 a las 09:05

¿Qué es la codificación de URL?

Una URL debe estar codificada cuando hay caracteres especiales dentro de la URL. Por ejemplo:

console.log(encodeURIComponent('?notEncoded=&+'));

Podemos observar en este ejemplo que todos los caracteres excepto la cadena notEncoded están codificados con signos%. La codificación de URL también se conoce como codificación porcentual porque escapa a todos los caracteres especiales con un%. Luego, después de este signo%, cada carácter especial tiene un código único.

¿Por qué necesitamos la codificación de URL?

Ciertos caracteres tienen un valor especial en una cadena de URL. Por ejemplo, el? carácter denota el comienzo de una cadena de consulta. Para ubicar con éxito un recurso en la web, es necesario distinguir cuando un carácter se entiende como parte de una cadena o como parte de la estructura de la URL.

¿Cómo podemos lograr la codificación de URL en JS?

JS ofrece un montón de funciones de utilidad incorporadas que podemos usar para codificar fácilmente URL. Estas son dos opciones convenientes:

  1. encodeURIComponent(): Toma un componente de un URI como argumento y devuelve la cadena URI codificada.
  2. encodeURI(): Toma un URI como argumento y devuelve la cadena URI codificada.

Ejemplo y advertencias:

Tenga en cuenta que no debe pasar la URL completa (incluido el esquema, por ejemplo, https: //) en encodeURIComponent(). De hecho, esto puede transformarlo en una URL no funcional. Por ejemplo:

// for a whole URI don't use encodeURIComponent it will transform
// the / characters and the URL won't fucntion properly
console.log(encodeURIComponent("http://www.random.com/specials&char.html"));

// instead use encodeURI for whole URL's
console.log(encodeURI("http://www.random.com/specials&char.html"));

Podemos observar si ponemos la URL completa en encodeURIComponent que las barras diagonales (/) también se convierten en caracteres especiales. Esto hará que la URL ya no funcione correctamente.

Por lo tanto (como su nombre lo indica) use:

  1. encodeURIComponent en una determinada parte de una URL que desea codificar.
  2. encodeURI en una URL completa que desea codificar.

Respondido el 23 de Septiembre de 18 a las 09:09

Para evitar la codificación doble, es una buena idea decodificar la URL antes de la codificación (si se trata de URL ingresadas por el usuario, por ejemplo, que pueden estar ya codificadas).

Digamos que tenemos abc%20xyz 123 como entrada (un espacio ya está codificado):

encodeURI("abc%20xyz 123")            //   wrong: "abc%2520xyz%20123"
encodeURI(decodeURI("abc%20xyz 123")) // correct: "abc%20xyz%20123"

Respondido el 05 de enero de 17 a las 18:01

Nada funcionó para mí. Todo lo que estaba viendo era el HTML de la página de inicio de sesión, volviendo al lado del cliente con el código 200. (302 al principio, pero la misma solicitud Ajax cargaba la página de inicio de sesión dentro de otra solicitud Ajax, que se suponía que era una redirección en lugar de una carga simple texto de la página de inicio de sesión).

En el controlador de inicio de sesión, agregué esta línea:

Response.Headers["land"] = "login";

Y en el controlador Ajax global, hice esto:

$(function () {
    var $document = $(document);
    $document.ajaxSuccess(function (e, response, request) {
        var land = response.getResponseHeader('land');
        var redrUrl = '/login?ReturnUrl=' + encodeURIComponent(window.location);
        if(land) {
            if (land.toString() === 'login') {
                window.location = redrUrl;
            }
        }
    });
});

Ahora no tengo ningún problema y funciona de maravilla.

Respondido el 03 de enero de 13 a las 07:01

No deberías usar encodeURIComponent() directamente.

Eche un vistazo a RFC3986: Identificador uniforme de recursos (URI): sintaxis genérica

sub-delims = "!" / "$" / "&" / "'" / "(" / ")" / "*" / "+" / "," / ";" / "="

El propósito de los caracteres reservados es proporcionar un conjunto de caracteres delimitadores que se distingan de otros datos dentro de un URI.

Estos caracteres reservados de la definición de URI en RFC3986 NO se escapan por encodeURIComponent().

Documentos web de MDN: encodeURIComponent ()

Para ser más estrictos al adherirse a RFC 3986 (que reserva!, ', (,) Y *), aunque estos caracteres no tienen usos formalizados de delimitación de URI, lo siguiente se puede usar de forma segura:

Utilice la función MDN Web Docs ...

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

contestado el 16 de mayo de 20 a las 21:05

Codificar cadena de URL

    var url = $ (ubicación) .attr ('href'); // obtener la URL actual // O var url = 'folder / index.html? param = # 23dd & noob = yes'; // o especificar uno

var encodedUrl = encodeURIComponent(url); console.log(encodedUrl); //outputs folder%2Findex.html%3Fparam%3D%2323dd%26noob%3Dyes for more info go http://www.sitepoint.com/jquery-decode-url-string

Respondido el 10 de Septiembre de 15 a las 07:09

Aquí hay una DEMO EN VIVO of encodeURIComponent() y decodeURIComponent() Funciones integradas de JS:

<!DOCTYPE html>
<html>
  <head>
    <style>
      textarea{
        width:30%;
        height:100px;
      }
    </style>
    <script>
      // encode string to base64
      function encode()
      {
        var txt = document.getElementById("txt1").value;
        var result = btoa(txt);
        document.getElementById("txt2").value = result;
      }
      // decode base64 back to original string
      function decode()
      {
        var txt = document.getElementById("txt3").value;
        var result = atob(txt);
        document.getElementById("txt4").value = result;
      }
    </script>
  </head>
  <body>
    <div>
      <textarea id="txt1">Some text to decode
      </textarea>
    </div>
    <div>
      <input type="button" id="btnencode" value="Encode" onClick="encode()"/>
    </div>
    <div>
      <textarea id="txt2">
      </textarea>
    </div>
    <br/>
    <div>
      <textarea id="txt3">U29tZSB0ZXh0IHRvIGRlY29kZQ==
      </textarea>
    </div>
    <div>
      <input type="button" id="btndecode" value="Decode" onClick="decode()"/>
    </div>
    <div>
      <textarea id="txt4">
      </textarea>
    </div>
  </body>
</html>

Respondido 09 Feb 19, 10:02

Puede usar la biblioteca esapi y codificar su URL usando la siguiente función. La función asegura que '/' no se pierda en la codificación mientras que el resto del contenido del texto está codificado:

function encodeUrl(url)
{
    String arr[] = url.split("/");
    String encodedUrl = "";
    for(int i = 0; i<arr.length; i++)
    {
        encodedUrl = encodedUrl + ESAPI.encoder().encodeForHTML(ESAPI.encoder().encodeForURL(arr[i]));
        if(i<arr.length-1) encodedUrl = encodedUrl + "/";
    }
    return url;
}

https://www.owasp.org/index.php/ESAPI_JavaScript_Readme

Respondido 17 Jul 19, 09:07

Utiliza fixedEncodeURIComponent función para cumplir estrictamente con RFC 3986:

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

Respondido 05 Oct 19, 21:10

Rendimiento

Hoy (2020.06.12) realizo una prueba de velocidad para las soluciones elegidas en MacOs HighSierra 10.13.6 en los navegadores Chrome 83.0, Safari 13.1, Firefox 77.0. Estos resultados pueden ser útiles para la codificación masiva de URL.

Conclusiones

  • encodeURI (B) parece ser el más rápido pero no lo es recomendado para url-s
  • escape (A) es una solución rápida entre navegadores
  • solución F recomendada por DND es medio rápido
  • la solución D es la más lenta

enter image description here

Beneficios

Para soluciones A B C D E F Realizo dos pruebas

  • para URL corta - 50 caracteres - puede ejecutarlo AQUÍ.
  • para URL larga (1 M de caracteres), puede ejecutarlo AQUÍ.

function A(url) {
	return escape(url);
}

function B(url) {
	return encodeURI(url);
}

function C(url) {
	return encodeURIComponent(url);
}

function D(url) {
	return new URLSearchParams({url}).toString();
}

function E(url){
     return encodeURIComponent(url).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
}

function F(url) {
  return encodeURIComponent(url).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}



// ----------
// TEST
// ----------

var myUrl = "http://example.com/index.html?param=1&anotherParam=2";

[A,B,C,D,E,F]
  .forEach(f=> console.log(`${f.name} ?url=${f(myUrl).replace(/^url=/,'')}`));
This snippet only presents code of choosen solutions

Resultados de ejemplo para Chrome

enter image description here

Respondido el 12 de junio de 20 a las 09:06

var myOtherUrl = 
   "http://example.com/index.html?url=" + encodeURIComponent(myUrl).replace(/%20/g,'+');

No olvide la bandera / g para reemplazar todo codificado ''

Respondido 18 ago 20, 23:08

Siempre uso esto para codificar cosas para URL. Esto es completamente seguro porque codificará cada carácter incluso si no tiene que estar codificado.

function urlEncode(text) {
    encoded = '';
    for (let char of text) {
        encoded += '%' + char.charCodeAt(0).toString(16);
    }
    return encoded;
}

Respondido el 11 de diciembre de 20 a las 03:12

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.