Come codificare i parametri URL?

Sto cercando di passare parametri a un URL simile a questo:

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

E voglio passare i parametri come l'URL di un'immagine che viene generato da sé da un'altra API e il collegamento per l'immagine risulta come:

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

Tuttavia, quando provo a utilizzare l'URL:

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

Non funziona.

Ho anche provato a usare encodeURI()e encodeURIComponent()su imageURL, e anche questo non funziona.

Con PHP

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

Risultato

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 il nuovo ES6 Object.entries(), rende divertente un po 'annidato 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))

Non dovresti usare encodeURIComponent()o encodeURI(). Dovresti usare fixedEncodeURIComponent()e fixedEncodeURI(), secondo la documentazione MDN.

Per quanto riguarda encodeURI()...

Se si desidera seguire la più recente RFC3986 per gli URL, che rende le parentesi quadre riservate (per IPv6) e quindi non codificate quando si forma qualcosa che potrebbe essere parte di un URL (come un host), il seguente frammento di codice può aiutare:

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

Per quanto riguarda encodeURIComponent()...

Per essere più rigorosi nell'adesione alla RFC 3986 (che riserva!, ', (,) E *), anche se questi caratteri non hanno usi di delimitazione URI formalizzati, si può tranquillamente usare quanto segue:

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

Allora, qual è la differenza? fixedEncodeURI()e fixedEncodeURIComponent()convertire lo stesso insieme di valori, ma fixedEncodeURIComponent()converte anche questo set: +@?=:*#;,$&. Questo set è usato in GETparametri ( &, +, ecc), i tag di ancoraggio ( #), i tag jolly ( *), parti di e-mail / nome utente ( @), ecc ..

Ad esempio: se utilizzi encodeURI(), user@example.com/?email=me@homenon invierà correttamente il secondo @al server, ad eccezione del tuo browser che gestisce la compatibilità (come naturalmente fa spesso Chrome).