如何编码URL参数？

Question

我试图将参数传递给URL,如下所示:

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

并且我想传递由另一个API生成的参数suchas和image 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和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);

演示: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

只要尝试一下encodeURI()，你encodeURIComponent()自己...

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

输入：@#$%^&*。输出：%40%23%24%25%5E%26*。那么，等等，发生了什么*？为什么这个没有转换？TLDR：您实际上想要fixedEncodeURIComponent()和fixedEncodeURI()。很长的故事...

您不应该使用encodeURIComponent()或encodeURI()。根据 MDN 文档，您应该使用fixedEncodeURIComponent()和。fixedEncodeURI()

关于encodeURI()...

如果您希望遵循更新的 URL RFC3986，该 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 4

使用urlsearchparams：

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