¿Cómo codificar los parámetros de URL?

Estoy tratando de pasar parámetros a una URL que se ve así:

http://www.foobar.com/foo?imageurl=

Y quiero pasar los parámetros, como una URL de imagen que otra API genera, y el enlace para la imagen resulta como:

http://www.image.com/?username=unknown&password=unknown

Sin embargo, cuando trato de usar la URL:

http://www.foobar.com/foo?imageurl=http://www.image.com/?username=unknown&password=unknown

no funciona

También he intentado usar encodeURI() y encodeURIComponent() en la imageURL, y eso tampoco funciona.

Con PHP

echo urlencode("http://www.image.com/?username=unknown&password=unknown");

Resultado

http%3A%2F%2Fwww.image.com%2F%3Fusername%3Dunknown%26password%3Dunknown

Con JavaScript:

var myUrl = "http://www.image.com/?username=unknown&password=unknown";
var encodedURL= "http://www.foobar.com/foo?imageurl=" + encodeURIComponent(myUrl);

MANIFESTACIÓN: http://jsfiddle.net/Lpv53/

Usando el nuevo ES6 Object.entries()lo convierte en un divertido poco anidado map/join:

const encodeGetParams = p => 
  Object.entries(p).map(kv => kv.map(encodeURIComponent).join("=")).join("&");

const params = {
  user: "María Rodríguez",
  awesome: true,
  awesomeness: 64,
  "ZOMG+&=*(": "*^%*GMOZ"
};

console.log("https://example.com/endpoint?" + encodeGetParams(params))

Con URLSearchParams:

const params = new URLSearchParams()
params.append('imageurl', 'http://www.image.com/?username=unknown&password=unknown')
return `http://www.foobar.com/foo?${params.toString()}`

Sólo inténtalo encodeURI() y encodeURIComponent() tú mismo…

console.log(encodeURIComponent('@#$%^&*'));

Aporte: @#$%^&*. Producción: %40%23%24%25%5E%26*. Entonces, espera, ¿qué pasó con *? ¿Por qué no se convirtió esto? TLDR: en realidad quieres fixedEncodeURIComponent() y fixedEncodeURI(). Larga historia…

No deberías estar usando encodeURIComponent() o encodeURI(). Deberías usar fixedEncodeURIComponent() y fixedEncodeURI()según la documentación de MDN.

Con respecto a encodeURI()…

Si uno desea seguir el RFC3986 más reciente para URL, que hace que los corchetes se reserven (para IPv6) y, por lo tanto, no se codifiquen al formar algo que podría ser parte de una URL (como un host), el siguiente fragmento de código puede ayudar:

function fixedEncodeURI(str) { return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']'); }

Con respecto a encodeURIComponent()…

Para ser más estrictos en el cumplimiento de RFC 3986 (que se reserva !, ‘, (, ) y *), aunque estos caracteres no tienen usos delimitadores de URI formalizados, se puede usar lo siguiente de manera segura:

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

¿Entonces cuál es la diferencia? fixedEncodeURI() y fixedEncodeURIComponent() convertir el mismo conjunto de valores, pero fixedEncodeURIComponent() también convierte este conjunto: +@?=:*#;,$&. Este conjunto se utiliza en GET parámetros (&, +etc.), etiquetas de anclaje (#), etiquetas comodín (*), partes de correo electrónico/nombre de usuario (@), etc..

Por ejemplo — Si utiliza encodeURI(), user@example.com/?email=me@home no enviará correctamente el segundo @ al servidor, a excepción de que su navegador maneje la compatibilidad (como Chrome, naturalmente, lo hace a menudo).