如何使用JavaScript安全地编码URL，以便将其放入GET字符串中？
var myUrl = "http://example.com/index.html?param=1&anotherParam=2";
var myOtherUrl = "http://example.com/index.html?url=" + myUrl;
我假设您需要在第二行编码myUrl变量？
当前回答
您可以使用ESAPI库并使用以下函数对URL进行编码。该函数确保在对其余文本内容进行编码时，“/”不会因编码而丢失：
function encodeUrl(url)
{
String arr[] = url.split("/");
String encodedUrl = "";
for(int i = 0; i<arr.length; i++)
{
encodedUrl = encodedUrl + ESAPI.encoder().encodeForHTML(ESAPI.encoder().encodeForURL(arr[i]));
if(i<arr.length-1) encodedUrl = encodedUrl + "/";
}
return url;
}
其他回答
表演
今天（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的示例结果
不应直接使用encodeURIComponent（）。
看看RFC3986：统一资源标识符（URI）：通用语法
sub-delims=“！”/“$”/“&”/“'”/“（”/“）”/ "*" / "+" / "," / ";" / "="保留字符的目的是提供一组可与URI中的其他数据区分的分隔字符。
这些来自RFC3986中URI定义的保留字符不会被encodeURIComponent（）转义。
MDN Web文档：encodeURIComponent（）
为了更严格地遵守RFC 3986（保留！、'、（、）和*），即使这些字符没有正式的URI分隔用途，也可以安全地使用以下字符：
使用MDN Web Docs功能。。。
function fixedEncodeURIComponent(str) {
return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
return '%' + c.charCodeAt(0).toString(16);
});
}
这里是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>
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', '+');
}
我认为在2022年，为了真正安全，您应该始终考虑使用URL（）接口构建URL。它将为您完成大部分工作。所以，说到你的代码，
常量baseURL='http://example.com/index.html';const myUrl=新URL（baseURL）；myUrl.searchParams.append（“参数”，“1”）；myUrl.searchParams.append（“otherParam”，“2”）；const myOtherUrl=新URL（baseURL）；myOtherUrl.searchParams.append（'url'，myUrl.href）；console.log（myUrl.href）；//输出：http://example.com/index.html?param=1&anotherParam=2console.log（myOtherUrl.href）；//输出：http://example.com/index.html?url=http%3A%2F%2Fexample.com%2Findex.html%3Fparam%3D1%26anotherParam%3D2console.log（myOtherUrl.searchParams.get（'url'））；//输出：http://example.com/index.html?param=1&anotherParam=2
或
const params = new URLSearchParams(myOtherUrl.search);
console.log(params.get('url'));
// Outputs: http://example.com/index.html?param=1&anotherParam=2
像这样的东西肯定不会失败。
