如何編碼 URL 參數？

Question

我正在嘗試將參數傳遞給一個如下所示的 URL：

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

我想傳遞參數，例如由另一個 API 自身生成的圖像 URL，圖像的鏈接結果為：

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

但是，當我嘗試使用 URL 時：

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

它不起作用。

我也試過在 imageURL 上使用encodeURI()和encodeURIComponent() ，但這也不起作用。

Answer 1

使用 PHP

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

結果

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

使用 JavaScript：

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

演示： http : //jsfiddle.net/Lpv53/

Answer 2

使用新的 ES6 Object.entries() ，它可以創建一個有趣的小嵌套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))

Answer 3

使用urlsearchparams ：

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

Answer 4

只需自己嘗試encodeURI()和encodeURIComponent() ......

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

輸入： @#$%^&* 。 輸出： %40%23%24%25%5E%26* 。 那么，等等， *發生了什么？ 為什么這個沒有轉換？ TLDR：您實際上需要fixedEncodeURIComponent()和fixedEncodeURI() 。 很長的故事...

您不應該使用encodeURIComponent()或encodeURI() 。 根據 MDN 文檔，您應該使用fixedEncodeURIComponent()和fixedEncodeURI() 。

關於encodeURI() ...

如果希望遵循更新的 URL RFC3986，它保留方括號（用於 IPv6），因此在形成可能是 URL 一部分的內容（例如主機）時不進行編碼，以下代碼片段可能會有所幫助：

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

關於encodeURIComponent() ...

為了更嚴格地遵守 RFC 3986（保留 !、'、(、) 和 *），即使這些字符沒有正式的 URI 分隔用途，也可以安全地使用以下內容：

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

那么區別是什么呢？ fixedEncodeURI()和fixedEncodeURIComponent()轉換相同的一組值，但fixedEncodeURIComponent()也轉換這組值： +@?=:*#;,$& 。 該集合用於GET參數（ & 、 +等）、錨標記（ # ）、通配符標記（ * ）、電子郵件/用戶名部分（ @ ）等。

例如——如果您使用encodeURI() ， user@example.com/?email=me@home將不會正確地將第二個@發送到服務器，除非您的瀏覽器處理兼容性（Chrome 自然經常這樣做）。