[英]How to encode URL parameters?
I am trying to pass parameters to a URL which looks like this:我正在尝试将参数传递给一个如下所示的 URL:
http://www.foobar.com/foo?imageurl=
And I want to pass the parameters such as an image URL which is generated itself by another API, and the link for the image turns out as:我想传递参数,例如由另一个 API 自身生成的图像 URL,图像的链接结果为:
http://www.image.com/?username=unknown&password=unknown
However, when I try to use the URL:但是,当我尝试使用 URL 时:
http://www.foobar.com/foo?imageurl=http://www.image.com/?username=unknown&password=unknown
It doesn't work.它不起作用。
I have also tried using encodeURI()
and encodeURIComponent()
on the imageURL, and that too doesn't work.我也试过在 imageURL 上使用
encodeURI()
和encodeURIComponent()
,但这也不起作用。
With PHP使用 PHP
echo urlencode("http://www.image.com/?username=unknown&password=unknown");
Result结果
http%3A%2F%2Fwww.image.com%2F%3Fusername%3Dunknown%26password%3Dunknown
With Javascript:使用 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/演示: http : //jsfiddle.net/Lpv53/
Using new ES6 Object.entries()
, it makes for a fun little nested map
/ join
:使用新的 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))
With urlsearchparams :使用urlsearchparams :
const params = new URLSearchParams()
params.append('imageurl', 'http://www.image.com/?username=unknown&password=unknown')
return `http://www.foobar.com/foo?${params.toString()}`
Just try encodeURI()
and encodeURIComponent()
yourself...只需自己尝试
encodeURI()
和encodeURIComponent()
......
console.log(encodeURIComponent('@#$%^&*'));
Input: @#$%^&*
.输入:
@#$%^&*
。 Output: %40%23%24%25%5E%26*
.输出:
%40%23%24%25%5E%26*
。 So, wait, what happened to *
?那么,等等,
*
发生了什么? Why wasn't this converted?为什么这个没有转换? TLDR: You actually want
fixedEncodeURIComponent()
and fixedEncodeURI()
. TLDR:您实际上需要
fixedEncodeURIComponent()
和fixedEncodeURI()
。 Long-story...很长的故事...
You should not be using encodeURIComponent()
or encodeURI()
.您不应该使用
encodeURIComponent()
或encodeURI()
。 You should use fixedEncodeURIComponent()
and fixedEncodeURI()
, according to the MDN Documentation.根据 MDN 文档,您应该使用
fixedEncodeURIComponent()
和fixedEncodeURI()
。
Regarding encodeURI()
...关于
encodeURI()
...
If one wishes to follow the more recent RFC3986 for URLs, which makes square brackets reserved (for IPv6) and thus not encoded when forming something which could be part of a URL (such as a host), the following code snippet may help:
如果希望遵循更新的 URL RFC3986,它保留方括号(用于 IPv6),因此在形成可能是 URL 一部分的内容(例如主机)时不进行编码,以下代码片段可能会有所帮助:
function fixedEncodeURI(str) { return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']'); }
Regarding encodeURIComponent()
...关于
encodeURIComponent()
...
To be more stringent in adhering to RFC 3986 (which reserves !, ', (, ), and *), even though these characters have no formalized URI delimiting uses, the following can be safely used:
为了更严格地遵守 RFC 3986(保留 !、'、(、) 和 *),即使这些字符没有正式的 URI 分隔用途,也可以安全地使用以下内容:
function fixedEncodeURIComponent(str) { return encodeURIComponent(str).replace(/[!'()*]/g, function(c) { return '%' + c.charCodeAt(0).toString(16); }); }
So, what is the difference?那么区别是什么呢?
fixedEncodeURI()
and fixedEncodeURIComponent()
convert the same set of values, but fixedEncodeURIComponent()
also converts this set: +@?=:*#;,$&
. fixedEncodeURI()
和fixedEncodeURIComponent()
转换相同的一组值,但fixedEncodeURIComponent()
也转换这组值: +@?=:*#;,$&
。 This set is used in GET
parameters ( &
, +
, etc.), anchor tags ( #
), wildcard tags ( *
), email/username parts ( @
), etc..该集合用于
GET
参数( &
、 +
等)、锚标记( #
)、通配符标记( *
)、电子邮件/用户名部分( @
)等。
For example -- If you use encodeURI()
, user@example.com/?email=me@home
will not properly send the second @
to the server, except for your browser handling the compatibility (as Chrome naturally does often).例如——如果您使用
encodeURI()
, user@example.com/?email=me@home
将不会正确地将第二个@
发送到服务器,除非您的浏览器处理兼容性(Chrome 自然经常这样做)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.