用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变量？

当前回答

我用普通JavaScript做了类似的尝试：

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

2013-05-14 06:48:44

其他回答

如前所述，要对URL进行编码，您有两个函数：

encodeURI()

and

encodeURIComponent()

两者都存在的原因是，第一种方法保留了URL，但有可能留下太多未被屏蔽的内容，而第二种方法对所有需要的内容进行编码。

使用第一个，您可以将新转义的URL复制到地址栏中（例如），这样就可以了。然而，未转义的‘&’会干扰字段分隔符，‘=’会干扰域名和值，‘+’看起来像空格。但对于简单的数据，当您希望保留要转义的内容的URL性质时，这是有效的。

第二个是您需要做的一切，以确保字符串中没有任何内容干扰URL。它保留了各种不重要的字符，使URL尽可能保持可读性而不受干扰。以这种方式编码的URL将不再作为URL工作，而不会取消其标题。

因此，如果您可以花点时间，那么在添加名称/值对之前，您总是希望使用encodeURIComponent（）对名称和值进行编码，然后再将其添加到查询字符串中。

我很难找到使用encodeURI（）的理由——我将把这留给更聪明的人。

2017-01-26 21:31:43

查看内置函数encodeURIComponent（str）和encodeURI（str）。在您的情况下，这应该有效：

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

2008-12-02 02:43:57

我建议使用qs-npm包：

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

它更容易与JavaScript对象一起使用，并且为所有参数提供了正确的URL编码。

如果您使用jQuery，我会使用$.param方法。它对一个对象进行URL编码，将字段映射到值，这比对每个值调用转义方法更容易读取。

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

2013-05-13 03:32:25

encodeURIComponent（）是最好的方法。

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

但是您应该记住，与PHP版本urlencode（）有一些小的不同，正如@CMS所提到的，它不会对每个字符进行编码。伙计们在http://phpjs.org/functions/urlencode/使JavaScript等效于phpencodes（）：

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('!', '%21')
    .replace('\'', '%27')
    .replace('(', '%28')
    .replace(')', '%29')
    .replace('*', '%2A')
    .replace('%20', '+');
}

2015-10-01 08:03:26

这里是encodeURIComponent（）和decodeURIComponent（）JavaScript内置函数的现场演示：

<!DOCTYPE html>
<html>
  <head>
    <style>
      textarea{
        width: 30%;
        height: 100px;
      }
    </style>
    <script>
      // Encode string to Base64
      function encode()
      {
        var txt = document.getElementById("txt1").value;
        var result = btoa(txt);
        document.getElementById("txt2").value = result;
      }
      // Decode Base64 back to original string
      function decode()
      {
        var txt = document.getElementById("txt3").value;
        var result = atob(txt);
        document.getElementById("txt4").value = result;
      }
    </script>
  </head>
  <body>
    <div>
      <textarea id="txt1">Some text to decode
      </textarea>
    </div>
    <div>
      <input type="button" id="btnencode" value="Encode" onClick="encode()"/>
    </div>
    <div>
      <textarea id="txt2">
      </textarea>
    </div>
    <br/>
    <div>
      <textarea id="txt3">U29tZSB0ZXh0IHRvIGRlY29kZQ==
      </textarea>
    </div>
    <div>
      <input type="button" id="btndecode" value="Decode" onClick="decode()"/>
    </div>
    <div>
      <textarea id="txt4">
      </textarea>
    </div>
  </body>
</html>

2019-02-09 10:26:42

用JavaScript编码URL

推荐文章

最新文章

标签