¿Cómo codificar parámetros de URL?

Estoy tratando de pasar parámetros a una URL que se parece a esto:

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

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

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

Sin embargo, cuando intento usar la URL:

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

No funciona.

También intenté usar encodeURI()y encodeURIComponent()en 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);

DEMO: http://jsfiddle.net/Lpv53/

Usando el nuevo ES6 Object.entries(), se convierte en un pequeño anidado map/ divertido 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))

No deberías usar encodeURIComponent()o encodeURI(). Debe utilizar fixedEncodeURIComponent()y fixedEncodeURI(), de acuerdo con la documentación de MDN.

Respecto a encodeURI()...

Si uno desea seguir el RFC3986 más reciente para URL, que hace que los corchetes estén reservados (para IPv6) y, por lo tanto, no se codifiquen cuando se forma 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, ']'); }

Respecto a 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 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 GETlos parámetros ( &, +, etc.), las etiquetas de anclaje ( #), etiquetas de comodines ( *), piezas de correo electrónico / nombre de usuario ( @), etc ..

Por ejemplo: si lo usa encodeURI(), [email protected]/?email=me@homeno enviará correctamente el segundo @al servidor, a excepción de que su navegador maneje la compatibilidad (como Chrome, naturalmente, lo hace a menudo).