题 在JavaScript中编码URL?


如何使用JavaScript安全地编码URL,以便将其放入GET字符串?

var myUrl = "http://example.com/index.html?param=1&anotherParam=2";
var myOtherUrl = "http://example.com/index.html?url=" + myUrl;

我假设你需要编码 myUrl 第二行的变量?


2126
2017-12-02 02:37


起源


试着调查一下 是encodeURI() 和 decodeURI()。 - Zack The Human
看到 JavaScript urlencode函数。 - Yanni
您可以在此处使用此工具: phillihp.com/toolz/url-encode-decode - phillihp
encodeURIComponent方法() - Andrew


答案:


查看内置功能 encodeURIComponent(str) 和 encodeURI(str)
在你的情况下,这应该工作:

var myOtherUrl = 
       "http://example.com/index.html?url=" + encodeURIComponent(myUrl);

2492
2017-12-02 02:43



如何添加解释@cms给出的? escape 也是一个有效的选择。 - hitautodestruct
根据@CMS encodeURI URL编码不是很安全。 - Ifnot
@AnaelFavre因为它意味着对整个URL进行编码,这不允许使用诸如的字符 :, /, @ 这两种方法不可互换使用,你必须知道你编码的是使用正确的方法。 - Buu Nguyen
也可以看看 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/... 和 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/... - Michał Perłakowski
如上所述 在本页的另一个答案, 这个网站 很好地详细说明了使用此方法的原因 - Brad Parks


你有三个选择:

  • escape() 不会编码: @*/+

  • encodeURI() 不会编码: ~!@#$&*()=:/,;?+'

  • encodeURIComponent() 不会编码: ~!*()'

但在你的情况下,如果你想传递一个 网址 变成一个 GET 其他页面的参数,你应该使用 escape 要么 encodeURIComponent, 但不是 encodeURI

请参阅Stack Overflow问题 最佳实践:escape,或encodeURI / encodeURIComponent 进一步讨论。


1373
2017-12-02 02:49



与escape一起使用的字符编码是可变的。坚持使用encodeURI和encodeURIComponent,它们使用UTF-8。 - erickson
小心。该转义将非ASCII字符转换为其Unicode转义序列,如 %uxxx。 - opteronn
我正在使用encodeURIComponent并注意到它不会对管道字符进行编码 - kevzettler
@kevzettler - 为什么要这样做?管道在URI中不具有语义重要性。 - nickf
@GiovanniP:允许德语,法语,日语,中文,阿拉伯语字符作为输入并通过GET或POST传递这些参数的人。 - Tseng


坚持 encodeURIComponent()。功能 encodeURI() 不打算编码在URL中具有语义重要性的许多字符(例如“#”,“?”和“&”)。 escape() 不推荐使用,并且不打算编码“+”字符,这些字符将被解释为服务器上的编码空格(并且,正如其他人所指出的那样,不能对非ASCII字符进行正确的URL编码)。

有一个很好的 解释之间的区别 encodeURI() 和 encodeURIComponent() 别处。如果您想对某些内容进行编码,以便可以安全地将其作为URI的一个组件包含在内(例如作为查询字符串参数),那么您希望使用 encodeURIComponent()


157
2018-05-29 23:54





就个人而言,我发现很多API都想用“+”代替“”,所以我使用以下内容:

encodeURIComponent(value).replace(/%20/g,'+');

escape 在不同的浏览器和不同的实现 encodeURI 不会对URI中的大多数字符进行编码(例如#和even /) - 它可以在完整的URI / URL上使用而不会破坏它。

注意:你使用encodeURIComponent  查询字符串(不是字段/值名称,绝对不是整个URL)。如果你以任何其他方式执行它,它将不会编码=,?,&等字符,可能会使您的查询字符串暴露。

例:

const escapedValue = encodeURIComponent(value).replace(/%20/g,'+');
const url = 'http://example.com/?myKey=' + escapedValue;

66
2017-12-15 08:47



请注意,您应该只在第一个问号(这是URL的“查询”部分)之后用+符号替换%20。假设我想要浏览 http://somedomain/this dir has spaces/info.php?a=this has also spaces。它应该转换为: http://somedomain/this%20dir%20has%spaces/info.php?a=this%20has%20also%20spaces 但许多实现允许查询字符串中的'%20'被'+'替换。不过,你不能在URL的路径部分用'+'替换'%20',这将导致一个Not Found错误,除非你有一个目录 + 而不是空间。 - Jochem Kuijpers
@Jochem Kuijpers,当然,你不会在目录中加上“+”。我只将它应用于查询参数值本身(或键,如果需要),而不是整个URL,甚至整个查询字符串。 - Ryan Taylor
我会替换值而不是编码结果 - njzk2
不幸的是@ njzk2 encodeURIComponent('+') 会给你的 %2B,所以你必须使用两个正则表达式...我认为这有点为什么这样做,因为'+'是''在最后编码不同。 - Ryan Taylor


如果您使用的是jQuery,我会选择 $.param 方法。它对将对象映射到值的对象进行编码,这比在每个值上调用转义方法更容易阅读。

$.param({a:"1=2", b:"Test 1"}) // gets a=1%3D2&b=Test+1

35
2018-05-13 03:32



我认为提供的例子就足够了。如果您需要有关$ .param的更多信息 api.jquery.com/jquery.param - Maksym Kozlenko
几乎每个人都使用jQuery,我觉得用这个而不是encoreURIComponent更舒服 - Cyril Duchon-Doris


要编码URL,如前所述,您有两个功能:

encodeURI()

encodeURIComponent()

两者之所以存在的原因是,第一个保留URL的风险是留下太多未转义的东西,而第二个则编码所需的一切。

使用第一个,您可以将新转义的URL复制到地址栏(例如),它可以工作。然而,你的未转义的'&'会干扰字段分隔符,'='会干扰字段名称和值,而'+'会看起来像空格。但是对于简单的数据,当你想保留你正在逃避的URL性质时,这是有效的。

第二个是你需要做的一切,以确保你的字符串中没有任何内容干扰URL。它会保留未转义的各种不重要的字符,以便URL保持尽可能不受干扰的人类可读性。以这种方式编码的URL将不再作为URL工作而不会取消它。

因此,如果您可以花时间,您总是希望使用encodeURIComponent() - 在添加名称/值对之前,使用此函数对名称和值进行编码,然后再将其添加到查询字符串中。

我很难想出使用encodeURI()的理由 - 我会把它留给更聪明的人。


8
2018-01-26 21:31





encodeURIComponent()是要走的路。

var myOtherUrl = "http://example.com/index.html?url=" + encodeURIComponent(myUrl);

但是你应该记住,与php版本urlencode()存在细微的差别,并且如提到的@CMS,它不会对每个char进行编码。伙计们 http://phpjs.org/functions/urlencode/ 使js等同于phpencode():

function urlencode(str) {
  str = (str + '')
    .toString();

  // Tilde should be allowed unescaped in future versions of PHP (as reflected below), but if you want to reflect current
  // PHP behavior, you would need to add ".replace(/~/g, '%7E');" to the following.
  return encodeURIComponent(str)
    .replace(/!/g, '%21')
    .replace(/'/g, '%27')
    .replace(/\(/g, '%28')
    .
  replace(/\)/g, '%29')
    .replace(/\*/g, '%2A')
    .replace(/%20/g, '+');
}

7
2017-10-01 08:03





我用普通的javascript试过类似的东西

function fixedEncodeURIComponent(str){
     return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
}

4
2018-01-05 18:49