如何使用JavaScript安全地编码URL，以便将其放入GET字符串中？
var myUrl = "http://example.com/index.html?param=1&anotherParam=2";
var myOtherUrl = "http://example.com/index.html?url=" + myUrl;
我假设您需要在第二行编码myUrl变量？
当前回答
我建议使用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
其他回答
这里是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>
如前所述，要对URL进行编码，您有两个函数：
encodeURI()
and
encodeURIComponent()
两者都存在的原因是，第一种方法保留了URL，但有可能留下太多未被屏蔽的内容，而第二种方法对所有需要的内容进行编码。
使用第一个，您可以将新转义的URL复制到地址栏中（例如），这样就可以了。然而，未转义的‘&’会干扰字段分隔符，‘=’会干扰域名和值，‘+’看起来像空格。但对于简单的数据，当您希望保留要转义的内容的URL性质时，这是有效的。
第二个是您需要做的一切，以确保字符串中没有任何内容干扰URL。它保留了各种不重要的字符，使URL尽可能保持可读性而不受干扰。以这种方式编码的URL将不再作为URL工作，而不会取消其标题。
因此，如果您可以花点时间，那么在添加名称/值对之前，您总是希望使用encodeURIComponent（）对名称和值进行编码，然后再将其添加到查询字符串中。
我很难找到使用encodeURI（）的理由——我将把这留给更聪明的人。
您有三个选项：
escape（）不会编码：@*/+encodeURI（）不会编码：~@#$&*()=:/,;?+'encodeURIComponent（）不会编码：~*()'
但在您的情况下，如果要将URL传递到其他页面的GET参数中，则应该使用escape或encodeURIComponent，而不是encodeURI。
有关详细讨论，请参阅堆栈溢出问题最佳实践：转义或encodeURI/encodeURIComponent。
查看内置函数encodeURIComponent（str）和encodeURI（str）。在您的情况下，这应该有效：
var myOtherUrl =
"http://example.com/index.html?url=" + encodeURIComponent(myUrl);
表演
今天（2020.06.12），我在浏览器Chrome 83.0、Safari 13.1和Firefox 77.0的macOS v10.13.6（High Sierra）上对所选解决方案进行了速度测试。这一结果对于大规模URL编码非常有用。
结论
encodeURI（B）似乎最快，但不建议用于URLescape（A）是一种快速的跨浏览器解决方案MDN推荐的解决方案F为中速解决方案D最慢
细节
对于解决方案A.BCDEF我进行了两次测试
对于短URL-50个字符-您可以在这里运行对于长URL-1M个字符-您可以在此处运行
函数A（url）{返回转义符（url）；}函数B（url）{返回encodeURI（url）；}函数C（url）{返回encodeURIComponent（url）；}函数D（url）{返回新的URLSearchParams（｛url｝）.toString（）；}函数E（url）{return encodeURIComponent（url）.replace（/[！'（）]/g，escape）.replace（/\*/g，“%2A”）；}函数F（url）{return encodeURIComponent（url）.replace（/[！'（）*]/g，函数（c）{return“%”+c.charCodeAt（0）.toString（16）；});}// ----------//测试// ----------var myUrl=“http://example.com/index.html?param=1&anotherParam=2";[A、B、C、D、E、F].forEach（f=>console.log（`$｛f.name｝？url=$｛f（myUrl）.replace（/^url=/，''）｝`））；此代码段仅显示所选解决方案的代码
Chrome的示例结果
