Wie codiere ich URL-Parameter?

Ich versuche, Parameter an eine URL zu übergeben, die folgendermaßen aussieht:

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

Und ich möchte die Parameter wie eine Bild-URL übergeben, die von einer anderen API selbst generiert wird, und der Link für das Bild stellt sich wie folgt heraus:

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

Wenn ich jedoch versuche, die URL zu verwenden:

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

Es funktioniert nicht.

Ich habe auch versucht mit encodeURI()und encodeURIComponent()auf dem imageURL, und das auch nicht funktioniert.

Mit PHP

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

Ergebnis

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

Mit 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/

Mit dem neuen ES6 Object.entries()sorgt es für ein lustiges kleines verschachteltes 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))

Sie sollten nicht verwenden encodeURIComponent()oder encodeURI(). Sie sollten fixedEncodeURIComponent()und fixedEncodeURI()gemäß der MDN-Dokumentation verwenden.

In Bezug auf encodeURI()...

Wenn Sie dem neueren RFC3986 für URLs folgen möchten, bei dem eckige Klammern reserviert (für IPv6) und daher nicht codiert werden, wenn etwas gebildet wird, das Teil einer URL sein könnte (z. B. ein Host), kann das folgende Codeausschnitt hilfreich sein:

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

In Bezug auf encodeURIComponent()...

Um bei der Einhaltung von RFC 3986 (das reserviert !, ', (,) Und *) strenger zu sein, kann Folgendes sicher verwendet werden, obwohl diese Zeichen keine formalisierten URI-Begrenzungsverwendungen haben:

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

Was ist der Unterschied? fixedEncodeURI()und fixedEncodeURIComponent()konvertieren Sie den gleichen Satz von Werten, fixedEncodeURIComponent()konvertieren Sie aber auch diesen Satz : +@?=:*#;,$&. Dieser Satz wird in verwendet GETParameter ( &, +usw.), Anker - Tags ( #), Wildcard - Tags ( *), E - Mail / Benutzername Teile ( @), etc ..

Beispiel: Wenn Sie verwenden encodeURI(), user@example.com/?email=me@homewird die Sekunde nicht ordnungsgemäß @an den Server gesendet, außer wenn Ihr Browser die Kompatibilität übernimmt (wie Chrome dies natürlich häufig tut).