Question

我正在尝试将参数传递给如下所示的网址：

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

我希望传递由另一个API生成的参数suchas和image URL，图片的链接结果为：

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

但是，当我尝试使用网址时：

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

它不起作用..

我也尝试在imageURL上使用encodeURI和encodeURIComponents，这也不起作用。

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);

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

Answer 2

只需自己尝试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自然会经常这样做）。

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()}`

如何编码URL参数？

3 个答案: