处理js url中传递的特殊字符(如：+、？、/、#、&、%等)

一、问题描述

使用url拼接字符串时，当传递的参数含有特殊字符时(如：+、？、/、#、&、%等)，后端接收到的值不正确，此时需做特殊处理。

二、问题示例

var url = "http://example.com/test?name=test+2024&age=22";
//后端接收到的：name:test 2024 , age:22

name中的+号变成了空格，因为在URL中，一些字符具有特殊的意义，需要经过编码才能正常传输和解析。

三、解决办法(对URL中的特殊字符进行编码)

1.使用百分号 % 后跟两个十六进制数字来表示字符的ASCII码。

例如上诉例子可以使用%20代替+号，后端接收到的code就正确了，为‘test+2024’。

常见特殊符号的含义、对应ASCII码和编码

2.使用框架或库

一些编程框架或库提供了方便的方法来处理URL编码和特殊字符。例如Java的 URLEncoder 类或JavaScript的 encodeURIComponent 函数

①URLEncoder：用于对整个URI进行编码，但不会对属于URI组成部分的特殊字符进行编码，比如：、/、#和？等。

var url = "http://example.com/test?name=test+2024&age=22";  
var encodedUrl = encodeURI(url);
console.log(encodeUrl);
//输出结果为:"http://example.com/test?name=test%202024&age=25"
//后端接收到的：name:test 2024 , age:22
//20%表示空格

②encodeURIComponent：用于对URI的组成部分进行编码，包括查询字符串参数的值等。它会对所有非字母数字字符进行编码，包括：、/、#和？等。（解决上诉的问题示例可用此种办法）

简单来说，如果想对整个URL进行简单的转义处理，以便发送给浏览器，那么可以使用encodeURI。如果你需要对URL中的某一部分（如查询字符串）进行更详细的转义处理，那么应该使用encodeURIComponent。

var url = "http://example.com/test?name=test+2022&age=22";  
var encodedUrl = encodeURIComponent(url);  
console.log(encodedUrl);
//输出结果为："http%3A%2F%2Fexample.com%2Ftest%3Fname%3Dtest%2B2022%26age%3D22"
//后端接收到的：name:test+2024 , age:22

3.JavaScript中的一个内置函数escape函数(不推荐，已被视为过时，推荐使用encodeURIComponent替代)

escape函数只对ASCII字符进行编码，所以如果字符串中含有非ASCII字符，如中文、日文等，这些字符不会被编码。

var specialChar = "特殊字符：~!@#$%^&*()_+{}|:<>?";
var encodedChar = escape(specialChar);
console.log(encodedChar);
//输出结果为：特殊字符%3A%21%40%5B%5D%24%2A%28%29_%2B%7B%7D%7C%3A%3C%3E%3F

4.使用replace方法和正则表达式：可以使用replace方法和正则表达式来替换URL中的特定字符或字符串。

//加号在URL中表示空格，所以需要将它替换为%2B
var url = "http://example.com/test?name=test+2024&age=22";  
var encodedUrl = url.replace(/\+/g, "%2B");  
console.log(encodedUrl); 
//输出结果为：http://example.com/test?name=test%2B2024&age=22

5.使用split方法将字符串分割成数组，并使用join方法将数组连接起来。

var url = "http://example.com/test?name=test+2024&age=22";
var splitUrl = url.split('+').join('%2B');
console.log(splitUrl)
//根据 + 字符将URL分割为多个部分，使用 join('%2B') 将这些部分重新组合在一起，将 + 替换为 %2B
//输出结果为"http://example.com/test?name=test%2B2024&age=22"