如何编码 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 自然经常这样做）。