JS urlencode编码|极客笔记

JS urlencode编码

在Web开发中，我们经常需要对URL中的参数进行编码，以防止特殊字符对URL造成影响。JS中提供了一些内置的方法来进行urlencode编码，本文将详细介绍这些方法的使用。

`encodeURIComponent`方法

encodeURIComponent方法可以对特殊字符进行编码，比如空格、问号、井号等，将它们转换成对应的ASCII码表示。

示例代码如下：

let url = "https://www.example.com/search?q=hello world#section";
let encodedUrl = encodeURIComponent(url);
console.log(encodedUrl);

运行代码后，输出为：

https%3A%2F%2Fwww.example.com%2Fsearch%3Fq%3Dhello%20world%23section

可以看到，原始的URL被成功编码成了ASCII码表示的形式。

`encodeURI`方法

encodeURI方法主要用于对整个URL进行编码，但不包括用于分隔不同部分的特殊字符，比如冒号、斜杠、问号等。

示例代码如下：

let url = "https://www.example.com/search?q=hello world#section";
let encodedUrl = encodeURI(url);
console.log(encodedUrl);

运行代码后，输出为：

https://www.example.com/search?q=hello%20world#section

可以看到，由于encodeURI方法不会对特殊字符进行编码，因此URL中的斜杠等符号没有被转换。

自定义urlencode编码函数

除了使用内置的方法外，我们也可以自定义urlencode编码函数，对URL参数进行更精细的控制。

示例代码如下：

function customEncodeUrl(url) {
  return url.replace(/[^a-zA-Z0-9_\-\.!~\*'\(\)%]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

let url = "https://www.example.com/search?q=hello world#section";
let encodedUrl = customEncodeUrl(url);
console.log(encodedUrl);

运行代码后，输出为：

https%3A%2F%2Fwww.example.com%2Fsearch%3Fq%3Dhello%20world%23section

可以看到，自定义的urlencode编码函数与内置的encodeURIComponent方法得到的结果是一致的。

总结

在Web开发中，urlencode编码是非常常见且重要的操作。通过使用JS提供的内置方法或自定义函数，我们可以轻松对URL中的特殊字符进行编码，确保URL参数传递的安全性和正确性。

JS urlencode编码